@wayke-se/components-react 2.15.0 → 3.0.0-beta.1

package/esbuild/cdn.js

@@ -0,0 +1,26 @@
+const { build } = require('esbuild');
+
+const shared = {
+  entryPoints: ['src/cdn.ts'],
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  logLevel: 'info',
+  loader: {
+    '.js': 'jsx',
+    '.woff': 'file',
+    '.woff2': 'file',
+    '.eot': 'file',
+    '.ttf': 'file',
+    '.gif': 'file',
+    '.svg': 'dataurl',
+    '.png': 'dataurl',
+    '.css': 'file',
+  },
+};
+
+build({
+  ...shared,
+  outfile: 'dist-cdn/index.js',
+  format: 'esm',
+});

package/esbuild/common.js

@@ -0,0 +1,15 @@
+module.exports = {
+  entryPoints: ['src/index.ts', 'src/style.js'],
+  bundle: true,
+  outdir: 'build',
+  loader: {
+    '.js': 'jsx',
+    '.woff': 'file',
+    '.woff2': 'file',
+    '.eot': 'file',
+    '.ttf': 'file',
+    '.gif': 'file',
+    '.svg': 'dataurl',
+    '.png': 'dataurl',
+  },
+};

package/esbuild/lib.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-console */
+const { sassPlugin } = require('esbuild-sass-plugin');
+const { Generator } = require('npm-dts');
+const { build } = require('esbuild');
+const { dependencies, peerDependencies } = require('../package.json');
+
+const shared = {
+  entryPoints: ['src/index.ts'],
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  logLevel: 'info',
+  external: Object.keys(dependencies).concat(Object.keys(peerDependencies || {})),
+  loader: {
+    '.js': 'jsx',
+    '.woff': 'file',
+    '.woff2': 'file',
+    '.eot': 'file',
+    '.ttf': 'file',
+    '.gif': 'file',
+    '.svg': 'dataurl',
+    '.png': 'dataurl',
+  },
+  plugins: [sassPlugin()],
+};
+
+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/start.js

@@ -0,0 +1,20 @@
+const config = require('./common');
+
+require('esbuild').serve(
+  {
+    servedir: 'www',
+    port: 5000,
+  },
+  {
+    ...config,
+    define: {
+      'process.env.WAYKE_SEARCH_URL': '"https://test-ext-api.wayketech.se/vehicles"',
+      'process.env.WAYKE_SEARCH_MLT_URL': '"https://test-ext-api.wayketech.se/vehicles-mlt-ext"',
+      'process.env.WAYKE_GRAPH_QL_URL': '"https://gql.wayketech.se/query"',
+      'process.env.WAYKE_ECOM_URL': '"https://ecom.wayketech.se"',
+      'process.env.WAYKE_ECOM_API_ADDRESS': '"https://ecom.wayketech.se"',
+    },
+    entryPoints: ['src/index-dev.tsx'],
+    outdir: 'www',
+  }
+);

package/package.json

@@ -1,92 +1,73 @@
 {
   "name": "@wayke-se/components-react",
-  "description": "",
-  "version": "2.15.0",
-  "license": "MIT",
-  "files": [
-    "dist-*/",
-    "bin/",
-    "assets/"
-  ],
-  "pika": true,
-  "sideEffects": false,
+  "version": "3.0.0-beta.1",
+  "description": "Wayke Components React",
+  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "npm run clean && node ./esbuild/lib.js",
+    "start": "node ./esbuild/start.js",
+    "clean": "rimraf ./dist",
+    "test": "npm run lint && npm run typecheck",
+    "typecheck": "tsc -noEmit",
+    "typecheck:watch": "tsc -noEmit -watch",
+    "lint": "eslint --ext .ts,.js 'src'",
+    "lint:fix": "eslint --ext .ts,.js 'src' --fix",
+    "prepare": "husky install",
+    "gen": "graphql-codegen --config ./codegen.yml",
+    "libphonenumber-metadata": "libphonenumber-generate-metadata src/utils/metadata.min.json --countries SE --extended"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/wayke/components-react.git"
   },
