@next-degree/pickle-shared-js 0.3.30 → 0.5.31

package/dist/components/demos/index.js

@@ -1327,14 +1327,244 @@ function CounterDemo() {
 }
 var CounterDemo_default = CounterDemo;
 
-// src/components/demos/index.tsx
+// src/lib/google.ts
+import { Client, PlaceAutocompleteType } from "@googlemaps/google-maps-services-js";
+var client = new Client();
+var autocomplete = async (input, key) => {
+  try {
+    const response = await client.placeAutocomplete({
+      params: { input, key, types: PlaceAutocompleteType.address }
+    });
+    return response.data.predictions;
+  } catch (error) {
+    console.error(error);
+  }
+};
+var fetchLocation = async (place, key) => {
+  try {
+    if (place.place_id) {
+      const placeDetails = await getPlaceDetails(place.place_id, key);
+      if (placeDetails) return placeDetails;
+    }
+    if (place.address) {
+      const result = await geocode(place.address, key);
+      const firstAddress = result?.[0];
+      return firstAddress;
+    }
+    return void 0;
+  } catch (error) {
+    console.error("Error fetching location:", error);
+  }
+};
+var getPlaceDetails = async (place_id, key) => {
+  try {
+    const response = await client.placeDetails({
+      params: { place_id, key }
+    });
+    return response.data.result;
+  } catch (error) {
+    console.error(error);
+  }
+};
+var geocode = async (address, key) => {
+  try {
+    const response = await client.geocode({
+      params: { address, key }
+    });
+    return response.data.results;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// src/components/ui/PlacesQueryInput.tsx
+import { CircleX as CircleX2, LoaderCircle } from "lucide-react";
+import { useState as useState6, useCallback, useRef as useRef2, useEffect as useEffect4 } from "react";
 import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function PlacesQueryInput({
+  apiKey,
+  selected,
+  onSelect,
+  className
+}) {
+  const [predictions, setPredictions] = useState6(null);
+  const [input, setInput] = useState6(selected?.description ?? "");
+  const [isLoadingPredictions, setIsLoadingPredictions] = useState6(false);
+  const [shouldOpenUpward, setShouldOpenUpward] = useState6(false);
+  const timeoutRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const debouncedAutocomplete = useCallback((value) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(async () => {
+      if (value.length > 2) {
+        setIsLoadingPredictions(true);
+        const fetchedPredictions = await autocomplete(value, apiKey);
+        fetchedPredictions && setIsLoadingPredictions(false);
+        setPredictions(fetchedPredictions ?? []);
+      } else {
+        setPredictions(null);
+      }
+    }, 300);
+  }, []);
+  const handleInputChange = (value) => {
+    setInput(value);
+    debouncedAutocomplete(value);
+  };
+  const handleSelect = (prediction) => {
+    onSelect(prediction);
+    setPredictions(null);
+    setInput(prediction.description);
+  };
+  const handleClear = () => {
+    onSelect();
+    setPredictions(null);
+    setInput("");
+  };
+  const handleBlur = () => setTimeout(() => setPredictions(null), 200);
+  useEffect4(() => {
+    const checkDropdownPosition = () => {
+      if (inputRef.current) {
+        const rect = inputRef.current.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        setShouldOpenUpward(rect.bottom + 200 > windowHeight);
+      }
+    };
+    checkDropdownPosition();
+    window.addEventListener("resize", checkDropdownPosition);
+    return () => window.removeEventListener("resize", checkDropdownPosition);
+  }, []);
+  return /* @__PURE__ */ jsx21("div", { className: cn("relative w-full", className), ref: inputRef, onBlur: handleBlur, children: /* @__PURE__ */ jsxs14(Command, { children: [
+    /* @__PURE__ */ jsxs14("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx21(
+        CommandInput,
+        {
+          placeholder: "Type an address to search...",
+          value: input,
+          onValueChange: handleInputChange,
+          className: "truncate pr-8"
+        }
+      ),
+      isLoadingPredictions && /* @__PURE__ */ jsx21(LoaderCircle, { className: "absolute inset-y-0 right-2 my-auto flex h-8 w-8 animate-spin items-center justify-center rounded-full text-green-100" }),
+      input && /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          className: "absolute inset-y-0 right-2 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+          onClick: handleClear,
+          children: /* @__PURE__ */ jsx21(CircleX2, { className: "h-4 w-4 text-green-100" })
+        }
+      )
+    ] }),
+    predictions && /* @__PURE__ */ jsxs14(
+      CommandList,
+      {
+        className: cn(
+          "absolute z-50 w-full rounded-md border bg-white shadow-lg",
+          shouldOpenUpward ? "bottom-full" : "top-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsx21(CommandEmpty, { children: "No results" }),
+          /* @__PURE__ */ jsx21(CommandGroup, { children: predictions.map((prediction) => /* @__PURE__ */ jsx21(
+            CommandItem,
+            {
+              onSelect: () => handleSelect(prediction),
+              className: "truncate",
+              children: prediction.description
+            },
+            prediction.place_id
+          )) })
+        ]
+      }
+    )
+  ] }) });
+}
+var PlacesQueryInput_default = PlacesQueryInput;
+
+// src/components/demos/PlacesQueryInputDemo.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+function PlacesQueryInputDemo() {
+  const [selected, setSelected] = useState7();
+  return /* @__PURE__ */ jsxs15("div", { className: "flex h-24 flex-col p-4", children: [
+    /* @__PURE__ */ jsx22(
+      PlacesQueryInput_default,
+      {
+        className: "max-w-96",
+        apiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? "",
+        selected,
+        onSelect: setSelected
+      }
+    ),
+    /* @__PURE__ */ jsx22("h3", { className: "px-3", children: selected?.description })
+  ] });
+}
+var PlacesQueryInputDemo_default = PlacesQueryInputDemo;
+
+// src/components/ui/MapComponent.tsx
+import { APIProvider, Map, AdvancedMarker, Pin } from "@vis.gl/react-google-maps";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function MapComponent({ apiKey, mapId, position, className, zoom = 15 }) {
+  const defaultPosition = { lat: 40.715021, lng: -74.00459 };
+  const defaultZoom = 11;
+  return /* @__PURE__ */ jsx23(APIProvider, { apiKey, children: /* @__PURE__ */ jsx23("div", { className: cn("h-screen max-w-full", className), children: /* @__PURE__ */ jsx23(
+    Map,
+    {
+      zoom: position ? zoom : defaultZoom,
+      center: position || defaultPosition,
+      mapId,
+      keyboardShortcuts: false,
+      disableDefaultUI: true,
+      children: position && /* @__PURE__ */ jsx23(AdvancedMarker, { position, children: /* @__PURE__ */ jsx23(Pin, { background: "#0B5441", borderColor: "#EBFDF1", glyphColor: "#D4F500" }) })
+    }
+  ) }) });
+}
+var MapComponent_default = MapComponent;
+
+// src/components/demos/MapComponentDemo.tsx
+import { useEffect as useEffect5, useState as useState8 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var API_KEY = process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? "";
+var MAP_ID = process.env.NEXT_PUBLIC_GOOGLE_MAP_ID ?? "";
+function MapComponentDemo() {
+  const [position, setPosition] = useState8();
+  const place = {
+    place_id: "ChIJaXQRs6lZwokRY6EFpJnhNNE",
+    // Empire State Building Place ID
+    address: "Empire State Building, New York, NY, USA"
+  };
+  useEffect5(() => {
+    fetchLocation(place, API_KEY).then((location) => {
+      if (location) {
+        const { lat, lng } = location.geometry?.location ?? {};
+        if (!lat || !lng) return;
+        setPosition({ lat, lng });
+      }
+    });
+  }, []);
+  return /* @__PURE__ */ jsx24(
+    MapComponent_default,
+    {
+      apiKey: API_KEY,
+      mapId: MAP_ID,
+      className: "h-[36rem] w-[36rem] p-4",
+      position
+    }
+  );
+}
+var MapComponentDemo_default = MapComponentDemo;
+
+// src/components/demos/index.tsx
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function Demos() {
-  return /* @__PURE__ */ jsxs14("div", { children: [
-    /* @__PURE__ */ jsx21(ComboboxDemo_default, {}),
-    /* @__PURE__ */ jsx21(SelectDemo_default, {}),
-    /* @__PURE__ */ jsx21(InputDemo_default, {}),
-    /* @__PURE__ */ jsx21(CounterDemo_default, {})
+  return /* @__PURE__ */ jsxs16("div", { children: [
+    /* @__PURE__ */ jsx25(ComboboxDemo_default, {}),
+    /* @__PURE__ */ jsx25(SelectDemo_default, {}),
+    /* @__PURE__ */ jsx25(InputDemo_default, {}),
+    /* @__PURE__ */ jsx25(CounterDemo_default, {}),
+    /* @__PURE__ */ jsx25(PlacesQueryInputDemo_default, {}),
+    /* @__PURE__ */ jsx25(MapComponentDemo_default, {})
   ] });
 }
 var demos_default = Demos;