@carto/ps-react-maps 1.2.0 → 1.3.1-alpha.0

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './map-provider';
+export * from './utils';

package/dist/types/map-provider/index.d.ts

@@ -2,5 +2,5 @@ export * from './map-provider.const';
 export * from './map-provider.types';
 export { INITIAL_STATE, MapContext, MapActionsContext, } from './map-provider.context';
 export { reducer } from './map-provider.reducer';
-export { useMap, useMapActions, useMapByID, useMapActionsByID, useMapReferencesByID, } from './map-provider.hook';
+export { useMap, useMapActions, useMapRefences, useMapByID, useMapActionsByID, useMapReferencesByID, } from './map-provider.hook';
 export { MapProvider } from './map-provider.provider';

package/dist/types/map-provider/map-provider.const.d.ts

@@ -4,7 +4,7 @@
 export declare enum GMapsBasemap {
     Roadmap = "roadmap",
     Satellite = "satellite",
-    Terrain = "terrain"
+    Hybrid = "hybrid"
 }
 /**
  * Enum for CARTO basemap names.

package/dist/types/map-provider/map-provider.hook.d.ts

@@ -1,31 +1,76 @@
-import type { Deck } from '@deck.gl/core/typed';
+import type { DeckGLMapsProps, MapProviderMapProps, MapReferences, MapResize, OverlayMapRef, ViewportRect } from './map-provider.types';
+import type { Deck, WebMercatorViewport } from '@deck.gl/core/typed';
 /**
- * Returns the current map state from the MapContext.
- * @returns {MapContextInterface['state']} The current map state.
+ * Custom hook that retrieves the map configuration for a given ID.
+ * @param id - The ID of the map.
+ * @returns The map configuration for the specified ID.
  */
-export declare function useMap(): import("./map-provider.types").MapState;
-export declare function useRefences(): import("react").MutableRefObject<import("./map-provider.types").MapReferencesState>;
+export declare function useMap(id: string): MapProviderMapProps;
 /**
- * Returns the map actions from the MapActionsContext.
- * @returns {MapContextInterface['actions']} The map actions.
+ * Custom hook that provides access to the map references and related functions.
+ *
+ * @param id - The ID of the map reference.
+ * @returns An object containing the map references and functions.
  */
-export declare function useMapActions(): import("./map-provider.types").MapActionsState;
+export declare function useMapRefences(id: string): MapReferences & {
+    getDeckInstance: () => Deck | undefined;
+    getOverlayInstance: () => OverlayMapRef | undefined;
+    getViewState: () => DeckGLMapsProps['viewState'];
+    getViewports: (rect?: ViewportRect) => WebMercatorViewport[];
+    getViewport: (index?: number, rect?: ViewportRect) => WebMercatorViewport;
+};
+/**
+ * Custom hook that provides map actions for a specific map ID.
+ * @param id - The ID of the map.
+ * @returns An object containing map actions.
+ */
+export declare function useMapActions(id: string): {
+    setBasemap: (basemap: any) => void;
+    setResize: (props: MapResize) => void;
+    setViewState: (viewState: DeckGLMapsProps['viewState']) => void;
+    setZoom: (zoom: number) => void;
+    setLoaded: (loaded: boolean) => void;
+    fitBounds: (bounds: Parameters<WebMercatorViewport['fitBounds']>[0], { boundsOptions, viewStateOptions, }?: {
+        boundsOptions?: Parameters<WebMercatorViewport['fitBounds']>[1];
+        viewStateOptions?: any;
+    }) => void;
+};
 /**
  * Returns the map with the given ID from the current map state.
  * @param {string} id - The ID of the map to retrieve.
  * @returns {MapContextInterface['state']['maps'][string]} The map with the given ID.
+ *
+ * @deprecated Use `useMap` with id param instead.
+ */
+export declare function useMapByID(id: string): MapProviderMapProps;
+/**
+ * @deprecated Use `useMapReferences` with id param instead.
  */
