@memori.ai/memori-react 6.1.6 → 6.2.0

package/src/components/VenueWidget/__snapshots__/VenueWidget.test.tsx.snap

@@ -0,0 +1,335 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders VenueWidget with venue set, exact location 1`] = `
+<div>
+  <fieldset
+    class="memori--venue-widget"
+  >
+    <legend
+      class="sr-only"
+    >
+      Venue
+    </legend>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <div
+        class="memori--venue-widget__geosuggest"
+      >
+        <div
+          class="memori--venue-widget-search"
+        >
+          <input
+            aria-expanded="false"
+            class="memori--venue-widget-search--input"
+            data-headlessui-state=""
+            id="headlessui-combobox-input-:r1:"
+            placeholder="searchVenue"
+            role="combobox"
+            type="text"
+          />
+        </div>
+        <button
+          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
+        >
+          write_and_speak.useMyPosition
+        </button>
+      </div>
+    </div>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <p
+        class="memori--venue--widget__place-name"
+      >
+        <strong>
+          venue
+        </strong>
+        : 
+        Altedo, Bologna, Italy
+      </p>
+      <div
+        class="memori--venue-widget__map"
+      >
+        <div
+          data-testid="MapContainer"
+        >
+          <div
+            data-testid="TileLayer"
+          />
+          <div
+            data-testid="Marker"
+          >
+            <div
+              data-testid="Popup"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`renders VenueWidget with venue set, with uncertainty radius 1`] = `
+<div>
+  <fieldset
+    class="memori--venue-widget"
+  >
+    <legend
+      class="sr-only"
+    >
+      Venue
+    </legend>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <div
+        class="memori--venue-widget__geosuggest"
+      >
+        <div
+          class="memori--venue-widget-search"
+        >
+          <input
+            aria-expanded="false"
+            class="memori--venue-widget-search--input"
+            data-headlessui-state=""
+            id="headlessui-combobox-input-:r2:"
+            placeholder="searchVenue"
+            role="combobox"
+            type="text"
+          />
+        </div>
+        <button
+          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
+        >
+          write_and_speak.useMyPosition
+        </button>
+      </div>
+    </div>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <p
+        class="memori--venue--widget__place-name"
+      >
+        <strong>
+          venue
+        </strong>
+        : 
+        Altedo, Bologna, Italy
+      </p>
+      <div
+        class="memori--venue-widget__map"
+      >
+        <div
+          data-testid="MapContainer"
+        >
+          <div
+            data-testid="TileLayer"
+          />
+          <div
+            data-testid="Marker"
+          >
+            <div
+              data-testid="Popup"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`renders VenueWidget without gps button unchanged 1`] = `
+<div>
+  <fieldset
+    class="memori--venue-widget"
+  >
+    <legend
+      class="sr-only"
+    >
+      Venue
+    </legend>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <div
+        class="memori--venue-widget__geosuggest"
+      >
+        <div
+          class="memori--venue-widget-search"
+        >
+          <input
+            aria-expanded="false"
+            class="memori--venue-widget-search--input"
+            data-headlessui-state=""
+            id="headlessui-combobox-input-:r4:"
+            placeholder="searchVenue"
+            role="combobox"
+            type="text"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <p
+        class="memori--venue--widget__place-name"
+      >
+        <strong>
+          venue
+        </strong>
+        : 
+        Altedo, Bologna, Italy
+      </p>
+      <div
+        class="memori--venue-widget__map"
+      >
+        <div
+          data-testid="MapContainer"
+        >
+          <div
+            data-testid="TileLayer"
+          />
+          <div
+            data-testid="Marker"
+          >
+            <div
+              data-testid="Popup"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`renders VenueWidget without uncertainty unchanged 1`] = `
+<div>
+  <fieldset
+    class="memori--venue-widget"
+  >
+    <legend
+      class="sr-only"
+    >
+      Venue
+    </legend>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <div
+        class="memori--venue-widget__geosuggest"
+      >
+        <div
+          class="memori--venue-widget-search"
+        >
+          <input
+            aria-expanded="false"
+            class="memori--venue-widget-search--input"
+            data-headlessui-state=""
+            id="headlessui-combobox-input-:r3:"
+            placeholder="searchVenue"
+            role="combobox"
+            type="text"
+          />
+        </div>
+        <button
+          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
+        >
+          write_and_speak.useMyPosition
+        </button>
+      </div>
+    </div>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <p
+        class="memori--venue--widget__place-name"
+      >
+        <strong>
+          venue
+        </strong>
+        : 
+        Altedo, Bologna, Italy
+      </p>
+      <div
+        class="memori--venue-widget__map"
+      >
+        <div
+          data-testid="MapContainer"
+        >
+          <div
+            data-testid="TileLayer"
+          />
+          <div
+            data-testid="Marker"
+          >
+            <div
+              data-testid="Popup"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`renders empty VenueWidget unchanged 1`] = `
+<div>
+  <fieldset
+    class="memori--venue-widget"
+  >
+    <legend
+      class="sr-only"
+    >
+      Venue
+    </legend>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <div
+        class="memori--venue-widget__geosuggest"
+      >
+        <div
+          class="memori--venue-widget-search"
+        >
+          <input
+            aria-expanded="false"
+            class="memori--venue-widget-search--input"
+            data-headlessui-state=""
+            id="headlessui-combobox-input-:r0:"
+            placeholder="searchVenue"
+            role="combobox"
+            type="text"
+          />
+        </div>
+        <button
+          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
+        >
+          write_and_speak.useMyPosition
+        </button>
+      </div>
+    </div>
+    <div
+      class="memori--venue-widget__form-item"
+    >
+      <div
+        class="memori--venue-widget__map"
+      >
+        <div
+          data-testid="MapContainer"
+        >
+          <div
+            data-testid="TileLayer"
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;