-  "dependencies": {
-    "@apollo/client": "^3.4.17",
-    "@wayke-se/ecom-react": "^3.5.2",
-    "date-fns": "^2.25.0",
-    "graphql": "^16.0.1",
-    "libphonenumber-js": "^1.9.42",
-    "marked": "^4.0.3",
-    "react-compound-slider": "^3.3.1",
-    "react-lazyload": "^3.2.0",
-    "react-pannellum": "^0.1.15",
-    "react-slick": "^0.28.1",
-    "scroll-into-view-if-needed": "^2.2.28",
-    "slick-carousel": "^1.8.1"
-  },
+  "author": "Ourstudio",
+  "license": "MIT",
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18",
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
     "@graphql-codegen/cli": "^2.3.0",
     "@graphql-codegen/typescript": "^2.4.0",
-    "@pika/pack": "^0.5.0",
-    "@pika/plugin-build-node": "^0.9.2",
-    "@pika/plugin-build-types": "^0.9.2",
-    "@pika/plugin-build-web": "^0.9.2",
-    "@pika/plugin-copy-assets": "^0.9.2",
-    "@pika/plugin-ts-standard-pkg": "^0.9.2",
     "@types/googlemaps": "^3.43.3",
     "@types/marked": "^4.0.0",
-    "@types/react": "^17.0.35",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
     "@types/react-lazyload": "^3.1.1",
-    "@types/react-router-dom": "^5.3.2",
     "@types/react-slick": "^0.23.7",
     "@types/styled-components": "^5.1.15",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-import": "^1.13.3",
-    "babel-plugin-styled-components": "^1.13.3",
-    "core-js": "^3.19.1",
-    "css-loader": "^6.5.1",
-    "dotenv": "^10.0.0",
-    "eslint": "^7.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "esbuild-sass-plugin": "^2.3.2",
+    "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.27.0",
-    "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^6.4.0",
-    "html-webpack-plugin": "^5.5.0",
+    "husky": "^8.0.1",
+    "npm-dts": "^1.3.12",
     "prettier": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.0.2",
-    "regenerator-runtime": "^0.13.9",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^3.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
-    "ts-loader": "^9.2.6",
-    "typescript": "^4.4.4",
-    "webpack": "^5.64.1",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.5.0",
-    "webpack-merge": "^5.8.0",
-    "whatwg-fetch": "^3.6.2"
+    "typescript": "^4.4.4"
   },
-  "source": "dist-src/index.js",
-  "types": "dist-types/index.d.ts",
-  "main": "dist-node/index.js",
-  "module": "dist-web/index.js"
+  "dependencies": {
+    "@apollo/client": "^3.4.17",
+    "@wayke-se/ecom-web": "^1.4.1",
+    "date-fns": "^2.25.0",
+    "esbuild": "^0.15.7",
+    "graphql": "^16.0.1",
+    "libphonenumber-js": "^1.9.42",
+    "marked": "^4.0.3",
+    "pannellum-react": "^1.2.4",
+    "react-compound-slider": "^3.3.1",
+    "react-lazyload": "^3.2.0",
+    "react-slick": "^0.29.0",
+    "scroll-into-view-if-needed": "^2.2.28"
+  }
 }

package/{dist-types/@types/action.d.ts → src/@types/action.ts}

@@ -1,3 +1,3 @@
 export interface BaseAction<T> {
-    type: T;
+  type: T;
 }

package/src/@types/codegen.ts

