@mapfirst.ai/react 0.0.6 → 0.0.8

package/EXAMPLES.md

@@ -386,6 +386,314 @@ function RealTimeUpdates() {
 }
 ```
 
+## Search Hooks Examples
+
+### Using `usePropertiesSearch` for Location-Based Search
+
+```tsx
+import React, { useState } from "react";
+import {
+  useMapFirstCore,
+  useMapLibreAttachment,
+  usePropertiesSearch,
+} from "@mapfirst/react";
+import maplibregl from "maplibre-gl";
+
+function LocationSearchExample() {
+  const [city, setCity] = useState("Paris");
+  const [country, setCountry] = useState("France");
+
+  const { mapFirst, state } = useMapFirstCore({
+    initialLocationData: { city, country, currency: "USD" },
+  });
+
+  const { search, isLoading, error } = usePropertiesSearch(mapFirst);
+
+  const handleSearch = async () => {
+    try {
+      await search({
+        body: {
+          city,
+          country,
+          filters: {
+            checkIn: new Date("2024-06-01"),
+            checkOut: new Date("2024-06-07"),
+            numAdults: 2,
+            numRooms: 1,
+            currency: "USD",
+          },
+        },
+      });
+    } catch (err) {
+      console.error("Search failed:", err);
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <input
+          value={city}
+          onChange={(e) => setCity(e.target.value)}
+          placeholder="City"
+        />
+        <input
+          value={country}
+          onChange={(e) => setCountry(e.target.value)}
+          placeholder="Country"
+        />
+        <button onClick={handleSearch} disabled={isLoading}>
+          {isLoading ? "Searching..." : "Search"}
+        </button>
+      </div>
+      {error && <div style={{ color: "red" }}>Error: {error.message}</div>}
+      <div>Found {state?.properties.length || 0} properties</div>
+    </div>
+  );
+}
+```
+
+### Using `useSmartFilterSearch` for Natural Language Queries
+
+```tsx
+import React, { useState } from "react";
+import {
+  useMapFirstCore,
+  useMapLibreAttachment,
+  useSmartFilterSearch,
+} from "@mapfirst/react";
+import maplibregl from "maplibre-gl";
+
+function SmartSearchExample() {
+  const [query, setQuery] = useState("");
+
+  const { mapFirst, state } = useMapFirstCore({
+    initialLocationData: {
+      city: "New York",
+      country: "United States",
+      currency: "USD",
+    },
+  });
+
+  const { search, isLoading, error } = useSmartFilterSearch(mapFirst);
+
+  const handleSearch = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!query.trim()) return;
+
+    try {
+      await search({ query });
+    } catch (err) {
+      console.error("Search failed:", err);
+    }
+  };
+
+  const exampleQueries = [
+    "Hotels near Times Square with free wifi",
+    "4-star hotels with pool and gym",
+    "Budget hotels under $150",
+    "Luxury hotels with spa",
+  ];
+
+  return (
+    <div>
+      <form onSubmit={handleSearch}>
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Try: hotels near beach with pool"
+          style={{ width: "400px", padding: "8px" }}
+        />
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? "Searching..." : "Search"}
+        </button>
+      </form>
+
+      <div style={{ marginTop: "10px" }}>
+        <strong>Try these examples:</strong>
+        <ul>
+          {exampleQueries.map((q) => (
+            <li key={q}>
+              <button
+                onClick={() => {
+                  setQuery(q);
+                  search({ query: q });
+                }}
+                disabled={isLoading}
+                style={{ textAlign: "left", padding: "4px 8px" }}
+              >
+                {q}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {error && (
+        <div style={{ color: "red", marginTop: "10px" }}>
+          Error: {error.message}
+        </div>
+      )}
+
+      <div style={{ marginTop: "10px" }}>
+        {isLoading ? (
+          <p>Searching...</p>
+        ) : (
+          <p>Found {state?.properties.length || 0} properties</p>
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+### Combined Search with Filters
+
+```tsx
+import React, { useState } from "react";
+import {
+  useMapFirstCore,
+  usePropertiesSearch,
+  useSmartFilterSearch,
+} from "@mapfirst/react";
+
+type SearchMode = "location" | "smart";
+
+function CombinedSearchExample() {
+  const [mode, setMode] = useState<SearchMode>("location");
+  const [city, setCity] = useState("Los Angeles");
+  const [country, setCountry] = useState("United States");
+  const [query, setQuery] = useState("");
+
+  const { mapFirst, state } = useMapFirstCore({
+    initialLocationData: { city, country, currency: "USD" },
+  });
+
+  const propertiesSearch = usePropertiesSearch(mapFirst);
+  const smartSearch = useSmartFilterSearch(mapFirst);
+
+  const currentSearch = mode === "location" ? propertiesSearch : smartSearch;
+
+  const handleLocationSearch = async () => {
+    try {
+      await propertiesSearch.search({
+        body: {
+          city,
+          country,
+          filters: {
+            checkIn: new Date("2024-06-01"),
+            checkOut: new Date("2024-06-07"),
+            numAdults: 2,
+            numRooms: 1,
+            currency: "USD",
+          },
+        },
+      });
+    } catch (err) {
+      console.error("Location search failed:", err);
+    }
+  };
+
+  const handleSmartSearch = async () => {
+    if (!query.trim()) return;
+    try {
+      await smartSearch.search({ query });
+    } catch (err) {
+      console.error("Smart search failed:", err);
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <label>
+          <input
+            type="radio"
+            checked={mode === "location"}
+            onChange={() => setMode("location")}
+          />
+          Location Search
+        </label>
+        <label style={{ marginLeft: "20px" }}>
+          <input
+            type="radio"
+            checked={mode === "smart"}
+            onChange={() => setMode("smart")}
+          />
+          Smart Search
+        </label>
+      </div>
+
+      {mode === "location" ? (
+        <div style={{ marginTop: "10px" }}>
+          <input
+            value={city}
+            onChange={(e) => setCity(e.target.value)}
+            placeholder="City"
+          />
+          <input
+            value={country}
+            onChange={(e) => setCountry(e.target.value)}
+            placeholder="Country"
+            style={{ marginLeft: "10px" }}
+          />
+          <button
+            onClick={handleLocationSearch}
+            disabled={currentSearch.isLoading}
+          >
+            Search
+          </button>
+        </div>
+      ) : (
+        <div style={{ marginTop: "10px" }}>
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Describe what you're looking for..."
+            style={{ width: "400px" }}
+          />
+          <button
+            onClick={handleSmartSearch}
+            disabled={currentSearch.isLoading}
+          >
+            Search
+          </button>
+        </div>
+      )}
+
+      {currentSearch.error && (
+        <div style={{ color: "red", marginTop: "10px" }}>
+          Error: {currentSearch.error.message}
+        </div>
+      )}
+
+      <div style={{ marginTop: "10px" }}>
+        {currentSearch.isLoading ? (
+          <p>Searching...</p>
+        ) : (
+          <p>Found {state?.properties.length || 0} properties</p>
+        )}
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        <h3>Results:</h3>
+        <ul>
+          {state?.properties.slice(0, 5).map((property) => (
+            <li key={property.tripadvisor_id}>
+              <strong>{property.name}</strong>
+              {property.pricing && (
+                <span> - ${property.pricing.display_price}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+```
+
 ## TypeScript Usage
 
 Full type safety with TypeScript:

package/README.md

@@ -1,6 +1,16 @@
 # @mapfirst/react
 
-React hooks for the MapFirst SDK supporting MapLibre, Google Maps, and Mapbox.
+React hooks and components for the MapFirst SDK supporting MapLibre, Google Maps, and Mapbox.
+
+## Features
+
+- 🗺️ **Multi-Platform Support**: Works with MapLibre GL JS, Google Maps, and Mapbox GL JS
+- 🔍 **SmartFilter Component**: AI-powered search with interactive filter chips
+- ⚛️ **React Hooks**: Reactive state management for properties, filters, and map state
+- 🎨 **Customizable**: Native React styles (CSS-in-JS) - no framework dependencies
+- 📱 **Responsive**: Adapts to different screen sizes and orientations
+- ♿ **Accessible**: Full keyboard navigation and ARIA support
+- 🌍 **i18n Ready**: Built-in translations with extensibility
 
 ## Installation
 
@@ -12,6 +22,39 @@ pnpm add @mapfirst/react @mapfirst/core
 yarn add @mapfirst/react @mapfirst/core
 ```
 
+## Quick Start - SmartFilter Component
+
+```tsx
+import { useMapFirstCore, SmartFilter } from "@mapfirst/react";
+import { useState } from "react";
+
+function App() {
+  const { mapFirst, state } = useMapFirstCore({
+    initialLocationData: {
+      city: "New York",
+      country: "United States",
+      currency: "USD",
+    },
+  });
+
+  const [filters, setFilters] = useState([]);
+
+  return (
+    <SmartFilter
+      mapFirst={mapFirst}
+      filters={filters}
+      isSearching={state?.isSearching}
+      onSearch={async (query) => {
+        // Implement search logic
+      }}
+      onFilterChange={setFilters}
+    />
+  );
+}
+```
+
+See [SMARTFILTER.md](./SMARTFILTER.md) for complete SmartFilter documentation.
+
 ## Usage
 
 The React SDK supports a two-phase initialization pattern:
@@ -499,6 +542,119 @@ const selectedId = useMapFirstSelectedProperty(mapFirst);
 return <div>Selected: {selectedId || 'None'}</div>;
 ```
 
+### `usePropertiesSearch`
+
+Hook to run properties search with the MapFirst SDK. Returns a function to trigger the search and loading state.
+
+**Parameters:**
+
+- `mapFirst` - SDK instance from `useMapFirstCore`
+
+**Returns:** `{ search: Function, isLoading: boolean, error: Error | null }`
+
+**Example:**
+
+```tsx
+const { mapFirst } = useMapFirstCore({ ... });
+const { search, isLoading, error } = usePropertiesSearch(mapFirst);
+
+const handleSearch = async () => {
+  try {
+    await search({
+      body: {
+        city: "Paris",
+        country: "France",
+        filters: {
+          checkIn: new Date(),
+          checkOut: new Date(Date.now() + 86400000 * 3), // 3 days later
+          numAdults: 2,
+          numRooms: 1,
+          currency: "EUR"
+        }
+      }
+    });
+  } catch (err) {
+    console.error("Search failed:", err);
+  }
+};
+
+return (
+  <div>
+    <button onClick={handleSearch} disabled={isLoading}>
+      {isLoading ? "Searching..." : "Search Properties"}
+    </button>
+    {error && <p>Error: {error.message}</p>}
+  </div>
+);
+```
+
+### `useSmartFilterSearch`
+
+Hook to run smart filter search with natural language queries or predefined filters.
+
+**Parameters:**
+
+- `mapFirst` - SDK instance from `useMapFirstCore`
+
+**Returns:** `{ search: Function, isLoading: boolean, error: Error | null }`
+
+**Example with natural language query:**
+
+```tsx
+const { mapFirst } = useMapFirstCore({ ... });
+const { search, isLoading, error } = useSmartFilterSearch(mapFirst);
+
+const handleSearch = async (query: string) => {
+  try {
+    await search({ query });
+  } catch (err) {
+    console.error("Search failed:", err);
+  }
+};
+
+return (
+  <div>
+    <input
+      type="text"
+      placeholder="e.g., hotels near beach with pool"
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          handleSearch(e.currentTarget.value);
+        }
+      }}
+    />
+    {isLoading && <p>Searching...</p>}
+    {error && <p>Error: {error.message}</p>}
+  </div>
+);
+```
+
+**Example with predefined filters:**
+
+```tsx
+const { mapFirst } = useMapFirstCore({ ... });
+const { search, isLoading, error } = useSmartFilterSearch(mapFirst);
+
+const handleFilterSearch = async () => {
+  try {
+    await search({
+      filters: [
+        { id: "pool", label: "Pool", type: "amenity", value: "pool" },
+        { id: "4star", label: "4 Star", type: "starRating", value: "4", numericValue: 4 }
+      ]
+    });
+  } catch (err) {
+    console.error("Search failed:", err);
+  }
+};
+
+return (
+  <button onClick={handleFilterSearch} disabled={isLoading}>
+    Apply Filters
+  </button>
+);
+```
+
 ## Legacy API
 
 The old `useMapFirst` hook is still available but deprecated: