@performant-software/core-data 1.2.0-beta.2 → 1.2.0-beta.20

package/types/components/RelatedOrganizations.js.flow

@@ -2,18 +2,25 @@
 
 import { Building2 } from 'lucide-react';
 import React from 'react';
+import i18n from '../i18n/i18n';
 import type { AnnotationPage } from '../types/AnnotationPage';
 import type { Organization } from '../types/Organization';
 import RelatedList from './RelatedList';
 
 type Props = {
+  /**
+   * The annotation page containing the Core Data organizations to render.
+   */
   data: AnnotationPage<Organization>
 };
 
+/**
+ * This component renders the related Core Data organizations records.
+ */
 const RelatedOrganizations = (props: Props) => (
   <RelatedList
     data={props.data}
-    emptyMessage={'No related organization'}
+    emptyMessage={i18n.t('RelatedOrganizations.labels.empty')}
     renderItem={(organization) => (
       <>
         <Building2

package/types/components/RelatedPeople.js.flow

@@ -2,18 +2,25 @@
 
 import { UserCircle } from 'lucide-react';
 import React from 'react';
+import i18n from '../i18n/i18n';
 import type { AnnotationPage } from '../types/AnnotationPage';
 import type { Person } from '../types/Person';
 import RelatedList from './RelatedList';
 
 type Props = {
+  /**
+   * The annotation page containing the Core Data people to render.
+   */
   data: AnnotationPage<Person>
 };
 
+/**
+ * This component renders the related Core Data organizations.
+ */
 const RelatedPeople = (props: Props) => (
   <RelatedList
     data={props.data}
-    emptyMessage={'No related people'}
+    emptyMessage={i18n.t('RelatedPeople.labels.empty')}
     renderItem={(person) => (
       <>
         <UserCircle

package/types/components/RelatedPlaces.js.flow

@@ -2,18 +2,25 @@
 
 import { MapPin } from 'lucide-react';
 import React from 'react';
+import i18n from '../i18n/i18n';
 import type { AnnotationPage } from '../types/AnnotationPage';
 import type { Place } from '../types/Place';
 import RelatedList from './RelatedList';
 
 type Props = {
+  /**
+   * The annotation page containing the Core Data places to render.
+   */
   data: AnnotationPage<Place>
 };
 
+/**
+ * This component renders the related Core Data places.
+ */
 const RelatedPlaces = (props: Props) => (
   <RelatedList
     data={props.data}
-    emptyMessage={'No related places'}
+    emptyMessage={i18n.t('RelatedPlaces.labels.empty')}
     renderItem={(place) => (
       <>
         <MapPin

package/types/components/RelatedTaxonomies.js.flow

@@ -2,18 +2,25 @@
 
 import { ListTree } from 'lucide-react';
 import React from 'react';
+import i18n from '../i18n/i18n';
 import type { AnnotationPage } from '../types/AnnotationPage';
 import RelatedList from './RelatedList';
 import type { Taxonomy } from '../types/Taxonomy';
 
 type Props = {
+  /**
+   * The annotation page containing the Core Data taxonomies to render.
+   */
   data: AnnotationPage<Taxonomy>
 };
 
+/**
+ * This component renders the related Core Data taxonomies.
+ */
 const RelatedTaxonomies = (props: Props) => (
   <RelatedList
     data={props.data}
-    emptyMessage={'No related taxonomies'}
+    emptyMessage={i18n.t('RelatedTaxonomies.labels.empty')}
     renderItem={(taxonomy) => (
       <>
         <ListTree

package/types/components/SearchResultsList.js.flow

@@ -0,0 +1,160 @@
+// @flow
+
+import React, { useMemo } from 'react';
+import { Highlight } from 'react-instantsearch';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList } from 'react-window';
+import _ from 'underscore';
+import type { Feature } from '../types/Feature';
+import type { Place } from '../types/typesense/Place';
+import './SearchResultsList.css';
+
+/**
+ * Converts the passed place result to a feature.
+ *
+ * @param result
+ *
+ * @returns {{
+ *   geometry: {coordinates: number[], type: string},
+ *   id: number,
+ *   type:
+ *   string,
+ *   properties: {
+ *     ccode: *[],
+ *     record_id: string,
+ *     names: *,
+ *     name: string,
+ *     id: string,
+ *     title: string,
+ *     type: string,
+ *     uuid: string
+ *   }
+ * }}
+ */
+const toFeature = (result: Place) => ({
+  id: parseInt(result.record_id, 10),
+  type: 'Feature',
+  properties: {
+    id: result.record_id,
+    ccode: [],
+    title: result.name,
+    uuid: result.uuid,
+    record_id: result.record_id,
+    name: result.name,
+    names: _.map(result.names, (toponym) => ({ toponym })),
+    type: result.type
+  },
+  geometry: {
+    type: 'Point',
+    coordinates: result.coordinates.slice().reverse()
+  }
+});
+
+type HitComponentProps = {
+  hit: any,
+  isHovered: boolean,
+  onClick: () => void
+};
+
+const HitComponent = (props: HitComponentProps) => {
+  const { hit } = props;
+
+  const className = useMemo(() => {
+    const classNames = [
+      'h-[5.5em]',
+      'border-b',
+      'flex',
+      'flex-col',
+      'justify-start'
+    ];
+
+    if (props.isHovered) {
+      classNames.add('bg-teal-700/30');
+    }
+
+    return classNames.join(' ');
+  }, [props.isHovered]);
+
+  return (
+    <div
+      className={className}
+    >
+      <button
+        className='py-2 px-3 flex-grow text-left inline-flex flex-col'
+        onClick={props.onClick}
+        type='button'
+      >
+        <Highlight
+          attribute='name'
+          className='line-clamp-2'
+          hit={hit}
+        />
+        <p
+          className='text-muted text-xs line-clamp-1'
+        >
+          <Highlight
+            hit={hit}
+            attribute='names'
+          />
+        </p>
+      </button>
+    </div>
+  );
+};
+
+type Props = {
+  hits: Array<Place>,
+  hover?: Feature<{ id: string }>,
+  onHoverChange: (hover?: Feature<{ id: string }>) => void,
+  onClick: (result: Place) => void
+};
+
+type RowProps = {
+  index: number,
+  style: any
+};
+
+const SearchResultsList = (props: Props) => {
+  const {
+    hits,
+    hover,
+    onClick,
+    onHoverChange
+  } = props;
+
+  const Row = ({ index, style }: RowProps) => {
+    const hit = hits[index];
+    const id = parseInt(hit.record_id, 10);
+
+    return (
+      <div
+        style={style}
+        onPointerEnter={() => onHoverChange(hover?.id === id ? hover : toFeature(hit))}
+        onPointerLeave={() => onHoverChange(undefined)}
+      >
+        <HitComponent
+          hit={hit}
+          isHovered={hover?.id === parseInt(hit?.record_id, 10)}
+          onClick={() => onClick(hit)}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <AutoSizer>
+      {({ height, width }) => (
+        <FixedSizeList
+          height={height}
+          itemCount={hits.length}
+          width={width}
+          itemSize={88}
+        >
+          {Row}
+        </FixedSizeList>
+      )}
+    </AutoSizer>
+  );
+};
+
+export default SearchResultsList;

package/types/i18n/i18n.js.flow

@@ -0,0 +1,26 @@
+// @flow
+
+import i18next from 'i18next';
+
+import en from './en.json';
+
+const resources = {
+  en: {
+    translation: en
+  }
+};
+
+const i18n = i18next.createInstance();
+
+i18n
+  .init({
+    debug: true,
+    fallbackLng: 'en',
+    lng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+    resources
+  });
+
+export default i18n;

package/types/index.js.flow

@@ -1,10 +1,14 @@
 // @flow
 
+// CSS
+import './index.css';
+
 // Components
 export { default as LoadAnimation } from './components/LoadAnimation';
 export { default as MediaGallery } from './components/MediaGallery';
 export { default as PlaceDetailsPanel } from './components/PlaceDetailsPanel';
 export { default as PlaceMarker } from './components/PlaceMarker';
+export { default as PlaceResultsList } from './components/PlaceResultsList';
 export { default as RelatedItemsList } from './components/RelatedItemsList';
 export { default as RelatedList } from './components/RelatedList';
 export { default as RelatedMedia } from './components/RelatedMedia';

package/types/types/Feature.js.flow

@@ -0,0 +1,10 @@
+// @flow
+
+import type { FeatureGeometry } from './FeatureGeometry';
+
+export type Feature = {
+  id: number,
+  type: 'Feature',
+  properties: any,
+  geometry: FeatureGeometry
+};

package/types/types/typesense/Place.js.flow

@@ -0,0 +1,14 @@
+// @flow
+
+export type Place = {
+  uuid: string;
+  record_id: string;
+  type: string;
+  name: string;
+  names: string[];
+  coordinates: number[];
+  geometry: {
+    type: 'Point' | 'GeometryCollection',
+    coordinates: [ number, number ];
+  }
+};

package/webpack.config.js

@@ -1,3 +1,33 @@
 const { configure } = require('@performant-software/webpack-config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
 
-module.exports = configure(__dirname);
+const options = {
+  module: {
+    rules: [{
+      test: /\.(c|le)ss$/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader',
+        'postcss-loader'
+      ],
+      include: [
+        path.resolve(__dirname)
+      ]
+    }]
+  }
+};
+
+const mergeOptions = {
+  module: {
+    rules: {
+      test: /\.(c|le)ss$/,
+      use: {
+        loader: 'match',
+        options: 'replace',
+      },
+    },
+  },
+};
+
+module.exports = configure(__dirname, options, mergeOptions);