@memori.ai/memori-react 6.1.7 → 6.2.0

package/src/components/VenueWidget/VenueWidget.css

@@ -0,0 +1,142 @@
+.memori--venue-widget {
+    padding: 0;
+    border: 0;
+    margin: 0;
+}
+
+.memori--venue-widget__uncertainty {
+    margin-inline: 0.5em;
+}
+
+.memori--venue-widget__map {
+    width: 100%;
+    height: 250px;
+}
+
+.memori--venue-widget__form-item {
+    margin-bottom: 1rem;
+}
+
+.memori--venue-widget__select-label {
+    display: inline-flex;
+    align-items: center;
+}
+
+.memori--venue-widget__geosuggest {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.memori--venue-widget-search {
+    z-index: 1001;
+}
+
+.memori--venue-widget-search--label {
+    display: inline-block;
+    margin-bottom: 0.25rem;
+}
+
+.memori--venue-widget-search input,
+.memori--venue-widget-search .memori--venue-widget-search--input {
+    flex: 1 1 auto;
+    padding: 10px;
+    border: 1px solid var(--memori-button-border-color, #ccc);
+    border-radius: 5px;
+    margin: 0;
+    font-size: 16px;
+    line-height: 1.5;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.memori--venue-widget-search .memori--venue-widget-search--input.memori--venue-widget-search--input-disabled {
+    background-color: #f7fafc;
+    color: #a0aec0;
+    cursor: not-allowed;
+}
+
+.memori--venue-widget-search .memori--venue-widget-search--input:focus,
+.memori--venue-widget-search button:focus,
+.memori--venue-widget-search input:focus {
+    border-color: var(--memori-primary);
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+    outline: none;
+}
+
+.memori--venue-widget-search a {
+    color: var(--memori-primary);
+    text-decoration: underline;
+}
+
+ul.memori--venue-widget-search--options {
+    position: absolute;
+    z-index: 1;
+    overflow: auto;
+    width: 100%;
+    max-width: min(18rem, 30%);
+    max-height: 15rem;
+    padding-top: 0.25rem;
+    padding-right: 0;
+    padding-bottom: 0.25rem;
+    padding-left: 0;
+    border-radius: 0.375rem;
+    margin-top: 0.25rem;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    background: #fff;
+    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
+        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
+    list-style: none;
+}
+
+@media (min-width: 640px) {
+    .memori--venue-widget-search--options {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+    }
+}
+
+.memori--venue-widget-search--option {
+    position: relative;
+    padding-top: 0.5rem;
+    padding-right: 1rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    color: rgb(17 24 39/1);
+    touch-action: none;
+    user-select: none;
+}
+
+li.memori--venue-widget-search--option {
+    cursor: pointer;
+    touch-action: initial;
+}
+
+li.memori--venue-widget-search--option:hover,
+li.memori--venue-widget-search--option:focus {
+    background-color: #f7fafc;
+}
+
+li.memori--venue-widget-search--option:focus {
+    outline: 2px solid #63b3ed;
+    outline-offset: 2px;
+}
+
+li.memori--venue-widget-search--option--selected {
+    background-color: #f7fafc;
+}
+
+li.memori--venue-widget-search--option--active {
+    background-color: #f7fafc;
+}
+
+.memori--venue--widget__place-name {
+    margin: 0 0 1rem;
+}
+
+.memori--venue-widget__gps-button {
+    padding: 0.5rem 1rem;
+    margin-left: 1rem;
+}

package/src/components/VenueWidget/VenueWidget.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
+import VenueWidget, { Props } from './VenueWidget';
+import { venue } from '../../mocks/data';
+import './VenueWidget.css';
+
+const meta: Meta = {
+  title: 'Widget/VenueWidget',
+  component: VenueWidget,
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [venue, setVenue] = React.useState(args.venue);
+  return (
+    <I18nWrapper>
+      <VenueWidget {...args} venue={venue} setVenue={setVenue} />
+    </I18nWrapper>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithVenueExactLocartion = Template.bind({});
+WithVenueExactLocartion.args = {
+  venue: {
+    ...venue,
+    uncertainty: 0,
+  },
+};
+
+export const WithVenueUncertainty = Template.bind({});
+WithVenueUncertainty.args = {
+  venue: {
+    ...venue,
+    uncertainty: 2,
+  },
+};
+
+export const WithVenueLargeUncertainty = Template.bind({});
+WithVenueLargeUncertainty.args = {
+  venue: {
+    ...venue,
+    uncertainty: 20,
+  },
+};
+
+export const WithUncertaintyUI = Template.bind({});
+WithUncertaintyUI.args = {
+  venue,
+  showUncertainty: true,
+};
+
+export const WithoutGpsButton = Template.bind({});
+WithoutGpsButton.args = {
+  venue,
+  showGpsButton: false,
+};

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import VenueWidget from './VenueWidget';
+import { venue } from '../../mocks/data';
+
+it('renders empty VenueWidget unchanged', () => {
+  const { container } = render(<VenueWidget setVenue={jest.fn()} />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders VenueWidget with venue set, exact location', () => {
+  const { container } = render(
+    <VenueWidget
+      venue={{
+        ...venue,
+        uncertainty: 0,
+      }}
+      setVenue={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders VenueWidget with venue set, with uncertainty radius', () => {
+  const { container } = render(
+    <VenueWidget
+      venue={{
+        ...venue,
+        uncertainty: 10,
+      }}
+      setVenue={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders VenueWidget without uncertainty unchanged', () => {
+  const { container } = render(
+    <VenueWidget venue={venue} setVenue={jest.fn()} showUncertainty={false} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders VenueWidget without gps button unchanged', () => {
+  const { container } = render(
+    <VenueWidget venue={venue} setVenue={jest.fn()} showGpsButton={false} />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/VenueWidget/VenueWidget.tsx

@@ -0,0 +1,430 @@
+import { Venue } from '@memori.ai/memori-api-client/dist/types';
+import { useEffect, useState, useCallback, Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getUncertaintyByViewport } from '../../helpers/venue';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
+import { useLeafletContext } from '@react-leaflet/core';
+import L from 'leaflet';
+import toast from 'react-hot-toast';
+import Select from '../ui/Select';
+import Button from '../ui/Button';
+import { useDebounceFn } from '../../helpers/utils';
+import { Combobox, Transition } from '@headlessui/react';
+import cx from 'classnames';
+import Spin from '../ui/Spin';
+
+export type NominatimItem = {
+  place_id: number;
+  lat: number;
+  lon: number;
+  display_name: string;
+  type: string;
+  category: string;
+  importance: number;
+  place_rank: number;
+  address?: {
+    house_number?: string;
+    road?: string;
+    hamlet?: string;
+    village?: string;
+    suburb?: string;
+    town?: string;
+    city?: string;
+    municipality?: string;
+    county?: string;
+    state?: string;
+    country: string;
+  };
+  boundingbox: [number, number, number, number];
+};
+
+export interface Props {
+  venue?: Venue;
+  setVenue: (venue?: Venue) => void;
+  showUncertainty?: boolean;
+  showGpsButton?: boolean;
+}
+
+const Circle = ({
+  center,
+  size,
+}: {
+  center: [number, number];
+  size: number;
+}) => {
+  const context = useLeafletContext();
+
+  useEffect(() => {
+    const square = new L.Circle(center, size);
+    const container = context.layerContainer || context.map;
+    container.addLayer(square);
+
+    return () => {
+      container.removeLayer(square);
+    };
+  });
+
+  return null;
+};
+
+const CenterAndZoomUpdater = ({
+  center,
+  uncertainty,
+}: {
+  center: [number, number];
+  uncertainty?: number;
+}) => {
+  const [init, setInit] = useState(false);
+  const map = useMap();
+
+  const updateView = useCallback(() => {
+    let zoom =
+      uncertainty !== undefined
+        ? Math.round(Math.log2((10000 * 1000) / uncertainty))
+        : map.getZoom();
+    map.setView(center, zoom);
+  }, [center, uncertainty, map]);
+
+  useEffect(() => {
+    if (!init) {
+      updateView();
+      setInit(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    updateView();
+  }, [center, uncertainty, updateView]);
+
+  return null;
+};
+
+let DefaultIcon = L.icon({
+  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12.5, 20.5],
+  shadowAnchor: [12.5, 20.5],
+});
+
+L.Marker.prototype.options.icon = DefaultIcon;
+
+const getPlaceName = (venue?: NominatimItem) => {
+  let placeName = 'Position';
+
+  if (venue?.address) {
+    placeName = [
+      venue.address.village || venue.address.suburb,
+      venue.address.town ||
+        venue.address.city ||
+        venue.address.county ||
+        venue.address.state,
+      venue.address.country,
+    ]
+      .filter(Boolean)
+      .join(', ');
+  } else if (venue?.display_name) {
+    placeName = venue.display_name;
+  }
+
+  return placeName;
+};
+
+const VenueWidget = ({
+  venue,
+  setVenue,
+  showUncertainty = false,
+  showGpsButton = true,
+}: Props) => {
+  const { t } = useTranslation();
+  const [isClient, setIsClient] = useState(false);
+  const [updatingPosition, setUpdatingPosition] = useState(false);
+
+  const [fetching, setFetching] = useState(false);
+  const [query, setQuery] = useState('');
+  const [suggestions, setSuggestions] = useState<NominatimItem[]>([]);
+
+  const getGpsPosition = async () => {
+    setUpdatingPosition(true);
+
+    navigator.geolocation.getCurrentPosition(
+      async coords => {
+        try {
+          const result = await fetch(
+            `https://nominatim.openstreetmap.org/reverse?lat=${coords.coords.latitude}&lon=${coords.coords.longitude}&format=jsonv2&addressdetails=1`
+          );
+          const response = (await result.json()) as NominatimItem;
+
+          const placeName = getPlaceName(response);
+
+          setVenue({
+            latitude: coords.coords.latitude,
+            longitude: coords.coords.longitude,
+            placeName: placeName,
+            uncertainty: coords.coords.accuracy / 1000,
+          });
+        } catch (e) {
+          let err = e as Error;
+          console.error('[POSITION ERROR]', err);
+          if (err?.message) toast.error(err.message);
+
+          setVenue({
+            latitude: coords.coords.latitude,
+            longitude: coords.coords.longitude,
+            placeName: 'Position',
+            uncertainty: coords.coords.accuracy / 1000,
+          });
+        }
+
+        setUpdatingPosition(false);
+      },
+      err => {
+        console.error('[POSITION ERROR]', err);
+        toast.error(err.message);
+        setUpdatingPosition(false);
+      }
+    );
+  };
+
+  const handleSearch = useDebounceFn(async (value: string) => {
+    setFetching(true);
+
+    try {
+      let response = await fetch(
+        `https://nominatim.openstreetmap.org/search?q=${value}&format=jsonv2&limit=5&addressdetails=1`
+      );
+      let data = await response.json();
+      setSuggestions(data);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setFetching(false);
+    }
+  }, 1000);
+
+  const handleChange = (value: NominatimItem) => {
+    console.log(value);
+    const placeName = getPlaceName(value);
+
+    setVenue({
+      latitude: value.lat,
+      longitude: value.lon,
+      placeName: placeName,
+      uncertainty: value?.boundingbox
+        ? getUncertaintyByViewport(value.boundingbox)
+        : 2,
+    } as Venue);
+  };
+
+  const onQueryChange = (value: string) => {
+    setQuery(value);
+    handleSearch(value);
+  };
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    const leafletCSS = document.createElement('link');
+    leafletCSS.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
+    leafletCSS.rel = 'stylesheet';
+    leafletCSS.integrity =
+      'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';
+    leafletCSS.crossOrigin = '';
+
+    document.head.appendChild(leafletCSS);
+
+    return () => {
+      document.head.removeChild(leafletCSS);
+    };
+  }, []);
+
+  return (
+    <fieldset className="memori--venue-widget">
+      <legend className="sr-only">Venue</legend>
+      <div className="memori--venue-widget__form-item">
+        <div className="memori--venue-widget__geosuggest">
+          {updatingPosition ? (
+            <p>{t('write_and_speak.updatingPosition')}</p>
+          ) : (
+            <>
+              <div className="memori--venue-widget-search">
+                <Combobox
+                  value={
+                    (venue
+                      ? {
+                          place_id: 0,
+                          lat: venue?.latitude,
+                          lon: venue?.longitude,
+                          display_name: venue?.placeName,
+                        }
+                      : undefined) as NominatimItem | undefined
+                  }
+                  onChange={handleChange}
+                >
+                  <Combobox.Input
+                    className="memori--venue-widget-search--input"
+                    displayValue={(i: NominatimItem) => getPlaceName(i)}
+                    placeholder={t('searchVenue')}
+                    onChange={e => onQueryChange(e.target.value)}
+                  />
+                  {(fetching ||
+                    suggestions.length > 0 ||
+                    (suggestions.length === 0 && query !== '')) && (
+                    <Transition
+                      as={Fragment}
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <Combobox.Options className="memori--venue-widget-search--options">
+                        {fetching ? (
+                          <Spin spinning>
+                            <center className="memori--venue-widget-search--option">
+                              {t('loading')}...
+                            </center>
+                          </Spin>
+                        ) : suggestions.length === 0 && query !== '' ? (
+                          <center className="memori--venue-widget-search--option">
+                            {t('nothingFound')}
+                          </center>
+                        ) : (
+                          suggestions?.map(s => (
+                            <Combobox.Option
+                              as={Fragment}
+                              key={s.place_id}
+                              value={s}
+                            >
+                              {({ active, selected }) => (
+                                <li
+                                  className={cx(
+                                    'memori--venue-widget-search--option',
+                                    {
+                                      'memori--venue-widget-search--option-active':
+                                        active,
+                                      'memori--venue-widget-search--option-selected':
+                                        selected,
+                                    }
+                                  )}
+                                >
+                                  {s.display_name}
+                                </li>
+                              )}
+                            </Combobox.Option>
+                          ))
+                        )}
+                      </Combobox.Options>
+                    </Transition>
+                  )}
+                </Combobox>
+              </div>
+              {showGpsButton && (
+                <Button
+                  className="memori--venue-widget__gps-button"
+                  outlined
+                  loading={updatingPosition}
+                  onClick={() => {
+                    setUpdatingPosition(true);
+                    getGpsPosition();
+                  }}
+                >
+                  {t('write_and_speak.useMyPosition')}
+                </Button>
+              )}
+            </>
+          )}
+        </div>
+        {showUncertainty && (
+          <label className="memori--venue-widget__select-label">
+            <span>{t('uncertain')}: </span>
+            <select
+              className="memori-select--button memori--venue-widget__uncertainty"
+              value={parseFloat((venue?.uncertainty ?? 0).toFixed(2))}
+              disabled={
+                !venue ||
+                !venue.placeName ||
+                !venue.latitude ||
+                !venue.longitude
+              }
+              onChange={e => {
+                setVenue({
+                  ...venue,
+                  uncertainty: parseFloat(e.target.value),
+                } as Venue);
+              }}
+            >
+              {venue?.uncertainty &&
+                ![0, 1, 2, 5, 10, 20, 50, 100].includes(venue.uncertainty) && (
+                  <option value={venue.uncertainty}>
+                    {venue.uncertainty} Km
+                  </option>
+                )}
+              <option value={0}>{t('exactPosition')}</option>
+              <option value={1}>1 km</option>
+              <option value={2}>2 km</option>
+              <option value={5}>5 km</option>
+              <option value={10}>10 km</option>
+              <option value={20}>20 km</option>
+              <option value={50}>50 km</option>
+              <option value={100}>100 km</option>
+            </select>
+          </label>
+        )}
+      </div>
+      <div className="memori--venue-widget__form-item">
+        {venue?.placeName && (
+          <p className="memori--venue--widget__place-name">
+            <strong>{t('venue')}</strong>: {venue.placeName}
+          </p>
+        )}
+        <div className="memori--venue-widget__map">
+          {isClient && (
+            <MapContainer
+              className="memori--venue-widget__map"
+              center={
+                venue?.latitude && venue?.longitude
+                  ? [venue.latitude, venue.longitude]
+                  : [44.66579, 11.48823]
+              }
+              zoom={13}
+              scrollWheelZoom
+            >
+              <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              />
+              <CenterAndZoomUpdater
+                center={
+                  venue?.latitude && venue?.longitude
+                    ? [venue.latitude, venue.longitude]
+                    : [44.66579, 11.48823]
+                }
+                uncertainty={(venue?.uncertainty ?? 0) * 1000}
+              />
+              {venue?.latitude && venue?.longitude && (
+                <Marker
+                  position={[venue.latitude, venue.longitude]}
+                  icon={DefaultIcon}
+                >
+                  <Popup>{venue.placeName ?? ''}</Popup>
+                </Marker>
+              )}
+              {venue?.latitude &&
+                venue?.longitude &&
+                venue?.uncertainty !== undefined && (
+                  <Circle
+                    center={[venue.latitude, venue.longitude]}
+                    size={venue.uncertainty * 1000}
+                  />
+                )}
+            </MapContainer>
+          )}
+        </div>
+      </div>
+    </fieldset>
+  );
+};
+
+export default VenueWidget;