@mapfirst.ai/react 0.0.6 → 0.0.8

package/dist/index.d.mts

@@ -1,7 +1,205 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-import { BaseMapFirstOptions, MapFirstCore, MapState, Property, PropertyType, MapLibreNamespace, GoogleMapsNamespace, MapboxNamespace, MapFirstOptions } from '@mapfirst.ai/core';
+import * as _mapfirst_ai_core from '@mapfirst.ai/core';
+import { PropertyType, PriceLevel, MapFirstCore, BaseMapFirstOptions, MapState, Property, MapLibreNamespace, GoogleMapsNamespace, MapboxNamespace, MapFirstOptions } from '@mapfirst.ai/core';
+import * as React$1 from 'react';
+import React__default, { FunctionComponent, CSSProperties, ReactNode } from 'react';
 
+type Filter = {
+    id: string;
+    label: string | React.ReactNode;
+    type: "amenity" | "hotelStyle" | "priceRange" | "minRating" | "starRating" | "primary_type" | "transformed_query" | "selected_restaurant_price_levels";
+    value: string;
+    numericValue?: number;
+    icon?: React.ReactNode;
+    priceRange?: PriceRangeValue;
+    propertyType?: PropertyType;
+    priceLevels?: PriceLevel[];
+};
+type PriceRangeValue = {
+    min?: number;
+    max?: number;
+};
+
+interface SmartFilterProps {
+    mapFirst: MapFirstCore | null;
+    filters: Filter[];
+    value?: string;
+    isSearching?: boolean;
+    placeholder?: string;
+    onSearch: (query: string, filters?: Filter[]) => Promise<void> | void;
+    onFilterChange: (filters: Filter[]) => Promise<void> | void;
+    onValueChange?: (value: string) => void;
+    showTypingPrompt?: boolean;
+    customTranslations?: Record<string, string>;
+    currency?: string;
+    style?: CSSProperties;
+    inputStyle?: CSSProperties;
+    containerStyle?: CSSProperties;
+}
+/**
+ * SmartFilter component for AI-powered search with filter chips.
+ * Provides a search input with smart filtering capabilities.
+ *
+ * @example
+ * ```tsx
+ * const { mapFirst, state } = useMapFirstCore({ ... });
+ * const [filters, setFilters] = useState<Filter[]>([]);
+ * const [searchValue, setSearchValue] = useState("");
+ *
+ * const handleSearch = async (query: string, currentFilters?: Filter[]) => {
+ *   // Perform search using mapFirst.runSmartFilterSearch
+ *   const result = await mapFirst.runSmartFilterSearch({
+ *     query,
+ *     filters: currentFilters
+ *   });
+ *   // Update filters based on response
+ * };
+ *
+ * return (
+ *   <SmartFilter
+ *     mapFirst={mapFirst}
+ *     filters={filters}
+ *     value={searchValue}
+ *     isSearching={state?.isSearching}
+ *     onSearch={handleSearch}
+ *     onFilterChange={setFilters}
+ *     onValueChange={setSearchValue}
+ *   />
+ * );
+ * ```
+ */
+declare const SmartFilter$1: FunctionComponent<SmartFilterProps>;
+
+interface IconProps {
+    className?: string;
+    style?: CSSProperties;
+}
+declare const SearchIcon: React__default.FC<IconProps>;
+declare const CloseIcon: React__default.FC<IconProps>;
+declare const EditIcon: React__default.FC<IconProps>;
+declare const NextIcon: React__default.FC<IconProps>;
+declare const AiIcon: React__default.FC<IconProps>;
+declare const StarIcon: React__default.FC<IconProps & {
+    fill?: string;
+}>;
+
+interface ChipProps {
+    label: string | ReactNode;
+    icon?: ReactNode;
+    remove: () => void;
+    style?: CSSProperties;
+}
+declare const Chip: React__default.FC<ChipProps>;
+
+interface FilterChipsProps {
+    filters: Filter[];
+    isPortrait: boolean;
+    currency: string;
+    minRatingSuffix: string;
+    clearAllLabel: string;
+    previousFiltersLabel: string;
+    nextFiltersLabel: string;
+    formatCurrency: (value: number, currency?: string) => string;
+    onFilterChange: (filters: Filter[], clearAll?: boolean) => void | Promise<void>;
+    onResetFilters: () => void;
+    onClearAll: () => void;
+}
+declare const FilterChips: FunctionComponent<FilterChipsProps>;
+
+declare const MinRatingFilterChip: FunctionComponent<{
+    star?: boolean;
+    rating: number;
+    onChange: (rating: number) => void;
+    onRemove: () => void;
+}>;
+
+declare const PriceRangeFilterChip: FunctionComponent<{
+    priceRange: PriceRangeValue;
+    currency: string;
+    onChange: (range: PriceRangeValue) => void;
+    onRemove: () => void;
+}>;
+
+interface RestaurantPriceLevelChipProps {
+    values: PriceLevel[];
+    onChange: (values: PriceLevel[]) => void;
+    onRemove: () => void;
+}
+declare const RestaurantPriceLevelChip: FunctionComponent<RestaurantPriceLevelChipProps>;
+
+interface TransformedQueryChipProps {
+    value: string;
+    onChange: (nextValue: string) => void;
+    onRemove: () => void;
+}
+declare const TransformedQueryChip: FunctionComponent<TransformedQueryChipProps>;
+
+declare const renderStars: (rating: number) => ReactNode[];
+declare const createMinRatingFilterLabel: (rating: number, suffix?: string) => ReactNode;
+declare const formatRatingValue: (rating: number) => string;
+declare const createPriceRangeFilterLabel: (min: number, max: number | undefined, currency: string | undefined, formatCurrencyFn: (value: number, currency?: string) => string) => string;
+
+declare const useFilterScroll: (dependency: number) => {
+    scrollerRef: React$1.RefObject<HTMLDivElement | null>;
+    atStart: boolean;
+    atEnd: boolean;
+    scrollByDir: (dir: "prev" | "next") => void;
+};
+
+/**
+ * Hook to detect if the viewport is in portrait orientation.
+ * Updates on window resize.
+ */
+declare const useIsPortrait: () => boolean;
+
+type Locale = "en" | "es" | "de" | "fr" | "it" | "pt";
+type TranslationFunction = (key: string, params?: Record<string, any>) => string;
+type FormatCurrencyFunction = (value: number, currency?: string) => string;
+/**
+ * Simple translation hook with default English translations.
+ * Can be extended with custom translations and locales.
+ */
+declare const useTranslation: (customTranslations?: Record<string, string>, customFormatCurrency?: FormatCurrencyFunction) => {
+    t: TranslationFunction;
+    locale: Locale;
+    setLocale: React$1.Dispatch<React$1.SetStateAction<Locale>>;
+    formatCurrency: (value: number, currency?: string) => string;
+};
+
+type InitialRequestBody = {
+    initial?: boolean;
+    query?: string;
+    bounds?: {
+        sw: {
+            lat: number;
+            lng: number;
+        };
+        ne: {
+            lat: number;
+            lng: number;
+        };
+    };
+    filters?: any;
+    city?: string;
+    country?: string;
+    location_id?: number;
+    longitude?: number;
+    latitude?: number;
+    radius?: number;
+};
+type SmartFilter = {
+    id: string;
+    label: string;
+    type: "amenity" | "hotelStyle" | "priceRange" | "minRating" | "starRating" | "primary_type" | "transformed_query" | "selected_restaurant_price_levels";
+    value: string;
+    numericValue?: number;
+    priceRange?: {
+        min: number;
+        max?: number;
+    };
+    propertyType?: PropertyType;
+    priceLevels?: any[];
+};
 /**
  * Hook that creates a MapFirstCore instance that can be initialized before maps are ready.
  * Supports two-phase initialization: create SDK first, attach map later.
@@ -187,7 +385,98 @@ declare function useMapboxAttachment({ mapFirst, map, mapboxgl, onMarkerClick, }
  *
  * @deprecated Use useMapFirstCore and platform-specific attachment hooks instead
  */
