@ef2/react-gm-location-finder - npm Package Compare versions

Comparing version 0.0.2 to 0.0.4

dist/index.d.ts

@@ -0,1 +1,4 @@
+/// <reference types="google.maps" />
+
+import { ChangeEvent } from 'react';
 import type { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -8,2 +11,8 @@ import { PropsWithChildren } from 'react';
     map?: string;
+    skeleton?: {
+        panelHeading?: string;
+        panelBody?: string;
+        listItem?: string;
+        map?: string;
+    };
     panel?: {
@@ -21,2 +30,5 @@ section?: string;
         button?: string;
+        iconWrapper?: string;
+        iconVerified?: string;
+        icon?: string;
     };
@@ -40,5 +52,18 @@ list?: {
         content?: string;
+        openingHours?: {
+            label?: string;
+        };
     };
 };
 
+declare enum Enum_OpeninghoursDay {
+    Sunday = "Sunday",
+    Monday = "Monday",
+    Tuesday = "Tuesday",
+    Wednesday = "Wednesday",
+    Thursday = "Thursday",
+    Friday = "Friday",
+    Saturday = "Saturday"
+}
+
 export declare interface Labels {
@@ -49,2 +74,6 @@ findDealerNearby?: string;
     backButtonLabel?: string;
+    openingHoursLabel?: string;
+    timeLabel?: string;
+    dayLabel?: string;
+    hoursLabel?: string;
 }
@@ -90,3 +119,3 @@
     attributes?: {
-        [key: string]: string[];
+        [key: string]: string;
     };
@@ -142,13 +171,13 @@ }
     renderListItem?: ({ location }: {
-        location: LocationProps | [];
+        location: LocationProps;
     }) => ReactNode;
     renderListDetail?: ({ location }: {
-        location: LocationProps | [];
+        location: LocationProps;
     }) => ReactNode;
     renderDetailBackButton?: () => ReactNode;
     renderDetailImage?: ({ location }: {
-        location: LocationProps | [];
+        location: LocationProps;
     }) => ReactNode;
     renderDetailContent?: ({ location }: {
-        location: LocationProps | [];
+        location: LocationProps;
     }) => ReactNode;
