@wayke-se/components-react 3.0.0-beta.10 → 3.0.0-beta.11

package/dist/slick-7CK47X3J.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/esbuild/build.js

@@ -0,0 +1,39 @@
+/* eslint-disable no-console */
+
+const config = require('./common');
+const { Generator } = require('npm-dts');
+const { build } = require('esbuild');
+const { dependencies, peerDependencies } = require('../package.json');
+
+const shared = {
+  ...config,
+  entryPoints: ['src/index-esbuild.ts'],
+  bundle: true,
+  minify: false,
+  sourcemap: true,
+  logLevel: 'info',
+  external: Object.keys(dependencies).concat(Object.keys(peerDependencies || {})),
+};
+
+build({
+  ...shared,
+  outfile: 'dist/index.js',
+});
+
+build({
+  ...shared,
+  outfile: 'dist/index.mjs',
+  format: 'esm',
+});
+
+const timetaken = '⚡ Generating types done in';
+console.time(timetaken);
+new Generator({
+  entry: 'src/index.ts',
+  output: 'dist/index.d.ts',
+  help: true,
+  logLevel: 'debug',
+})
+  .generate()
+  .then(() => console.timeEnd(timetaken))
+  .catch(() => console.log('Error occured while generating types'));

package/esbuild/common.js

@@ -0,0 +1,15 @@
+module.exports = {
+  bundle: true,
+  sourcemap: true,
+  loader: {
+    '.js': 'jsx',
+    '.woff': 'file',
+    '.woff2': 'file',
+    '.gif': 'file',
+    '.png': 'file',
+    '.jpg': 'file',
+    '.svg': 'file',
+    '.eot': 'file',
+    '.ttf': 'file',
+  },
+};

package/esbuild/start.js

@@ -0,0 +1,21 @@
+require('dotenv').config();
+const config = require('./common');
+
+require('esbuild').serve(
+  {
+    servedir: 'esbuild/www',
+    port: 5000,
+  },
+  Object.assign(config, {
+    entryPoints: ['src/index-dev.tsx'],
+    outdir: 'esbuild/www',
+    define: {
+      'process.env.WAYKE_SEARCH_URL': `"${process.env.WAYKE_SEARCH_URL}"`,
+      'process.env.WAYKE_SEARCH_MLT_URL': `"${process.env.WAYKE_SEARCH_MLT_URL}"`,
+      'process.env.WAYKE_SEARCH_X_API_KEY': `"${process.env.WAYKE_SEARCH_X_API_KEY}"`,
+      'process.env.WAYKE_GRAPH_QL_URL': `"${process.env.WAYKE_GRAPH_QL_URL}"`,
+      'process.env.WAYKE_ECOM_URL': `"${process.env.WAYKE_ECOM_URL}"`,
+      'process.env.GOOGLE_MAPS_API_KEY': `"${process.env.GOOGLE_MAPS_API_KEY}"`,
+    },
+  })
+);