-declare function useMapFirst(options: MapFirstOptions | null): React.RefObject<MapFirstCore | null>;
+declare function useMapFirst(options: MapFirstOptions | null): React__default.RefObject<MapFirstCore | null>;
+/**
+ * Hook to run properties search with the MapFirst SDK.
+ * Returns a function to trigger the search and loading state.
+ *
+ * @example
+ * ```tsx
+ * const { mapFirst } = useMapFirstCore({ ... });
+ * const { search, isLoading, error } = usePropertiesSearch(mapFirst);
+ *
+ * const handleSearch = async () => {
+ *   await search({
+ *     body: {
+ *       city: "Paris",
+ *       country: "France",
+ *       filters: {
+ *         checkIn: new Date(),
+ *         checkOut: new Date(Date.now() + 86400000),
+ *         numAdults: 2,
+ *         numRooms: 1
+ *       }
+ *     }
+ *   });
+ * };
+ * ```
+ */
+declare function usePropertiesSearch(mapFirst: MapFirstCore | null): {
+    search: (options: {
+        body: InitialRequestBody;
+        beforeApplyProperties?: (data: any) => {
+            price?: any;
+            limit?: number;
+        };
+        smartFiltersClearable?: boolean;
+    }) => Promise<{
+        location_id?: number;
+        filters: _mapfirst_ai_core.FilterSchema;
+        properties: Property[];
+        isComplete: boolean | undefined;
+        pollingLink: string | undefined;
+        durationSeconds: number;
+    } | null>;
+    isLoading: boolean;
+    error: Error | null;
+};
+/**
+ * Hook to run smart filter search with the MapFirst SDK.
+ * Returns a function to trigger the search and loading state.
+ *
+ * @example
+ * ```tsx
+ * const { mapFirst } = useMapFirstCore({ ... });
+ * const { search, isLoading, error } = useSmartFilterSearch(mapFirst);
+ *
+ * const handleSearch = async () => {
+ *   await search({
+ *     query: "hotels near beach with pool"
+ *   });
+ * };
+ *
+ * // Or with filters
+ * const handleFilterSearch = async () => {
+ *   await search({
+ *     filters: [
+ *       { id: "pool", label: "Pool", type: "amenity", value: "pool" },
+ *       { id: "4star", label: "4 Star", type: "starRating", value: "4", numericValue: 4 }
+ *     ]
+ *   });
+ * };
+ * ```
+ */
+declare function useSmartFilterSearch(mapFirst: MapFirstCore | null): {
+    search: (options: {
+        query?: string;
+        filters?: SmartFilter[];
+        onProcessFilters?: (filters: any, location_id?: number) => {
+            smartFilters?: SmartFilter[];
+            price?: any;
+            limit?: number;
+            language?: string;
+        };
+    }) => Promise<{
+        location_id?: number;
+        filters: _mapfirst_ai_core.FilterSchema;
+        properties: Property[];
+        isComplete: boolean | undefined;
+        pollingLink: string | undefined;
+        durationSeconds: number;
+    } | null>;
+    isLoading: boolean;
+    error: Error | null;
+};
 /**
  * Helper component that simply renders the markers it receives so non-React environments
  * can verify data flows before wiring the SDK into a map.
@@ -196,4 +485,4 @@ declare function MarkerDebugList({ markers }: {
     markers: Property[];
 }): react_jsx_runtime.JSX.Element;
 
-export { MarkerDebugList, useGoogleMapsAttachment, useMapFirst, useMapFirstCore, useMapFirstProperties, useMapFirstSelectedProperty, useMapLibreAttachment, useMapboxAttachment, usePrimaryType, useSelectedMarker };
+export { AiIcon, Chip, type ChipProps, CloseIcon, EditIcon, type Filter, FilterChips, type FilterChipsProps, type IconProps, type Locale, MarkerDebugList, MinRatingFilterChip, NextIcon, PriceRangeFilterChip, type PriceRangeValue, RestaurantPriceLevelChip, type RestaurantPriceLevelChipProps, SearchIcon, SmartFilter$1 as SmartFilter, type SmartFilterProps, StarIcon, TransformedQueryChip, type TransformedQueryChipProps, createMinRatingFilterLabel, createPriceRangeFilterLabel, formatRatingValue, renderStars, useFilterScroll, useGoogleMapsAttachment, useIsPortrait, useMapFirst, useMapFirstCore, useMapFirstProperties, useMapFirstSelectedProperty, useMapLibreAttachment, useMapboxAttachment, usePrimaryType, usePropertiesSearch, useSelectedMarker, useSmartFilterSearch, useTranslation };

package/dist/index.d.ts

@@ -1,7 +1,205 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-import { BaseMapFirstOptions, MapFirstCore, MapState, Property, PropertyType, MapLibreNamespace, GoogleMapsNamespace, MapboxNamespace, MapFirstOptions } from '@mapfirst.ai/core';
+import * as _mapfirst_ai_core from '@mapfirst.ai/core';
+import { PropertyType, PriceLevel, MapFirstCore, BaseMapFirstOptions, MapState, Property, MapLibreNamespace, GoogleMapsNamespace, MapboxNamespace, MapFirstOptions } from '@mapfirst.ai/core';
+import * as React$1 from 'react';
+import React__default, { FunctionComponent, CSSProperties, ReactNode } from 'react';
 
+type Filter = {
+    id: string;
+    label: string | React.ReactNode;
+    type: "amenity" | "hotelStyle" | "priceRange" | "minRating" | "starRating" | "primary_type" | "transformed_query" | "selected_restaurant_price_levels";
+    value: string;
+    numericValue?: number;
+    icon?: React.ReactNode;
+    priceRange?: PriceRangeValue;
+    propertyType?: PropertyType;
+    priceLevels?: PriceLevel[];
+};
+type PriceRangeValue = {
+    min?: number;
+    max?: number;
+};
+
+interface SmartFilterProps {
+    mapFirst: MapFirstCore | null;
+    filters: Filter[];
+    value?: string;
+    isSearching?: boolean;
+    placeholder?: string;
+    onSearch: (query: string, filters?: Filter[]) => Promise<void> | void;
+    onFilterChange: (filters: Filter[]) => Promise<void> | void;
+    onValueChange?: (value: string) => void;
+    showTypingPrompt?: boolean;
+    customTranslations?: Record<string, string>;
+    currency?: string;
+    style?: CSSProperties;
+    inputStyle?: CSSProperties;
+    containerStyle?: CSSProperties;
+}
+/**
+ * SmartFilter component for AI-powered search with filter chips.
+ * Provides a search input with smart filtering capabilities.
+ *
+ * @example
+ * ```tsx
+ * const { mapFirst, state } = useMapFirstCore({ ... });
+ * const [filters, setFilters] = useState<Filter[]>([]);
+ * const [searchValue, setSearchValue] = useState("");
+ *
+ * const handleSearch = async (query: string, currentFilters?: Filter[]) => {
+ *   // Perform search using mapFirst.runSmartFilterSearch
+ *   const result = await mapFirst.runSmartFilterSearch({
+ *     query,
+ *     filters: currentFilters
+ *   });
+ *   // Update filters based on response
+ * };
+ *
+ * return (
+ *   <SmartFilter
+ *     mapFirst={mapFirst}
+ *     filters={filters}
+ *     value={searchValue}
+ *     isSearching={state?.isSearching}
+ *     onSearch={handleSearch}
+ *     onFilterChange={setFilters}
+ *     onValueChange={setSearchValue}
+ *   />
+ * );
+ * ```
+ */
+declare const SmartFilter$1: FunctionComponent<SmartFilterProps>;
+
+interface IconProps {
+    className?: string;
+    style?: CSSProperties;
+}
+declare const SearchIcon: React__default.FC<IconProps>;
+declare const CloseIcon: React__default.FC<IconProps>;
+declare const EditIcon: React__default.FC<IconProps>;
+declare const NextIcon: React__default.FC<IconProps>;
+declare const AiIcon: React__default.FC<IconProps>;
+declare const StarIcon: React__default.FC<IconProps & {
+    fill?: string;
+}>;
+
+interface ChipProps {
+    label: string | ReactNode;
+    icon?: ReactNode;
+    remove: () => void;
+    style?: CSSProperties;
+}
+declare const Chip: React__default.FC<ChipProps>;
+
+interface FilterChipsProps {
+    filters: Filter[];
+    isPortrait: boolean;
+    currency: string;
+    minRatingSuffix: string;
+    clearAllLabel: string;
+    previousFiltersLabel: string;
+    nextFiltersLabel: string;
+    formatCurrency: (value: number, currency?: string) => string;
+    onFilterChange: (filters: Filter[], clearAll?: boolean) => void | Promise<void>;
+    onResetFilters: () => void;
+    onClearAll: () => void;
+}
+declare const FilterChips: FunctionComponent<FilterChipsProps>;
+
+declare const MinRatingFilterChip: FunctionComponent<{
+    star?: boolean;
+    rating: number;
+    onChange: (rating: number) => void;
+    onRemove: () => void;
+}>;
+
+declare const PriceRangeFilterChip: FunctionComponent<{
+    priceRange: PriceRangeValue;
+    currency: string;
+    onChange: (range: PriceRangeValue) => void;
+    onRemove: () => void;
+}>;
+
+interface RestaurantPriceLevelChipProps {
+    values: PriceLevel[];
+    onChange: (values: PriceLevel[]) => void;
+    onRemove: () => void;
+}
+declare const RestaurantPriceLevelChip: FunctionComponent<RestaurantPriceLevelChipProps>;
+
+interface TransformedQueryChipProps {
+    value: string;
+    onChange: (nextValue: string) => void;
+    onRemove: () => void;
+}
+declare const TransformedQueryChip: FunctionComponent<TransformedQueryChipProps>;
+
+declare const renderStars: (rating: number) => ReactNode[];
+declare const createMinRatingFilterLabel: (rating: number, suffix?: string) => ReactNode;
+declare const formatRatingValue: (rating: number) => string;
+declare const createPriceRangeFilterLabel: (min: number, max: number | undefined, currency: string | undefined, formatCurrencyFn: (value: number, currency?: string) => string) => string;
+
+declare const useFilterScroll: (dependency: number) => {
+    scrollerRef: React$1.RefObject<HTMLDivElement | null>;
+    atStart: boolean;
+    atEnd: boolean;
+    scrollByDir: (dir: "prev" | "next") => void;
+};
+
+/**
+ * Hook to detect if the viewport is in portrait orientation.
+ * Updates on window resize.
+ */
+declare const useIsPortrait: () => boolean;
+
+type Locale = "en" | "es" | "de" | "fr" | "it" | "pt";
+type TranslationFunction = (key: string, params?: Record<string, any>) => string;
+type FormatCurrencyFunction = (value: number, currency?: string) => string;
+/**
+ * Simple translation hook with default English translations.
+ * Can be extended with custom translations and locales.
+ */
+declare const useTranslation: (customTranslations?: Record<string, string>, customFormatCurrency?: FormatCurrencyFunction) => {
+    t: TranslationFunction;
+    locale: Locale;
+    setLocale: React$1.Dispatch<React$1.SetStateAction<Locale>>;
+    formatCurrency: (value: number, currency?: string) => string;
+};
+
+type InitialRequestBody = {
+    initial?: boolean;
+    query?: string;
+    bounds?: {
+        sw: {
+            lat: number;
+            lng: number;
+        };
+        ne: {
+            lat: number;
+            lng: number;
+        };
+    };
+    filters?: any;
+    city?: string;
+    country?: string;
+    location_id?: number;
+    longitude?: number;
+    latitude?: number;
+    radius?: number;
+};
+type SmartFilter = {
+    id: string;
+    label: string;
+    type: "amenity" | "hotelStyle" | "priceRange" | "minRating" | "starRating" | "primary_type" | "transformed_query" | "selected_restaurant_price_levels";
+    value: string;
+    numericValue?: number;
+    priceRange?: {
+        min: number;
+        max?: number;
+    };
+    propertyType?: PropertyType;
+    priceLevels?: any[];
+};
 /**
  * Hook that creates a MapFirstCore instance that can be initialized before maps are ready.
  * Supports two-phase initialization: create SDK first, attach map later.
@@ -187,7 +385,98 @@ declare function useMapboxAttachment({ mapFirst, map, mapboxgl, onMarkerClick, }
  *
  * @deprecated Use useMapFirstCore and platform-specific attachment hooks instead
  */