package/src/components/ui/Select.tsx

@@ -6,6 +6,7 @@ import SelectIcon from '../icons/SelectIcon';
 export interface Props<T = any> {
   className?: string;
   value?: T;
+  name?: string;
   displayValue?: string;
   onChange: (value: T) => void;
   options: { value: T; label: any }[];
@@ -17,6 +18,7 @@ export interface Props<T = any> {
 const Select = ({
   className,
   value,
+  name,
   displayValue,
   options,
   onChange,
@@ -32,7 +34,7 @@ const Select = ({
           onChange(value);
         }}
         disabled={disabled}
-        name="day"
+        name={name}
       >
         {label && (
           <Listbox.Label className="memori-select--label">

package/src/components/ui/__snapshots__/Select.test.tsx.snap

@@ -5,14 +5,6 @@ exports[`renders Select disabled unchanged 1`] = `
   <div
     class="memori-select"
   >
-    <input
-      hidden=""
-      name="day"
-      readonly=""
-      style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-      type="hidden"
-      value="2"
-    />
     <label
       class="memori-select--label"
       data-headlessui-state="disabled"
@@ -113,14 +105,6 @@ exports[`renders Select with custom value display unchanged 1`] = `
   <div
     class="memori-select"
   >
-    <input
-      hidden=""
-      name="day"
-      readonly=""
-      style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-      type="hidden"
-      value="2"
-    />
     <label
       class="memori-select--label"
       data-headlessui-state=""
@@ -223,14 +207,6 @@ exports[`renders Select with value unchanged 1`] = `
   <div
     class="memori-select"
   >
-    <input
-      hidden=""
-      name="day"
-      readonly=""
-      style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-      type="hidden"
-      value="2"
-    />
     <label
       class="memori-select--label"
       data-headlessui-state=""

package/src/helpers/utils.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 
 export const hasTouchscreen = (): boolean => {
   let hasTouchScreen = false;
@@ -91,6 +91,41 @@ export function useDebounce<T>(value: T, delay: number): T {
   return debouncedValue;
 }
 
+export function useDebounceFn<T extends (...args: any) => any>(
+  fn: T,
+  delay: number
+): T {
+  const timeoutId = useRef<number | undefined>();
+  const originalFn = useRef<T | null>(null);
+
+  useEffect(() => {
+    originalFn.current = fn;
+    return () => {
+      originalFn.current = null;
+    };
+  }, [fn]);
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeoutId.current);
+    };
+  }, []);
+
+  return useMemo<T>(
+    () =>
+      ((...args: unknown[]) => {
+        clearTimeout(timeoutId.current);
+
+        timeoutId.current = window.setTimeout(() => {
+          if (originalFn.current) {
+            originalFn.current(...args);
+          }
+        }, delay);
+      }) as unknown as T,
+    [delay]
+  );
+}
+
 export const stripDuplicates = (text: string) => {
   if (
     text

package/src/helpers/venue.ts

@@ -0,0 +1,36 @@
+export const EARTH_RADIUS_AT_45_DEGRESS = (6357.0 + 6378.0) / 2.0;
+export const DEGREES_TO_RADIANS = Math.PI / 180;
+
+export const getUncertaintyByViewport = (
+  bouningBox:
+    | [number, number, number, number]
+    | [string, string, string, string]
+) => {
+  // https://nominatim.org/release-docs/develop/api/Output/#boundingbox
+  const [minLat, maxLat, minLng, maxLng] =
+    typeof bouningBox[0] === 'string'
+      ? (bouningBox as string[]).map(parseFloat)
+      : (bouningBox as number[]);
+
+  // Convert latitude and longitude to radians
+  const phi1 = minLat * DEGREES_TO_RADIANS;
+  const lambda1 = minLng * DEGREES_TO_RADIANS;
+
+  const phi2 = maxLat * DEGREES_TO_RADIANS;
+  const lambda2 = maxLng * DEGREES_TO_RADIANS;
+
+  // Compute distance using the haversine formula
+  // https://en.wikipedia.org/wiki/Haversine_formula
+  const angle =
+    2.0 *
+    Math.asin(
+      Math.sqrt(
+        Math.sin((phi2 - phi1) / 2.0) * Math.sin((phi2 - phi1) / 2.0) +
+          Math.cos(phi1) *
+            Math.cos(phi2) *
+            Math.sin((lambda2 - lambda1) / 2.0) *
+            Math.sin((lambda2 - lambda1) / 2.0)
+      )
+    );
+  return EARTH_RADIUS_AT_45_DEGRESS * angle;
+};

package/src/locales/en.json

@@ -31,6 +31,11 @@
   "copyToClipboard": "Copy to clipboard",
   "showOriginalText": "Show original",
   "showTranslatedText": "Show translation",
+  "exactPosition": "Exact position",
+  "uncertain": "Uncertain",
+  "nothingFound": "Nothing found",
+  "venue": "Venue",
+  "searchVenue": "Search venue...",
   "memoriBlockedTitle": "Blocked",
   "memoriBlockedUntil": "Memori blocked until {{date}}",
   "memoriBlockedAnon": "Currently \"{{name}}\" can't answer, come back here on {{date}}",

package/src/locales/it.json

@@ -31,6 +31,11 @@
   "copyToClipboard": "Copia negli appunti",
   "showOriginalText": "Mostra originale",
   "showTranslatedText": "Mostra traduzione",
+  "exactPosition": "Posizione esatta",
+  "uncertain": "Incertezza",
+  "nothingFound": "Nessun risultato",
+  "venue": "Luogo",
+  "searchVenue": "Cerca luogo...",
   "memoriBlockedTitle": "Bloccato",
   "memoriBlockedUntil": "Memori bloccato fino al {{date}}",
   "memoriBlockedAnon": "Attualmente \"{{name}}\" non può rispondere, torna qui il {{date}}",

package/src/mocks/data.ts

@@ -8,6 +8,7 @@ import {
   KnownFact,
   ExpertReference,
   User,
+  Venue,
 } from '@memori.ai/memori-api-client/dist/types';
 
 export const sessionID = '131165be-9d1a-42fb-a3ce-e8f86d40c88f';
@@ -326,3 +327,10 @@ export const expertReference: ExpertReference = {
   lastChangeTimestamp: '2023-12-01T13:44:04.832072Z',
   lastChangeSessionID: '0ce713c0-c8f1-4aed-a2a6-40f81c06854f',
 };
+
+export const venue: Venue = {
+  latitude: 44.66579,
+  longitude: 11.48823,
+  placeName: 'Altedo, Bologna, Italy',
+  uncertainty: 2,
+};

package/src/styles.css

@@ -40,6 +40,7 @@
 @import url('./components/AgeVerificationModal/AgeVerificationModal.css');
 @import url('./components/KnownFacts/KnownFacts.css');
 @import url('./components/LoginDrawer/LoginDrawer.css');
+@import url('./components/VenueWidget/VenueWidget.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=lexend-deca:200,400,700');