@@ -159,6 +188,53 @@ renderDetailOpeningHours?: ({ openingHours }: {
     renderDetailDirections?: ({ location }: {
-        location: LocationProps | [];
+        location: LocationProps;
     }) => ReactNode;
 }
 
+export declare const useDistances: () => {
+    calculateDistance: (from: google.maps.LatLng | google.maps.LatLngLiteral, to: google.maps.LatLng | google.maps.LatLngLiteral) => number;
+};
+
+export declare const useGoogleMapApi: () => {
+    loadMap: (map: google.maps.Map) => void;
+    handleOnMapIdle: () => void;
+};
+
+export declare const useLocations: () => {
+    formatListLocations: () => void;
+    setLocationFinderFormat: (locations: any, baseUrl: string) => LocationProps[];
+};
+
+export declare const useOnAutocomplete: () => {
+    loadAutocomplete: (autocomplete: google.maps.places.Autocomplete) => void;
+    autocomplete: google.maps.places.Autocomplete | undefined;
+    onInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onPlaceChange: () => void;
+    setCurrentGeoPosition: () => Promise<void>;
+};
+
+export declare const useOnLocationEvent: () => {
+    onMarkerClick: (location: LocationProps) => void;
+    handleSelectedLocation: (location: LocationProps) => void;
+    unsetSelectedLocation: () => void;
+    refine: () => void;
+    reset: () => void;
+};
+
+export declare const useOpeningHours: () => {
+    getOpeningHoursSlot: (openingHours: OpeningHoursType) => {
+        currentOpeningHour: OpeningHoursDaysDayType | undefined;
+        currentOpeningHourSlot: OpeningHoursDaysDaySlotType | undefined;
+        currentOpeningHourSlotLabel: string | undefined;
+        openIndicator: boolean;
+    };
+    zeroPad: (num: number) => string;
+    formatTime: (timeString: string) => {
+        hours: number;
+        minutes: number;
+    };
+    dayMap: Map<Enum_OpeninghoursDay, number>;
+    getFullDayName: (day: number, locale?: string, region?: string) => string;
+    getMaxSlots: (openingHours: OpeningHoursDaysType) => any;
+};
+
 export { }

package.json

 {
     "name": "@ef2/react-gm-location-finder",
     "private": false,
-    "version": "0.0.2",
+    "version": "0.0.4",
     "type": "module",
@@ -9,2 +9,3 @@ "scripts": {
         "build": "tsc && vite build",
+        "watch": "vite build --watch",
         "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -14,2 +15,3 @@ "preview": "vite preview"
     "peerDependencies": {
+        "@react-google-maps/api": "^2.19.2",
         "react": "^18.2.0",
@@ -19,3 +21,2 @@ "react-dom": "^18.2.0"
     "devDependencies": {
-        "@react-google-maps/api": "^2.19.2",
         "@types/node": "^18.7.6",
@@ -33,4 +34,3 @@ "@types/react": "^18.2.15",
         "prettier": "^2.7.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "rollup-plugin-pure": "^0.1.1",
         "typescript": "^5.0.2",
@@ -37,0 +37,0 @@ "vite": "^4.4.5",

src/hooks/useLocations.ts

 import { useContext } from 'react';
-import { LocationFinderContext, LocationProps, OpeningHoursDaysDayType } from '../contexts/locationFinderContext';
+import { LocationFinderContext, LocationProps } from '../contexts/locationFinderContext';
 import { useDistances } from './useDistances';
@@ -34,6 +34,27 @@ import { notNull } from '../utils/helpers';
     // format locations for correct format
-    const setLocationFinderFormat = (locations: any, baseUrl: string): LocationProps => {
+    const setLocationFinderFormat = (locations: any, baseUrl: string): LocationProps[] => {
         return locations.map((location: any) => {
             const days = location.days?.filter(notNull);
+            let weekDays = [];
 
+            const openingHours =
+                days && Boolean(days.length)
+                    ? {
+                          //@ts-ignore
+                          days: days.map((day) => {
+                              const weekDay = dayMap.get(day.day);
+                              if (typeof weekDay !== 'undefined') {
+                                  return (weekDays[weekDay] = {
+                                      closed: day.closed,
+                                      slots:
+                                          day.slots?.filter(notNull).map((slot: any) => ({
+                                              from: formatTime(slot.from),
+                                              to: formatTime(slot.to)
+                                          })) ?? []
+                                  });
+                              }
+                          })
+                      }
+                    : {};
+
             return {
@@ -51,23 +72,4 @@ city: location.city,
                 image: location.image?.data?.attributes ? [`${baseUrl}${location.image.data.attributes.url}?resize=800x400`] : undefined,
-                openingHours:
-                    days && Boolean(days.length)
-                        ? {
-                              days: days.reduce(({ a, c }: { a: any; c: any }) => {
-                                  const day = dayMap.get(c.day);
-
-                                  if (day) {
-                                      a[day] = {
-                                          closed: c.closed,
-                                          slots:
-                                              c.slots?.filter(notNull).map((slot: any) => ({
-                                                  from: formatTime(slot.from),
-                                                  to: formatTime(slot.to)
-                                              })) ?? []
-                                      };
-                                  }
-
-                                  return a;
-                              }, {} as { [key: number]: OpeningHoursDaysDayType })
-                          }
-                        : undefined
+                openingHours: openingHours,
+                attributes: location.attributes ?? {}
             };
@@ -74,0 +76,0 @@ });

src/hooks/useOnLocationEvent.ts

@@ -26,6 +26,4 @@ import { useCallback, useContext } from 'react';
     const onMarkerClick = useCallback(
-        (location: LocationProps, marker: any) => {
+        (location: LocationProps) => {
             handleSelectedLocation(location);
-
-            return setTimeout(() => panToMarker(marker.latLng), 200);
         },
@@ -41,6 +39,7 @@ [map]
 
-            setTimeout(() => {
-                map.setZoom(12);
-                map.panTo(marker);
-            }, 300);
+    
+            // setTimeout(() => {
+            map.setZoom(12);
+            map.panTo(marker);
+            // }, 200);
         },
@@ -56,5 +55,3 @@ [map]
 
-            if (!urlSearchParams.get('location')) {
-                urlSearchParams.set('location', `${kebabCase(location.title)}-${location.id}`);
-            }
+            urlSearchParams.set('location', `${kebabCase(location.title)}-${location.id}`);
 
@@ -61,0 +58,0 @@ if (typeof window !== 'undefined') {

src/hooks/useOpeningHours.ts

 import { startOfWeek, addDays } from 'date-fns';
-import { OpeningHoursType } from '../contexts/locationFinderContext';
+import { OpeningHoursDaysType, OpeningHoursType } from '../contexts/locationFinderContext';
 
 export enum Enum_OpeninghoursDay {
-  Sunday = 'Sunday',
-  Monday = 'Monday',
-  Tuesday = 'Tuesday',
-  Wednesday = 'Wednesday',
-  Thursday = 'Thursday',
-  Friday = 'Friday',
-  Saturday = 'Saturday',
+    Sunday = 'Sunday',
+    Monday = 'Monday',
+    Tuesday = 'Tuesday',
+    Wednesday = 'Wednesday',
+    Thursday = 'Thursday',
+    Friday = 'Friday',
+    Saturday = 'Saturday'
 }
 
 const dayMap = new Map<Enum_OpeninghoursDay, number>([
-  [Enum_OpeninghoursDay.Sunday, 0],
-  [Enum_OpeninghoursDay.Monday, 1],
-  [Enum_OpeninghoursDay.Tuesday, 2],
-  [Enum_OpeninghoursDay.Wednesday, 3],
-  [Enum_OpeninghoursDay.Thursday, 4],
-  [Enum_OpeninghoursDay.Friday, 5],
-  [Enum_OpeninghoursDay.Saturday, 6],
+    [Enum_OpeninghoursDay.Sunday, 0],
+    [Enum_OpeninghoursDay.Monday, 1],
+    [Enum_OpeninghoursDay.Tuesday, 2],
+    [Enum_OpeninghoursDay.Wednesday, 3],
+    [Enum_OpeninghoursDay.Thursday, 4],
+    [Enum_OpeninghoursDay.Friday, 5],
+    [Enum_OpeninghoursDay.Saturday, 6]
 ]);
 
-export const getFullDayName = (
-  day: number,
-  locale: string = 'nl',
-  region = 'NL'
-): string => {
-  const start = startOfWeek(new Date());
-  const date = addDays(start, day);
-  return date.toLocaleString(`${locale}-${region}`, { weekday: 'long' });
+export const getFullDayName = (day: number, locale: string = 'nl', region = 'NL'): string => {
+    const start = startOfWeek(new Date());
+    const date = addDays(start, day);
+    return date.toLocaleString(`${locale}-${region}`, { weekday: 'long' });
 };
 
+export const getMaxSlots = (openingHours: OpeningHoursDaysType) => {
+    return Object.values(openingHours).reduce((a, c) => (c.slots.length > a ? c.slots.length : a), 0);
+};
+
 export const useOpeningHours = () => {
-  const date = new Date();
-  const day = date.getDay();
-  const hours = date.getHours();
-  const zeroPad = (num: number) => String(num).padStart(2, '0');
+    const date = new Date();
+    const day = date.getDay();
+    const hours = date.getHours();
+    const zeroPad = (num: number) => String(num).padStart(2, '0');
 
-  const getOpeningHoursSlot = (openingHours: OpeningHoursType) => {
-    const currentOpeningHour = openingHours
-      ? openingHours.days && openingHours.days[day]
-      : undefined;
+    const getOpeningHoursSlot = (openingHours: OpeningHoursType) => {
+        const currentOpeningHour = openingHours ? openingHours.days && openingHours.days[day] : undefined;
 
-    const currentOpeningHourSlot =
-      currentOpeningHour?.slots && Boolean(currentOpeningHour.slots.length)
-        ? currentOpeningHour.slots.at(-1)
-        : undefined;
+        const currentOpeningHourSlot =
+            currentOpeningHour?.slots && Boolean(currentOpeningHour.slots.length) ? currentOpeningHour.slots.at(-1) : undefined;
 
-    const currentOpeningHourSlotLabel = currentOpeningHourSlot
-      ? `${zeroPad(currentOpeningHourSlot.to.hours)}:${zeroPad(
-          currentOpeningHourSlot.to.minutes
-        )}`
-      : undefined;
-    const openIndicator: boolean = currentOpeningHourSlot
-      ? currentOpeningHourSlot.to.hours >= hours
-      : false;
+        const currentOpeningHourSlotLabel = currentOpeningHourSlot
+            ? `${zeroPad(currentOpeningHourSlot.to.hours)}:${zeroPad(currentOpeningHourSlot.to.minutes)}`
+            : undefined;
+        const openIndicator: boolean = currentOpeningHourSlot ? currentOpeningHourSlot.to.hours >= hours : false;
 
-    return {
-      currentOpeningHour,
-      currentOpeningHourSlot,
-      currentOpeningHourSlotLabel,
-      openIndicator,
+        return {
+            currentOpeningHour,
+            currentOpeningHourSlot,
+            currentOpeningHourSlotLabel,
+            openIndicator
+        };
     };
-  };
 
-  const formatTime = (
-    timeString: string
-  ): { hours: number; minutes: number } => {
-    const time: Date = new Date(`1/01/1970 ${timeString}`);
-    const hours: number = time.getHours();
-    const minutes: number = time.getMinutes();
-    return { hours, minutes };
-  };
+    const formatTime = (timeString: string): { hours: number; minutes: number } => {
+        const time: Date = new Date(`1/01/1970 ${timeString}`);
+        const hours: number = time.getHours();
+        const minutes: number = time.getMinutes();
+        return { hours, minutes };
+    };
 
-  return { getOpeningHoursSlot, zeroPad, formatTime, dayMap, getFullDayName };
+    return { getOpeningHoursSlot, zeroPad, formatTime, dayMap, getFullDayName, getMaxSlots };
 };

src/index.ts

@@ -11,3 +11,3 @@ export type {
 export type { MapConfig, MarkerIcon, Labels, ClassNameList, Renders } from './contexts/settingContext';
-
+export { useDistances, useOnAutocomplete, useGoogleMapApi, useLocations, useOnLocationEvent, useOpeningHours } from './hooks';
 export { LocationFinder } from './components';

vite.config.ts

@@ -7,2 +7,3 @@ import { resolve } from 'node:path';
 import * as packageJson from './package.json';
+import { PluginPure } from 'rollup-plugin-pure';
 
@@ -16,2 +17,6 @@ // https://vitejs.dev/config/
             rollupTypes: true
+        }),
+        PluginPure({
+            functions: ['defineComponent'],
+            include: [/(?<!im)pure\.js$/]
         })
@@ -18,0 +23,0 @@ ],

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

17

decreased by-10.53%

Number of package files

42

increased by2.44%

Number of low supply chain risk alerts

6

decreased by-25%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

248700

decreased by-57.72%

Dependency count

6

increased by20%

Lines of code

5896

decreased by-45.71%

No dependency changes