-declare function useMapFirst(options: MapFirstOptions | null): React.RefObject<MapFirstCore | null>;
+declare function useMapFirst(options: MapFirstOptions | null): React__default.RefObject<MapFirstCore | null>;
+/**
+ * Hook to run properties search with the MapFirst SDK.
+ * Returns a function to trigger the search and loading state.
+ *
+ * @example
+ * ```tsx
+ * const { mapFirst } = useMapFirstCore({ ... });
+ * const { search, isLoading, error } = usePropertiesSearch(mapFirst);
+ *
+ * const handleSearch = async () => {
+ *   await search({
+ *     body: {
+ *       city: "Paris",
+ *       country: "France",
+ *       filters: {
+ *         checkIn: new Date(),
+ *         checkOut: new Date(Date.now() + 86400000),
+ *         numAdults: 2,
+ *         numRooms: 1
+ *       }
+ *     }
+ *   });
+ * };
+ * ```
+ */
+declare function usePropertiesSearch(mapFirst: MapFirstCore | null): {
+    search: (options: {
+        body: InitialRequestBody;
+        beforeApplyProperties?: (data: any) => {
+            price?: any;
+            limit?: number;
+        };
+        smartFiltersClearable?: boolean;
+    }) => Promise<{
+        location_id?: number;
+        filters: _mapfirst_ai_core.FilterSchema;
+        properties: Property[];
+        isComplete: boolean | undefined;
+        pollingLink: string | undefined;
+        durationSeconds: number;
+    } | null>;
+    isLoading: boolean;
+    error: Error | null;
+};
+/**
+ * Hook to run smart filter search with the MapFirst SDK.
+ * Returns a function to trigger the search and loading state.
+ *
+ * @example
+ * ```tsx
+ * const { mapFirst } = useMapFirstCore({ ... });
+ * const { search, isLoading, error } = useSmartFilterSearch(mapFirst);
+ *
+ * const handleSearch = async () => {
+ *   await search({
+ *     query: "hotels near beach with pool"
+ *   });
+ * };
+ *
+ * // Or with filters
+ * const handleFilterSearch = async () => {
+ *   await search({
+ *     filters: [
+ *       { id: "pool", label: "Pool", type: "amenity", value: "pool" },
+ *       { id: "4star", label: "4 Star", type: "starRating", value: "4", numericValue: 4 }
+ *     ]
+ *   });
+ * };
+ * ```
+ */
+declare function useSmartFilterSearch(mapFirst: MapFirstCore | null): {
+    search: (options: {
+        query?: string;
+        filters?: SmartFilter[];
+        onProcessFilters?: (filters: any, location_id?: number) => {
+            smartFilters?: SmartFilter[];
+            price?: any;
+            limit?: number;
+            language?: string;
+        };
+    }) => Promise<{
+        location_id?: number;
+        filters: _mapfirst_ai_core.FilterSchema;
+        properties: Property[];
+        isComplete: boolean | undefined;
+        pollingLink: string | undefined;
+        durationSeconds: number;
+    } | null>;
+    isLoading: boolean;
+    error: Error | null;
+};
 /**
  * Helper component that simply renders the markers it receives so non-React environments
  * can verify data flows before wiring the SDK into a map.
@@ -196,4 +485,4 @@ declare function MarkerDebugList({ markers }: {
     markers: Property[];
 }): react_jsx_runtime.JSX.Element;
 
-export { MarkerDebugList, useGoogleMapsAttachment, useMapFirst, useMapFirstCore, useMapFirstProperties, useMapFirstSelectedProperty, useMapLibreAttachment, useMapboxAttachment, usePrimaryType, useSelectedMarker };
+export { AiIcon, Chip, type ChipProps, CloseIcon, EditIcon, type Filter, FilterChips, type FilterChipsProps, type IconProps, type Locale, MarkerDebugList, MinRatingFilterChip, NextIcon, PriceRangeFilterChip, type PriceRangeValue, RestaurantPriceLevelChip, type RestaurantPriceLevelChipProps, SearchIcon, SmartFilter$1 as SmartFilter, type SmartFilterProps, StarIcon, TransformedQueryChip, type TransformedQueryChipProps, createMinRatingFilterLabel, createPriceRangeFilterLabel, formatRatingValue, renderStars, useFilterScroll, useGoogleMapsAttachment, useIsPortrait, useMapFirst, useMapFirstCore, useMapFirstProperties, useMapFirstSelectedProperty, useMapLibreAttachment, useMapboxAttachment, usePrimaryType, usePropertiesSearch, useSelectedMarker, useSmartFilterSearch, useTranslation };