-export declare function useMapByID(id: string): import("./map-provider.types").MapsProps;
-export declare function useMapReferencesByID(id: string): {
-    instanceRef: import("react").MutableRefObject<import("./map-provider.types").InstanceMapRef>;
-    overlayRef: import("react").MutableRefObject<import("./map-provider.types").OverlayMapRef>;
+export declare function useMapReferencesByID(id: string): MapReferences & {
     getDeckInstance: () => Deck | undefined;
-    getOverlayInstance: () => import("./map-provider.types").OverlayMapRef;
+    getOverlayInstance: () => OverlayMapRef | undefined;
     getViewState: () => any;
+    getViewports: (rect?: ViewportRect | undefined) => WebMercatorViewport[];
+    getViewport: (index?: number | undefined, rect?: ViewportRect | undefined) => WebMercatorViewport;
 };
+/**
+  @deprecated Use `useMapActions` with id param instead.
+*/
 export declare function useMapActionsByID(id: string): {
-    setBasemap: (basemap: import("./map-provider.types").Basemap) => void;
-    setResize: (props: import("./map-provider.types").MapResize) => void;
+    setBasemap: (basemap: any) => void;
+    setResize: (props: MapResize) => void;
     setViewState: (viewState: any) => void;
     setZoom: (zoom: number) => void;
+    setLoaded: (loaded: boolean) => void;
+    fitBounds: (bounds: [[number, number], [number, number]], { boundsOptions, viewStateOptions, }?: {
+        boundsOptions?: {
+            width?: number | undefined;
+            height?: number | undefined;
+            minExtent?: number | undefined;
+            maxZoom?: number | undefined;
+            padding?: number | Required<import("@deck.gl/core/typed/viewports/viewport").Padding> | undefined;
+            offset?: number[] | undefined;
+        } | undefined;
+        viewStateOptions?: any;
+    }) => void;
 };

package/dist/types/map-provider/map-provider.provider.d.ts

@@ -2,9 +2,6 @@ import type { MapProviderProps } from './map-provider.types';
 /**
  * Provides a context for maps and their state management.
  * @param {MapProviderProps} props - The props for the MapProvider component.
- * @param {ReactNode} props.children - The child components to be rendered.
- * @param {MapsProps[]} props.maps - An array of maps to be managed by the provider.
- * @param {Function} props.externalSync - A function to sync the state with an external source.
  * @returns {JSX.Element} - The MapProvider component.
  *
  * @remarks

package/dist/types/map-provider/map-provider.reducer.d.ts

@@ -3,7 +3,8 @@ export declare enum Actions {
     SetViewState = "SetViewState",
     SetBasemap = "SetBasemap",
     SetResize = "SetResize",
-    SetZoom = "SetZoom"
+    SetZoom = "SetZoom",
+    SetLoaded = "SetLoaded"
 }
 type Action = {
     type: Actions;

package/dist/types/map-provider/map-provider.types.d.ts

@@ -8,16 +8,18 @@ import type { MutableRefObject, ReactNode } from 'react';
 import type { MapRef } from 'react-map-gl';
 import { CartoBasemapsNames, GMapsBasemap } from './map-provider.const';
 import type { Actions } from './map-provider.reducer';
+export type MapProviderMapProps = {
+    id: MapsProps['id'];
+    basemap: MapsProps['basemap'];
+    viewState: MapsProps['viewState'];
+    isLoaded?: boolean;
+};
 /**
  * Props for the MapProvider component.
  */
 export type MapProviderProps = {
     children: ReactNode;
-    maps: {
-        id: MapsProps['id'];
-        basemap: MapsProps['basemap'];
-        viewState: MapsProps['viewState'];
-    }[];
+    maps: MapProviderMapProps[];
     externalSync?: ExternalSync;
 };
 export type ExternalSync = (data: ExternalSyncProps) => void;
@@ -32,7 +34,7 @@ export type ExternalSyncProps = {
  * State for the MapProvider component.
  */
 export type MapState = {
-    maps: Record<MapsProps['id'], MapsProps>;
+    maps: Record<MapsProps['id'], MapProviderMapProps>;
 };
 /**
  * Resize properties for the map.
@@ -50,10 +52,11 @@ export type MapReferencesState = Record<MapsProps['id'], MapReferences>;
  * Actions that can be performed on the map.
  */
 export type MapActionsState = {
-    setViewState: (id: MapsProps['id'], viewState: DeckGLMapsProps['viewState']) => void;
-    setResize: (id: MapsProps['id'], props: MapResize) => void;
-    setBasemap: (id: MapsProps['id'], basemap: Basemap) => void;
-    setZoom: (id: MapsProps['id'], zoom: number) => void;
+    setViewState: (viewState: DeckGLMapsProps['viewState'], id: MapsProps['id']) => void;
+    setResize: (props: MapResize, id: MapsProps['id']) => void;
+    setBasemap: (basemap: Basemap, id: MapsProps['id']) => void;
+    setZoom: (zoom: number, id: MapsProps['id']) => void;
+    setLoaded: (loaded: boolean, id: MapsProps['id']) => void;
 };
 /**
  * Context interface for the MapProvider component.
@@ -112,3 +115,9 @@ export type Tooltip = {
     className?: string | undefined;
     style?: Partial<CSSStyleDeclaration> | undefined;
 } & PickingInfo;
+export type ViewportRect = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};

package/dist/types/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './object-to-html';

package/dist/types/utils/object-to-html/index.d.ts

@@ -0,0 +1,2 @@
+export { objectToHtml } from './object-to-html';
+export * from './types';

package/dist/types/utils/object-to-html/object-to-html.contants.d.ts

@@ -0,0 +1,2 @@
+import { Formatters } from './types';
+export declare const FORMATTERS: Formatters;

package/dist/types/utils/object-to-html/object-to-html.d.ts

@@ -0,0 +1,37 @@
+import { ObjectToHtmlOptions, Value } from './types';
+/**
+ * Returns a string with the HTML content for an object.
+ *
+ * @param {ObjectToHtmlOptions} - The options of the formatter.
+ *
+ * @return {string}
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `formatters` | `{}` |
+ * | `includeColumns` | `Object.keys(properties)` |
+ * | `locale` | `en-US` |
+ * | `showColumnName` | `true` |
+ * | `title` | `''` |
+ * | `getColumnName` | `Function` |
+ * | `getFieldHtml` | `Function` |
+ * | `getTitle` | `Function` |
+ * | `getValue` | `Function` |
+ *
+ * @example
+ * const properties = {
+ *  name: 'I am a feature',
+ *  price: 100,
+ * }
+ *
+ * const html = objectToHtml({
+ *   properties,
+ *   formatters: {
+ *    price: 'CURRENCY',
+ *   },
+ *   locale: 'es-ES',
+ * })
+ */
+export declare function objectToHtml<T extends Record<string, Value>>({ properties, formatters, includeColumns, locale, showColumnName, title, getColumnName, getFieldHtml, getTitle, getValue, }: ObjectToHtmlOptions<T>): string;

package/dist/types/utils/object-to-html/types.d.ts

@@ -0,0 +1,26 @@
+export declare enum FormatterTypes {
+    CURRENCY = "CURRENCY",
+    DEFAULT = "DEFAULT",
+    NUMBER = "NUMBER"
+}
+export type Format = (value: Value, locale: string) => string;
+export type FormatterType = `${FormatterTypes}` | FormatterTypes;
+export interface Formatter {
+    type: FormatterType;
+    format: Format;
+}
+export type Formatters = Record<FormatterType, Formatter>;
+export type FieldFormatter = FormatterType | Format;
+export type Value = string | number;
+export interface ObjectToHtmlOptions<T extends Record<string, Value>> {
+    properties: T;
+    formatters?: Record<string, FieldFormatter>;
+    includeColumns?: string[];
+    locale?: string;
+    showColumnName?: boolean;
+    title?: string;
+    getColumnName?: (name: string) => string;
+    getFieldHtml?: (column: string, value: Value) => string;
+    getTitle?: (title: string) => string;
+    getValue?: (value: Value, locale: string, formatter: FieldFormatter) => string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-maps",
-  "version": "1.2.0",
+  "version": "1.3.1-alpha.0",
   "description": "CARTO's Professional Service React Maps library",
   "files": [
     "dist"
@@ -30,7 +30,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@carto/react-basemaps": "2.3.5",
+    "@carto/react-basemaps": "2.3.6",
     "@deck.gl/core": "8.9.33",
     "@deck.gl/google-maps": "8.9.33",
     "@deck.gl/react": "8.9.33",
@@ -44,7 +44,7 @@
     "@storybook/react": "7.6.7",
     "@storybook/react-vite": "7.6.7",
     "@storybook/testing-library": "0.2.2",
-    "@testing-library/jest-dom": "6.1.6",
+    "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
     "@types/google.maps": "3.54.10",