@@ -0,0 +1,366 @@
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  DateTime: Date;
+  Email: string;
+  FileDocument: { contentType: string; name: string; url: string };
+  PersonalNumber: string;
+  PhoneNumber: string;
+  Time: string;
+  URL: string;
+  VehicleDataPropertyMap: { [key: string]: string | number | boolean };
+  VehicleDataPropertySet: any;
+};
+
+export type Branch = {
+  __typename?: 'Branch';
+  connections: Array<BranchConnection>;
+  contact?: Maybe<ContactOptions>;
+  description?: Maybe<Scalars['String']>;
+  flags?: Maybe<BranchFlags>;
+  homepage?: Maybe<Scalars['URL']>;
+  id: Scalars['ID'];
+  location?: Maybe<Location>;
+  logotype?: Maybe<Scalars['URL']>;
+  name?: Maybe<Scalars['String']>;
+  openingHours?: Maybe<OpeningHours>;
+  organization?: Maybe<Organization>;
+  promos: Array<Promo>;
+  services: Array<Service>;
+};
+
+export type BranchConnection = {
+  __typename?: 'BranchConnection';
+  id: Scalars['ID'];
+  location?: Maybe<Location>;
+  name?: Maybe<Scalars['String']>;
+};
+
+export type BranchFlags = {
+  __typename?: 'BranchFlags';
+  centralStorage?: Maybe<Scalars['Boolean']>;
+  ecommerce?: Maybe<Scalars['Boolean']>;
+  mrf?: Maybe<Scalars['Boolean']>;
+};
+
+export type ContactOptions = {
+  __typename?: 'ContactOptions';
+  avatar?: Maybe<Scalars['URL']>;
+  email?: Maybe<Scalars['Email']>;
+  name?: Maybe<Scalars['String']>;
+  phonenumber?: Maybe<Scalars['PhoneNumber']>;
+};
+
+export enum DrivingDistance {
+  Between0And1000 = 'BETWEEN0AND1000',
+  Between1000And1500 = 'BETWEEN1000AND1500',
+  Between1500And2000 = 'BETWEEN1500AND2000',
+  Between2000And2500 = 'BETWEEN2000AND2500',
+  Over2500 = 'OVER2500',
+}
+
+export type Ecommerce = {
+  __typename?: 'Ecommerce';
+  enabled?: Maybe<Scalars['Boolean']>;
+  reserved?: Maybe<Scalars['Boolean']>;
+  withHomeDelivery?: Maybe<Scalars['Boolean']>;
+  withTradeIn?: Maybe<Scalars['Boolean']>;
+};
+
+export type FinancialOption = {
+  __typename?: 'FinancialOption';
+  administrationFee?: Maybe<Scalars['Float']>;
+  description?: Maybe<Scalars['String']>;
+  downPayment?: Maybe<FinancialOptionDetail>;
+  duration?: Maybe<FinancialOptionDetail>;
+  effectiveInterest?: Maybe<Scalars['Float']>;
+  identifier?: Maybe<Scalars['String']>;
+  image?: Maybe<Scalars['URL']>;
+  includes: Array<FinancialOptionInclusion>;
+  interest?: Maybe<Scalars['Float']>;
+  link?: Maybe<Link>;
+  loanAmount?: Maybe<Scalars['Float']>;
+  logotype?: Maybe<Scalars['URL']>;
+  mileage?: Maybe<FinancialOptionDetail>;
+  monthlyCost?: Maybe<Scalars['Float']>;
+  name?: Maybe<Scalars['String']>;
+  residual?: Maybe<FinancialOptionDetail>;
+  setupFee?: Maybe<Scalars['Float']>;
+  terms?: Maybe<Scalars['URL']>;
+  totalCreditCost?: Maybe<Scalars['Float']>;
+  totalResidualValue?: Maybe<Scalars['Float']>;
+  type: Scalars['String'];
+  url?: Maybe<Scalars['URL']>;
+};
+
+export type FinancialOptionDetail = {
+  __typename?: 'FinancialOptionDetail';
+  current: Scalars['Float'];
+  default: Scalars['Float'];
+  max: Scalars['Float'];
+  min: Scalars['Float'];
+  step: Scalars['Float'];
+};
+
+export enum FinancialOptionInclusion {
+  IncludesInsurance = 'INCLUDES_INSURANCE',
+  IncludesService = 'INCLUDES_SERVICE',
+  IncludesWintertires = 'INCLUDES_WINTERTIRES',
+}
+
+export type HoursOpen = {
+  __typename?: 'HoursOpen';
+  from?: Maybe<Scalars['Time']>;
+  until?: Maybe<Scalars['Time']>;
+};
+
+export type Insurance = {
+  __typename?: 'Insurance';
+  addons: Array<InsuranceAddon>;
+  description: Scalars['String'];
+  items: Array<InsuranceItem>;
+  legality?: Maybe<InsuranceLegality>;
+  logotype?: Maybe<Scalars['URL']>;
+  name: Scalars['String'];
+  price: Scalars['Float'];
+  terms?: Maybe<Scalars['URL']>;
+  unit: Scalars['String'];
+  url?: Maybe<Scalars['URL']>;
+};
+
+export type InsuranceAddon = {
+  __typename?: 'InsuranceAddon';
+  description?: Maybe<Scalars['String']>;
+  exclusions: Array<Scalars['String']>;
+  id: Scalars['ID'];
+  price: Scalars['Float'];
+  title?: Maybe<Scalars['String']>;
+  unit: Scalars['String'];
+};
+
+export type InsuranceItem = {
+  __typename?: 'InsuranceItem';
+  description?: Maybe<Scalars['String']>;
+  name?: Maybe<Scalars['String']>;
+};
+
+export type InsuranceLegality = {
+  __typename?: 'InsuranceLegality';
+  description?: Maybe<Scalars['String']>;
+  url?: Maybe<Scalars['URL']>;
+};
+
+export type InsuranceOption = {
+  __typename?: 'InsuranceOption';
+  description?: Maybe<Scalars['String']>;
+  identifier?: Maybe<Scalars['String']>;
+  institute?: Maybe<Scalars['String']>;
+  insuranceHeader?: Maybe<Scalars['String']>;
+  insuranceText?: Maybe<Scalars['String']>;
+  logotype?: Maybe<Scalars['URL']>;
+  longDescription?: Maybe<Scalars['String']>;
+  name?: Maybe<Scalars['String']>;
+  requiresDistance?: Maybe<Scalars['Boolean']>;
+  requiresPersonalNumber?: Maybe<Scalars['Boolean']>;
+  /** @deprecated No longer supported */
+  terms?: Maybe<Scalars['URL']>;
+  url?: Maybe<Scalars['URL']>;
+};
+
+export type Link = {
+  __typename?: 'Link';
+  title?: Maybe<Scalars['String']>;
+  url?: Maybe<Scalars['URL']>;
+};
+
+export type Location = {
+  __typename?: 'Location';
+  city?: Maybe<Scalars['String']>;
+  county?: Maybe<Scalars['String']>;
+  position?: Maybe<Position>;
+  postalCode?: Maybe<Scalars['String']>;
+  streetAddress?: Maybe<Scalars['String']>;
+};
+
+export type Manufacturer = {
+  __typename?: 'Manufacturer';
+  description?: Maybe<Scalars['String']>;
+  logotype?: Maybe<Scalars['URL']>;
+  name: Scalars['String'];
+  packageOption?: Maybe<PackageOption>;
+};
+
+export type Media = {
+  __typename?: 'Media';
+  files: Array<MediaFile>;
+  type: Scalars['String'];
+};
+
+export type MediaFile = {
+  __typename?: 'MediaFile';
+  formats: Array<Maybe<MediaFileFormat>>;
+  url: Scalars['URL'];
+};
+
+export type MediaFileFormat = {
+  __typename?: 'MediaFileFormat';
+  format: Scalars['String'];
+  url: Scalars['URL'];
+};
+
+export type OpeningHours = {
+  __typename?: 'OpeningHours';
+  friday?: Maybe<HoursOpen>;
+  monday?: Maybe<HoursOpen>;
+  saturday?: Maybe<HoursOpen>;
+  sunday?: Maybe<HoursOpen>;
+  thursday?: Maybe<HoursOpen>;
+  tuesday?: Maybe<HoursOpen>;
+  wednesday?: Maybe<HoursOpen>;
+};
+
+export type Organization = {
+  __typename?: 'Organization';
+  branches: Array<Maybe<Branch>>;
+  contact?: Maybe<ContactOptions>;
+  description?: Maybe<Scalars['String']>;
+  flags?: Maybe<BranchFlags>;
+  homepage?: Maybe<Scalars['URL']>;
+  id: Scalars['ID'];
+  logotype?: Maybe<Scalars['URL']>;
+  name?: Maybe<Scalars['String']>;
+  parent?: Maybe<Branch>;
+};
+
+export type PackageOption = {
+  __typename?: 'PackageOption';
+  description?: Maybe<Scalars['String']>;
+  image?: Maybe<Scalars['URL']>;
+  link?: Maybe<Link>;
+  title?: Maybe<Scalars['String']>;
+};
+
+export type Position = {
+  __typename?: 'Position';
+  latitude?: Maybe<Scalars['Float']>;
+  longitude?: Maybe<Scalars['Float']>;
+};
+
+export type Promo = {
+  __typename?: 'Promo';
+  description?: Maybe<Scalars['String']>;
+  image?: Maybe<Scalars['URL']>;
+  link?: Maybe<Link>;
+  title?: Maybe<Scalars['String']>;
+};
+
+export type Query = {
+  __typename?: 'Query';
+  branch?: Maybe<Branch>;
+  insurances: Array<Insurance>;
+  loan?: Maybe<FinancialOption>;
+  vehicle?: Maybe<Vehicle>;
+};
+
+export type QueryBranchArgs = {
+  id: Scalars['ID'];
+};
+
+export type QueryInsurancesArgs = {
+  branch?: InputMaybe<Scalars['ID']>;
+  drivingDistance: DrivingDistance;
+  id: Scalars['ID'];
+  personalNumber: Scalars['PersonalNumber'];
+};
+
+export type QueryLoanArgs = {
+  branch?: InputMaybe<Scalars['ID']>;
+  downPayment: Scalars['Int'];
+  duration: Scalars['Int'];
+  id: Scalars['ID'];
+  residual: Scalars['Float'];
+};
+
+export type QueryVehicleArgs = {
+  branch?: InputMaybe<Scalars['ID']>;
+  id: Scalars['ID'];
+};
+
+export type SafetyOption = {
+  __typename?: 'SafetyOption';
+  content?: Maybe<Scalars['String']>;
+  image?: Maybe<Scalars['URL']>;
+  name?: Maybe<Scalars['String']>;
+  title?: Maybe<Scalars['String']>;
+};
+
+export type Service = {
+  __typename?: 'Service';
+  markdown?: Maybe<Scalars['String']>;
+  title?: Maybe<Scalars['String']>;
+};
+
+export type Vehicle = {
+  __typename?: 'Vehicle';
+  branch?: Maybe<Branch>;
+  contact?: Maybe<ContactOptions>;
+  data: VehicleData;
+  description?: Maybe<Scalars['String']>;
+  discount?: Maybe<Scalars['Float']>;
+  documents: Array<Scalars['FileDocument']>;
+  ecommerce?: Maybe<Ecommerce>;
+  financialOptions: Array<FinancialOption>;
+  flags?: Maybe<VehicleFlags>;
+  id: Scalars['ID'];
+  insuranceOptions: Array<InsuranceOption>;
+  location?: Maybe<Location>;
+  manufacturer?: Maybe<Manufacturer>;
+  media: Array<Media>;
+  packageOptions: Array<PackageOption>;
+  price: Scalars['Float'];
+  publishedAt?: Maybe<Scalars['DateTime']>;
+  safety: Array<SafetyOption>;
+  shortDescription?: Maybe<Scalars['String']>;
+  title: Scalars['String'];
+};
+
+export type VehicleData = {
+  __typename?: 'VehicleData';
+  enginePower?: Maybe<Scalars['Float']>;
+  equipmentLevel?: Maybe<Scalars['String']>;
+  fuelType?: Maybe<Scalars['String']>;
+  gearbox?: Maybe<Scalars['String']>;
+  gearboxType?: Maybe<Scalars['String']>;
+  manufactureYear: Scalars['Int'];
+  manufacturer: Scalars['String'];
+  mileage: Scalars['Int'];
+  modelName?: Maybe<Scalars['String']>;
+  modelSeries?: Maybe<Scalars['String']>;
+  modelYear: Scalars['Int'];
+  options: Array<Scalars['String']>;
+  properties?: Maybe<Scalars['VehicleDataPropertyMap']>;
+  propertySet?: Maybe<Scalars['VehicleDataPropertySet']>;
+  registrationNumber?: Maybe<Scalars['String']>;
+  salesName?: Maybe<Scalars['String']>;
+  vin?: Maybe<Scalars['String']>;
+};
+
+export type VehicleDataPropertySetArgs = {
+  category?: InputMaybe<Scalars['String']>;
+  properties?: InputMaybe<Array<Scalars['String']>>;
+};
+
+export type VehicleFlags = {
+  __typename?: 'VehicleFlags';
+  auction?: Maybe<Scalars['Boolean']>;
+  testDrive?: Maybe<Scalars['Boolean']>;
+};

package/src/@types/filter.ts

@@ -0,0 +1,18 @@
+export type SearchFilterNameTypes =
+  | 'manufacturer'
+  | 'modelSeries'
+  | 'fuelType'
+  | 'gearboxType'
+  | 'branch'
+  | 'color'
+  | 'environmentClass'
+  | 'properties.segment'
+  | 'drivingWheel'
+  | 'price'
+  | 'mileage'
+  | 'modelYear';
+
+export type SearchFilterTypes = {
+  filterName: SearchFilterNameTypes;
+  displayName?: string;
+};

package/src/@types/queryFilter.ts

@@ -0,0 +1,5 @@
+export interface QueryFilter {
+  searchParams: URLSearchParams;
+  concatResult?: boolean;
+  block?: boolean;
+}

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

@@ -0,0 +1 @@
+declare module 'pannellum-react/es/elements/Pannellum';