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

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@wayke-se/components-react",
+  "version": "3.0.0-beta.11",
   "description": "",
-  "version": "3.0.0-beta.10",
-  "license": "MIT",
-  "files": [
-    "dist-*/",
-    "bin/",
-    "assets/"
-  ],
-  "pika": true,
-  "sideEffects": false,
+  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start:esbuild": "node ./esbuild/start.js",
+    "build:esbuild": "rimraf ./dist && node ./esbuild/build.js",
+    "analyze": "webpack --config webpack.analyze.js --mode production",
+    "build": "pika build",
+    "prebuild": "npm run clean",
+    "lint": "eslint --ext .tsx,.ts 'src' 'example'",
+    "lint:fix": "eslint --ext .tsx,.ts 'src' 'example' --fix",
+    "start": "webpack serve --mode development --progress",
+    "clean": "rimraf ./pkg",
+    "type-check": "tsc --noEmit --skipLibCheck",
+    "prettify": "prettier --write 'src/**/*.{ts,tsx}'",
+    "prepare": "npm run prettify && npm run type-check && npm run lint",
+    "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-web": "^1.4.1",
-    "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.29.0",
-    "scroll-into-view-if-needed": "^2.2.28"
-  },
+  "author": "Ourstudio",
+  "license": "MIT",
   "peerDependencies": {
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18",
@@ -54,6 +54,7 @@
     "babel-loader": "^8.2.3",
     "css-loader": "^6.5.1",
     "dotenv": "^16.0.2",
+    "esbuild": "^0.15.7",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.3",
@@ -62,6 +63,7 @@
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
     "html-webpack-plugin": "^5.5.0",
+    "npm-dts": "^1.3.12",
     "prettier": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -77,8 +79,46 @@
     "webpack-dev-server": "^4.5.0",
     "webpack-merge": "^5.8.0"
   },
-  "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",
+    "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.29.0",
+    "scroll-into-view-if-needed": "^2.2.28"
+  },
+  "@pika/pack": {
+    "pipeline": [
+      [
+        "@pika/plugin-ts-standard-pkg",
+        {
+          "tsconfig": "tsconfig.build.json",
+          "args": [
+            "--target",
+            "es2020"
+          ]
+        }
+      ],
+      [
+        "@pika/plugin-build-node"
+      ],
+      [
+        "@pika/plugin-build-web"
+      ],
+      [
+        "@pika/plugin-copy-assets"
+      ],
+      [
+        "@pika/plugin-build-types",
+        {
+          "tsconfig": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
 }

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/types.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 'react-pannellum';

package/src/@types/search.ts

@@ -0,0 +1,118 @@
+export interface Stats {
+  totalHits: number;
+  searchEngineTimeInMillis: number;
+  searchEngineRoundTripTimeInMillis: number;
+  searchProcessingTimeInMillis: number;
+}
+
+export interface Branch {
+  id: string;
+  name: string;
+}
+
+export interface Format {
+  format: string;
+  id: string;
+  url: string;
+}
+
+export interface File {
+  formats: Format[];
+  id: string;
+  sortOrder: number;
+  url: string;
+}
+
+export interface FeaturedImage {
+  files: File[];
+  id: string;
+  sortOrder: number;
+  type: 'Image';
+}
+
+export interface PaginationPage {
+  displayName: string;
+  selected: boolean;
+  query: string;
+}
+
+export interface Pagination {
+  offset: number;
+  hitsPerPage: number;
+  firstPage: string | null;
+  previousPage: string | null;
+  nextPage: PaginationPage | null;
+  pages: PaginationPage[];
+}
+
+export interface SortOption {
+  displayName: string;
+  selected: boolean;
+  query: string;
+}
+
+export interface DocumentList {
+  id: string;
+  displayName: string;
+  numberOfHits: number;
+  documents: Document[];
+  pagination: Pagination;
+  sortOptions: SortOption[];
+}
+
+export interface Document {
+  _id: string;
+  _type: string;
+  branches: Branch[];
+  deductibleVat: boolean;
+  featuredImage: FeaturedImage;
+  gearboxType: string;
+  hasManufacturerPackaging: boolean;
+  itemPublished: string;
+  itemUpdated: string;
+  manufacturer: string;
+  mileage: number;
+  modelSeries: string;
+  modelYear: number;
+  fuelType: string;
+  price: number;
+  oldPrice?: number;
+  registrationNumber: string;
+  salesName: string;
+  shortDescription: string;
+  title: string;
+  leasingPrice?: number;
+}
+
+export interface FacetFilter {
+  displayName: string;
+  selected: boolean;
+  query: string;
+  count: number;
+  children: any[];
+}
+
+export interface Facet {
+  id: string;
+  displayName: string;
+  selectionType: 'OR';
+  multipleLevels: boolean;
+  filters: FacetFilter[];
+}
+
+export interface Query {
+  displayName: string;
+  id: string;
+  parameters: string | null;
+  queryString: string | null;
+}
+
+export interface Search {
+  stats: Stats;
+  query: Query | null;
+  documentList: DocumentList;
+  facets: Facet[];
+  spell: null;
+  quickLinks: null;
+  errorMessages: string[];
+}

package/src/@types/theme.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '../layout/theme';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}

package/src/@types/vehicle-properties.ts

@@ -0,0 +1,33 @@
+export interface Property {
+  value: string | number | boolean | string[];
+  name: string;
+  type: string;
+  unit: string | null | undefined;
+  hint: string | null | undefined;
+}
+
+export interface Category {
+  id: number;
+  name: string;
+  properties: Property[];
+  subCategories: Category[];
+}
+
+export interface Tree {
+  categories: Category[];
+}
+
+export interface EnhancedProperty {
+  value: number | string | boolean | string[];
+  name: string;
+  type: string;
+  unit: string | undefined | null;
+  category: ItemCategory | undefined | null;
+  hint: string | undefined | null;
+}
+
+export interface ItemCategory {
+  name: string;
+  id: number;
+  subCategory: ItemCategory | undefined | null;
+}

package/src/State/CentralStorage/CentralStorageContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+export interface CentralStorageContextProps {
+  centralStorageId?: string | null;
+  setCentralStorageId: (id?: string) => void;
+}
+
+export const CentralStorageContext = createContext<CentralStorageContextProps>({
+  setCentralStorageId: (_) => {},
+});