package/esbuild/www/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="se">
+  <head>
+    <title>Wayke Components React</title>
+
+    <meta charset="UTF-8">
+    <meta name="description" content="Wayke Ecom Web">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#fff">
+
+    <link rel="stylesheet" href="index-dev.css">
+
+    <style>
+      html {
+        font-size: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      body {
+        margin: 0;
+      }
+    </style>
+    
+  </head>
+  <body>
+    <h1>Wayke Components React</h1>
+    <div id="root"></div>
+    <script src="index-dev.js"></script>
+  </body>
+</html>

package/example/src/@types/global.d.ts

@@ -0,0 +1,7 @@
+import { WaykePubSub } from '../../../src';
+
+declare global {
+  interface Window {
+    WaykePubSub: WaykePubSub;
+  }
+}

package/example/src/@types/react-panellum.d.ts

@@ -0,0 +1 @@
+declare module 'react-pannellum';

package/example/src/App.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import Routes from './routes/index';
+import { BrowserRouter } from 'react-router-dom';
+
+import { WaykePubSub } from '../../src/index';
+
+WaykePubSub.subscribe({
+  eventName: 'ItemClicked',
+  // eslint-disable-next-line
+  callback: (id) => console.log('subscribed ItemClicked:', id),
+});
+
+WaykePubSub.subscribe({
+  eventName: 'HashRouteChange',
+  // eslint-disable-next-line
+  callback: (id) => console.log('subscribed HashRouteChange:', id),
+});
+
+WaykePubSub.subscribe({
+  eventName: 'EcomOnUserEvent',
+  callback: (userEvent, currentStep) =>
+    // eslint-disable-next-line
+    console.log('subscribed EcomOnUserEvent:', userEvent, currentStep),
+});
+
+WaykePubSub.subscribe({
+  eventName: 'EcomOnExit',
+  // eslint-disable-next-line
+  callback: () => console.log('subscribed EcomOnExit:'),
+});
+
+WaykePubSub.subscribe({
+  eventName: 'ImagesClick',
+  // eslint-disable-next-line
+  callback: () => console.log('subscribed ImagesClick:'),
+});
+
+WaykePubSub.subscribe({
+  eventName: 'OptionsClick',
+  // eslint-disable-next-line
+  callback: () => console.log('subscribed OptionsClick:'),
+});
+
+WaykePubSub.subscribe({
+  eventName: 'PhonenumberVisible',
+  // eslint-disable-next-line
+  callback: () => console.log('subscribed PhonenumberVisible:'),
+});
+
+WaykePubSub.subscribe({
+  eventName: 'PhonenumberCall',
+  // eslint-disable-next-line
+  callback: () => console.log('subscribed PhonenumberCall:'),
+});
+
+WaykePubSub.subscribe({
+  eventName: 'MailVisible',
+  // eslint-disable-next-line
+  callback: () => console.log('subscribed MailVisible:'),
+});
+
+WaykePubSub.subscribe({
+  eventName: 'All',
+  // eslint-disable-next-line
+  callback: (eventName, data) => console.log('subscribed All:', eventName, data),
+});
+
+window.WaykePubSub = WaykePubSub;
+
+const App = () => (
+  <BrowserRouter>
+    <Routes />
+  </BrowserRouter>
+);
+
+export default App;

package/example/src/assets/style/ecom.css

@@ -0,0 +1,63 @@
+/* @import "@wayke-se/ecom-react/assets/styles/default.css";*/
+@import "@wayke-se/ecom-web/dist/index.css";
+
+/* Custom Ecom CSS (Optional) */
+/* This file contains custom styling to overwrite wayke-ecom default styling */
+
+/* Timeline */
+.wayke-ecom [data-ecom-timeline] .timeline-indicator {
+  background-color: #ff5a1c;
+  border-color: #ff5a1c;
+}
+
+.wayke-ecom [data-ecom-timeline] .timeline-item.is-active:before {
+  background-color: #ff5a1c;
+}
+
+.wayke-ecom [data-ecom-timeline] .timeline-item.is-stepped+.timeline-item-step:before {
+  background-color: #ff5a1c;
+}
+
+.wayke-ecom [data-ecom-timeline] .timeline-item.is-stepped + .timeline-item-step .timeline-indicator {
+  border-color: #ff5a1c;
+}
+
+/* Link */
+
+.wayke-ecom [data-ecom-link] {
+  color: #ff5a1c;
+}
+
+.wayke-ecom button[data-ecom-link] {
+  color: #ff5a1c;
+}
+
+/* Button */
+
+.wayke-ecom [data-ecom-button] {
+  border-radius: 3px !important;
+  background-color: #ff5a1c !important;
+  color: #fff !important;
+}
+
+.wayke-ecom [data-ecom-button~=light] {
+  background-color: #ebebeb !important;
+  color: #ff5a1c !important;
+}
+
+/* Spinner */
+
+.wayke-ecom [data-ecom-spinner] .spinner {
+  border-color: #ff5a1c;
+  border-bottom-color: transparent;
+}
+
+/* Option List */
+.wayke-ecom [data-ecom-optionlist] .option-list-action-title {
+  color: #ff5a1c;
+}
+
+/* Cart */
+.wayke-ecom [data-ecom-cart] .cart-seller {
+  color: #ff5a1c;
+}

package/example/src/assets/style/theme.css

@@ -0,0 +1,83 @@
+/*
+  Theme Setting
+  This file contains theme settings.
+  Change the properties of each class to customize the design.
+
+  The following styling could be applied:
+  - Brand color
+  - Font Regular (and other font-related settings)
+  - Font Bold (and other font-related settings)
+*/
+
+/*** Brand color ***/
+
+/*
+  - Primary (background-color)
+  Used to add primary background-color to elements. Should also include
+  a color for text placed on top of the primary color. Be sure to pick
+  a text color with good contrast.
+*/
+.wayke__theme.wayke__color--primary-bg {
+  background-color: #ff5a1c;
+  color: #fff;
+}
+
+/*
+  - Primary (color)
+  Used to add primary color to text. Make sure to add the same color as
+  in the background-color selector above.
+*/
+.wayke__theme.wayke__color--primary-text {
+  color: #ff5a1c;
+}
+
+/*
+  - Secondary (background-color)
+  Used to add secondary background-color to elements. Should also include
+  a color for text placed on top of the primary color. Be sure to pick
+  a text color with good contrast.
+*/
+.wayke__theme.wayke__color--secondary-bg {
+  background-color: #ebebeb;
+  color: #ff5a1c;
+}
+
+/*
+  - Accent (background-color)
+  Used to add accent background-color to elements. Should also include
+  a color for text placed on top of the primary color. Be sure to pick
+  a text color with good contrast.
+*/
+.wayke__theme.wayke__color--accent-bg {
+  background-color: #f8f8f8;
+  color: #000;
+}
+
+/*** Font ***/
+
+/*
+  - Regular
+  This is the regular font used on most text elements. It is recommended
+  to use a light (font-weight: 300) or regular (font-weight: 400) font
+  for this type.
+*/
+.wayke__theme.wayke__font--regular {
+  font-family: sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+  letter-spacing: 0.02em;
+}
+
+/*
+  - Bold
+  This font will be applied to headings and some other elements using
+  the same styling.
+*/
+.wayke__theme.wayke__font--bold {
+  font-family: sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-stretch: normal;
+  letter-spacing: 0.02em;
+}

package/example/src/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="sv">
+  <head>
+    <title>Wayke</title>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Example of wayke-se/components-react">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <style>
+      html {
+        font-size: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+      <div id="root"></div>
+  </body>
+</html>

package/example/src/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import './assets/style/theme.css';
+import './assets/style/ecom.css';
+import '../../assets/default.css';
+
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container!); // createRoot(container!) if you use TypeScript
+root.render(<App />);

package/example/src/routes/HashRoute/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import WaykeComposite from '../../../../src/index';
+
+const initialQueryParams = new URLSearchParams();
+initialQueryParams.set('modelYear.min', '2018');
+
+const Home = () => (
+  <WaykeComposite
+    composite={{
+      // initialQueryParams,
+      removeSearchBar: false,
+    }}
+    provider={{
+      graphQlUrl: process.env.WAYKE_GRAPH_QL_URL as string,
+      url: process.env.WAYKE_SEARCH_URL as string,
+      urlMlt: process.env.WAYKE_SEARCH_MLT_URL as string,
+      ecomSettings: {
+        url: process.env.WAYKE_ECOM_URL as string,
+        useBankId: true,
+        serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
+      },
+      googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY as string,
+      googleMapsMarker: 'https://www.wayke.se/images/map/marker.png',
+      useQueryParamsFromUrl: true,
+    }}
+  />
+);
+
+export default Home;

package/example/src/routes/Home/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import WaykeComposite from '../../../../src/index';
+
+const initialQueryParams = new URLSearchParams();
+initialQueryParams.set('modelYear.min', '2018');
+
+const Home = () => (
+  <WaykeComposite
+    composite={{
+      // initialQueryParams,
+      removeSearchBar: false,
+      removeFilterOptions: false,
+      modifyDocumentTitleItem: true,
+      modifyDocumentTitleSearch: 'Wayke',
+    }}
+    provider={{
+      graphQlUrl: process.env.WAYKE_GRAPH_QL_URL as string,
+      url: process.env.WAYKE_SEARCH_URL as string,
+      urlMlt: process.env.WAYKE_SEARCH_MLT_URL as string,
+      ecomSettings: {
+        url: process.env.WAYKE_ECOM_URL as string,
+        useBankId: true,
+        serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
+      },
+      googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY as string,
+      googleMapsMarker: 'https://www.wayke.se/images/map/marker.png',
+      useQueryParamsFromUrl: true,
+    }}
+  />
+);
+
+export default Home;

package/example/src/routes/NotFound/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const NotFound = () => <>404 Not Found</>;
+
+export default NotFound;

package/example/src/routes/PathRoute/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import WaykeComposite from '../../../../src/index';
+
+const initialQueryParams = new URLSearchParams();
+initialQueryParams.set('modelYear.min', '2018');
+
+const PathRoute = () => (
+  <WaykeComposite
+    composite={{
+      // initialQueryParams,
+      removeSearchBar: false,
+      pathRoute: '/id/',
+      modifyDocumentTitleItem: true,
+      modifyDocumentTitleSearch: 'Wayke',
+      initialQueryParams: 'modelSeries=A5&modelSeries=A3',
+    }}
+    provider={{
+      graphQlUrl: process.env.WAYKE_GRAPH_QL_URL as string,
+      url: process.env.WAYKE_SEARCH_URL as string,
+      urlMlt: process.env.WAYKE_SEARCH_MLT_URL as string,
+      ecomSettings: {
+        url: process.env.WAYKE_ECOM_URL as string,
+        useBankId: true,
+        serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
+      },
+      googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY as string,
+      googleMapsMarker: 'https://www.wayke.se/images/map/marker.png',
+      useQueryParamsFromUrl: true,
+      pathRoute: '/id/',
+    }}
+  />
+);
+
+export default PathRoute;

package/example/src/routes/Search/index.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+
+import { WaykeProvider, WaykeSearch } from '../../../../src/index';
+
+const Search = () => {
+  const onClickSearchItem = useCallback((id: string) => {
+    // eslint-disable-next-line
+    console.log(id);
+  }, []);
+
+  return (
+    <WaykeProvider
+      graphQlUrl={process.env.WAYKE_GRAPH_QL_URL as string}
+      url={process.env.WAYKE_SEARCH_URL as string}
+      urlMlt={process.env.WAYKE_SEARCH_MLT_URL as string}
+      ecomSettings={{
+        url: process.env.WAYKE_ECOM_URL as string,
+        useBankId: true,
+        serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
+      }}
+      googleMapsApiKey={process.env.GOOGLE_MAPS_API_KEY as string}
+    >
+      <WaykeSearch onClickSearchItem={onClickSearchItem} />
+    </WaykeProvider>
+  );
+};
+
+export default Search;

package/example/src/routes/SearchItem/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { WaykeItemProvider, WaykeSearchItem } from '../../../../src/index';
+
+const SearchItem = () => {
+  const { id } = useParams();
+  if (!id) {
+    return <p>No id</p>;
+  }
+  return (
+    <WaykeItemProvider
+      graphQlUrl={process.env.WAYKE_GRAPH_QL_URL as string}
+      url={process.env.WAYKE_SEARCH_URL as string}
+      urlMlt={process.env.WAYKE_SEARCH_MLT_URL as string}
+      ecomSettings={{
+        url: process.env.WAYKE_ECOM_URL as string,
+        useBankId: true,
+        serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
+      }}
+      googleMapsApiKey={process.env.GOOGLE_MAPS_API_KEY as string}
+    >
+      <WaykeSearchItem id={id} />
+    </WaykeItemProvider>
+  );
+};
+
+export default SearchItem;

package/example/src/routes/index.tsx

@@ -0,0 +1,25 @@
+import React, { Suspense, lazy } from 'react';
+import { Route, Routes as ReactRouterDomRoutes } from 'react-router-dom';
+import Loader from '../../../src/components/Loader';
+
+const Search = lazy(() => import('./Search'));
+const PathRoute = lazy(() => import('./PathRoute'));
+const HashRoute = lazy(() => import('./HashRoute'));
+const Home = lazy(() => import('./Home'));
+const SearchItem = lazy(() => import('./SearchItem'));
+const NotFound = lazy(() => import('./NotFound/index'));
+
+const Routes = () => (
+  <Suspense fallback={<Loader />}>
+    <ReactRouterDomRoutes>
+      <Route path="/" element={<Home />} />
+      <Route path="/a/b/:id?" element={<PathRoute />} />
+      <Route path="/hash" element={<HashRoute />} />
+      <Route path="/search" element={<Search />} />
+      <Route path="/search-item/:id" element={<SearchItem />} />
+      <Route element={<NotFound />} />
+    </ReactRouterDomRoutes>
+  </Suspense>
+);
+
+export default Routes;