@performant-software/core-data 1.2.0-beta.3 → 1.2.0-beta.31

package/src/components/RelatedItemsList.js

@@ -4,25 +4,36 @@ import * as Accordion from '@radix-ui/react-accordion';
 import { AlertCircle, ChevronDown } from 'lucide-react';
 import React from 'react';
 import _ from 'underscore';
+import i18n from '../i18n/i18n';
 import LoadAnimation from './LoadAnimation';
+import type { RelatedItems } from '../types/RelatedItems';
 import RelatedMedia from './RelatedMedia';
 import RelatedOrganizations from './RelatedOrganizations';
 import RelatedPeople from './RelatedPeople';
 import RelatedPlaces from './RelatedPlaces';
 import RelatedTaxonomies from './RelatedTaxonomies';
-import type { RelatedItems } from '../types/RelatedItems';
+import './RelatedItemsList.css';
 
 type Props = {
+  /**
+   * A list of related items.
+   */
   items: Array<RelatedItems>
 };
 
+/**
+ * This component renders the passed list of related items in an accordion fashion.
+ */
 const RelatedItemsList = (props: Props) => {
   if (_.isEmpty(props.items)) {
     return null;
   }
 
   return (
-    <Accordion.Root type='multiple'>
+    <Accordion.Root
+      className='related-items-list'
+      type='multiple'
+    >
       { _.map(props.items, ({ data, error, ...conf }) => (
         <Accordion.Item
           key={conf.endpoint}
@@ -37,7 +48,7 @@ const RelatedItemsList = (props: Props) => {
                 { conf.ui_label }
                 { data && (
                   <span className='ml-1'>
-                    ({ data.items.length })
+                    { i18n.t('RelatedItemsList.labels.count', { count: data.items?.length })}
                   </span>
                 )}
                 { error && (

package/src/components/RelatedList.js

@@ -9,11 +9,25 @@ type Item = {
 };
 
 type Props = {
+  /**
+   * An annotation page containing the list of records to render.
+   */
   data: AnnotationPage<Item>,
-  emptyMessage?: string,
+
+  /**
+   * A message to display when the list is empty.
+   */
+  emptyMessage: string,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
   renderItem: (item: Item) => JSX.Element
 };
 
+/**
+ * This component is a helper component used to structure the lists for the other `Related*` comnponents.
+ */
 const RelatedList = (props: Props) => {
   const { items } = props.data;
 

package/src/components/RelatedMedia.js

@@ -8,14 +8,28 @@ import type { MediaContent } from '../types/MediaContent';
 import MediaGallery from './MediaGallery';
 
 type Props = {
+  /**
+   * The annotation page containing the media content to render.
+   */
   data: AnnotationPage<MediaContent>,
+
+  /**
+   * Media thumbnail height.
+   */
   thumbnailHeight?: number,
+
+  /**
+   * Media thumbnail width.
+   */
   thumbnailWidth?: number
 };
 
 const DEFAULT_THUMBNAIL_HEIGHT = 80;
 const DEFAULT_THUMBNAIL_WIDTH = 80;
 
+/**
+ * This component renders the related Core Data media records as well as a gallery viewer.
+ */
 const RelatedMedia = (props: Props) => {
   const [showGallery, setShowGallery] = useState<MediaContent>();
 

package/src/components/RelatedOrganizations.js

@@ -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/src/components/RelatedPeople.js

@@ -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/src/components/RelatedPlaces.js

@@ -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/src/components/RelatedTaxonomies.js

@@ -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/src/i18n/en.json

@@ -0,0 +1,27 @@
+{
+  "RelatedItemsList": {
+    "labels": {
+      "count": "({{count}})"
+    }
+  },
+  "RelatedOrganizations": {
+    "labels": {
+      "empty": "No related organizations"
+    }
+  },
+  "RelatedPeople": {
+    "labels": {
+      "empty": "No related people"
+    }
+  },
+  "RelatedPlaces": {
+    "labels": {
+      "empty": "No related places"
+    }
+  },
+  "RelatedTaxonomies": {
+    "labels": {
+      "empty": "No related taxonomies"
+    }
+  }
+}

package/src/i18n/i18n.js

@@ -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/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.js

@@ -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/src/types/Feature.js

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

package/src/types/typesense/Place.js

@@ -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/tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/index.css',
+    './src/**/*.js'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        muted: '#0005119e'
+      },
+      fontFamily: {
+        sans: ['-apple-system', 'Roboto', 'sans-serif'],
+        'dm-display': ['DM Serif Display'],
+      },
+    },
+  },
+  plugins: []
+};

package/types/components/MediaGallery.js.flow

@@ -5,7 +5,6 @@ import Viewer from '@samvera/clover-iiif/viewer';
 import { Image, X } from 'lucide-react';
 import React from 'react';
 import type { MediaContent } from '../types/MediaContent';
-
 import './MediaGallery.css';
 
 type Props = {
@@ -30,6 +29,7 @@ type Props = {
  */
 const MediaGallery = (props: Props) => (
   <Dialog.Root
+    className='media-gallery'
     onOpenChange={props.onClose}
     open={Boolean(props.defaultItem)}
   >

package/types/components/PlaceDetailsPanel.js.flow

@@ -6,14 +6,27 @@ import _ from 'underscore';
 import type { Place } from '../types/Place';
 import type { RelatedItems } from '../types/RelatedItems';
 import RelatedItemsList from './RelatedItemsList';
-import './PlaceDetailsPanel.css';
 
 type Props = {
+  /**
+   * The place record to render.
+   */
   place?: Place,
+
+  /**
+   * A list of items related to the place.
+   */
   related: Array<RelatedItems>,
+
+  /**
+   * Callback fired when the panel is closed.
+   */
   onClose: () => void
 };
 
+/**
+ * This component renders a side panel for the passed Core Data place record.
+ */
 const PlaceDetailsPanel = (props: Props) => {
   const el = useRef<HTMLElement>(null);
 

package/types/components/PlaceResultsList.js.flow

@@ -0,0 +1,178 @@
+// @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 './PlaceResultsList.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 = {
+  /**
+   * An array of search results representing `/typesense/Place` objects.
+   */
+  hits: Array<Place>,
+
+  /**
+   * The object that is currently occupying the hover state.
+   */
+  hover?: Feature<{ id: string }>,
+
+  /**
+   * Callback fired when the hover item is changed.
+   */
+  onHoverChange: (hover?: Feature<{ id: string }>) => void,
+
+  /**
+   * Callback fired when a search result is clicked.
+   */
+  onClick: (result: Place) => void
+};
+
+type RowProps = {
+  index: number,
+  style: any
+};
+
+/**
+ * This component renders a list of search results returned from a Core Data Typesense index.
+ */
+const PlaceResultsList = (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 PlaceResultsList;

package/types/components/RelatedItemsList.js.flow

@@ -4,25 +4,36 @@ import * as Accordion from '@radix-ui/react-accordion';
 import { AlertCircle, ChevronDown } from 'lucide-react';
 import React from 'react';
 import _ from 'underscore';
+import i18n from '../i18n/i18n';
 import LoadAnimation from './LoadAnimation';
+import type { RelatedItems } from '../types/RelatedItems';
 import RelatedMedia from './RelatedMedia';
 import RelatedOrganizations from './RelatedOrganizations';
 import RelatedPeople from './RelatedPeople';
 import RelatedPlaces from './RelatedPlaces';
 import RelatedTaxonomies from './RelatedTaxonomies';
-import type { RelatedItems } from '../types/RelatedItems';
+import './RelatedItemsList.css';
 
 type Props = {
+  /**
+   * A list of related items.
+   */
   items: Array<RelatedItems>
 };
 
+/**
+ * This component renders the passed list of related items in an accordion fashion.
+ */
 const RelatedItemsList = (props: Props) => {
   if (_.isEmpty(props.items)) {
     return null;
   }
 
   return (
-    <Accordion.Root type='multiple'>
+    <Accordion.Root
+      className='related-items-list'
+      type='multiple'
+    >
       { _.map(props.items, ({ data, error, ...conf }) => (
         <Accordion.Item
           key={conf.endpoint}
@@ -37,7 +48,7 @@ const RelatedItemsList = (props: Props) => {
                 { conf.ui_label }
                 { data && (
                   <span className='ml-1'>
-                    ({ data.items.length })
+                    { i18n.t('RelatedItemsList.labels.count', { count: data.items?.length })}
                   </span>
                 )}
                 { error && (

package/types/components/RelatedList.js.flow

@@ -9,11 +9,25 @@ type Item = {
 };
 
 type Props = {
+  /**
+   * An annotation page containing the list of records to render.
+   */
   data: AnnotationPage<Item>,
-  emptyMessage?: string,
+
+  /**
+   * A message to display when the list is empty.
+   */
+  emptyMessage: string,
+
+  /**
+   * Render function used to determine how to present the passed item.
+   */
   renderItem: (item: Item) => JSX.Element
 };
 
+/**
+ * This component is a helper component used to structure the lists for the other `Related*` comnponents.
+ */
 const RelatedList = (props: Props) => {
   const { items } = props.data;
 

package/types/components/RelatedMedia.js.flow

@@ -8,14 +8,28 @@ import type { MediaContent } from '../types/MediaContent';
 import MediaGallery from './MediaGallery';
 
 type Props = {
+  /**
+   * The annotation page containing the media content to render.
+   */
   data: AnnotationPage<MediaContent>,
+
+  /**
+   * Media thumbnail height.
+   */
   thumbnailHeight?: number,
+
+  /**
+   * Media thumbnail width.
+   */
   thumbnailWidth?: number
 };
 
 const DEFAULT_THUMBNAIL_HEIGHT = 80;
 const DEFAULT_THUMBNAIL_WIDTH = 80;
 
+/**
+ * This component renders the related Core Data media records as well as a gallery viewer.
+ */
 const RelatedMedia = (props: Props) => {
   const [showGallery, setShowGallery] = useState<MediaContent>();