@performant-software/core-data 1.2.0-beta.1

package/src/components/PlaceMarker.js

@@ -0,0 +1,59 @@
+// @flow
+
+import { LocationMarker } from '@performant-software/geospatial';
+import React, { useCallback, useEffect, useState } from 'react';
+
+type Props = {
+  /**
+   * The URL of the Core Data place record.
+   */
+  url: string
+};
+
+/**
+ * This component renders a map marker for a given Core Data Place record.
+ */
+const PlaceMarker = (props: Props) => {
+  const [place, setPlace] = useState();
+
+  /**
+   * Converts the passed data to a feature collection and sets it on the state.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onLoad = useCallback((data) => {
+    const featureCollection = {
+      type: 'FeatureCollection',
+      features: [{
+        ...data,
+        properties: {
+          ...data.properties,
+          record_id: data.record_id
+        }
+      }]
+    };
+
+    setPlace(featureCollection);
+  }, []);
+
+  /**
+   * Fetch the place record from the passed URL.
+   */
+  useEffect(() => {
+    fetch(props.url)
+      .then((res) => res.json())
+      .then(onLoad);
+  }, [props.url]);
+
+  if (!place) {
+    return null;
+  }
+
+  return (
+    <LocationMarker
+      data={place}
+    />
+  );
+};
+
+export default PlaceMarker;

package/src/components/RelatedItemsList.js

@@ -0,0 +1,94 @@
+// @flow
+
+import * as Accordion from '@radix-ui/react-accordion';
+import { AlertCircle, ChevronDown } from 'lucide-react';
+import React from 'react';
+import _ from 'underscore';
+import LoadAnimation from './LoadAnimation';
+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';
+
+type Props = {
+  items: Array<RelatedItems>
+};
+
+const RelatedItemsList = (props: Props) => {
+  if (_.isEmpty(props.items)) {
+    return null;
+  }
+
+  return (
+    <Accordion.Root type='multiple'>
+      { _.map(props.items, ({ data, error, ...conf }) => (
+        <Accordion.Item
+          key={conf.endpoint}
+          value={conf.endpoint}
+        >
+          <Accordion.Header>
+            <Accordion.Trigger
+              className='accordion-trigger border-black/20 border border-t border-b-0 border-l-0 border-r-0 border-solid
+                rounded-none w-full flex justify-between items-center px-3 py-3 text-sm'
+            >
+              <div>
+                { conf.ui_label }
+                { data && (
+                  <span className='ml-1'>
+                    ({ data.items.length })
+                  </span>
+                )}
+                { error && (
+                  <AlertCircle
+                    className='inline ml-1.5 h-4 w-4 text-red-600 align-text-bottom'
+                  />
+                )}
+                { !(data || error) && (
+                  <LoadAnimation
+                    className='text-muted/60 ml-4'
+                  />
+                )}
+              </div>
+              <ChevronDown
+                className='accordion-chevron h-4 w-4'
+              />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content
+            className='accordion-content text-sm leading-6'
+          >
+            { conf.endpoint === 'media_contents' && (
+              <RelatedMedia
+                data={data}
+              />
+            )}
+            { conf.endpoint === 'organizations' && (
+              <RelatedOrganizations
+                data={data}
+              />
+            )}
+            { conf.endpoint === 'people' && (
+              <RelatedPeople
+                data={data}
+              />
+            )}
+            { conf.endpoint === 'places' && (
+              <RelatedPlaces
+                data={data}
+              />
+            )}
+            { conf.endpoint === 'taxonomies' && (
+              <RelatedTaxonomies
+                data={data}
+              />
+            )}
+          </Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  );
+};
+
+export default RelatedItemsList;

package/src/components/RelatedList.js

@@ -0,0 +1,46 @@
+// @flow
+
+import { AnnotationPage } from '@peripleo/peripleo';
+import React from 'react';
+import _ from 'underscore';
+
+type Item = {
+  id: string
+};
+
+type Props = {
+  data: AnnotationPage<Item>,
+  emptyMessage?: string,
+  renderItem: (item: Item) => JSX.Element
+};
+
+const RelatedList = (props: Props) => {
+  const { items } = props.data;
+
+  if (_.isEmpty(items)) {
+    return (
+      <div
+        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/50 italic'
+      >
+        { props.emptyMessage }
+      </div>
+    );
+  }
+
+  return (
+    <ul
+      className='p-3 pt-1 pb-4'
+    >
+      { _.map(items, (item) => (
+        <li
+          key={item.id}
+          className='flex items-center'
+        >
+          { props.renderItem(item) }
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default RelatedList;

package/src/components/RelatedMedia.js

@@ -0,0 +1,52 @@
+// @flow
+
+import { AnnotationPage } from '@peripleo/peripleo';
+import { Thumbnail } from '@samvera/clover-iiif/primitives';
+import React, { useState } from 'react';
+import _ from 'underscore';
+import type { MediaContent } from '../types/MediaContent';
+import MediaGallery from './MediaGallery';
+
+type Props = {
+  data: AnnotationPage<MediaContent>,
+  thumbnailHeight?: number,
+  thumbnailWidth?: number
+};
+
+const DEFAULT_THUMBNAIL_HEIGHT = 80;
+const DEFAULT_THUMBNAIL_WIDTH = 80;
+
+const RelatedMedia = (props: Props) => {
+  const [showGallery, setShowGallery] = useState<MediaContent>();
+
+  return (
+    <div
+      className='p-3 pb-4 grid grid-cols-3 gap-1'
+    >
+      { _.map(props.data?.items, (item) => (
+        <Thumbnail
+          key={item.body.id}
+          className='rounded shadow cursor-pointer'
+          onClick={() => setShowGallery(item.body)}
+          thumbnail={[{
+            id: item.body.content_thumbnail_url,
+            type: 'Image',
+            width: props.thumbnailWidth,
+            height: props.thumbnailHeight
+          }]}
+        />
+      ))}
+      <MediaGallery
+        defaultItem={showGallery}
+        onClose={() => setShowGallery(undefined)}
+      />
+    </div>
+  );
+};
+
+RelatedMedia.defaultProps = {
+  thumbnailHeight: DEFAULT_THUMBNAIL_HEIGHT,
+  thumbnailWidth: DEFAULT_THUMBNAIL_WIDTH
+};
+
+export default RelatedMedia;

package/src/components/RelatedOrganizations.js

@@ -0,0 +1,28 @@
+// @flow
+
+import { AnnotationPage } from '@peripleo/peripleo';
+import { Building2 } from 'lucide-react';
+import React from 'react';
+import type { Organization } from '../types/Organization';
+import RelatedList from './RelatedList';
+
+type Props = {
+  data: AnnotationPage<Organization>
+};
+
+const RelatedOrganizations = (props: Props) => (
+  <RelatedList
+    data={props.data}
+    emptyMessage={'No related organization'}
+    renderItem={(organization) => (
+      <>
+        <Building2
+          className='h-4 w-4 mr-1.5'
+        />
+        { organization.body.title }
+      </>
+    )}
+  />
+);
+
+export default RelatedOrganizations;

package/src/components/RelatedPeople.js

@@ -0,0 +1,28 @@
+// @flow
+
+import { AnnotationPage } from '@peripleo/peripleo';
+import { UserCircle } from 'lucide-react';
+import React from 'react';
+import type { Person } from '../types/Person';
+import RelatedList from './RelatedList';
+
+type Props = {
+  data: AnnotationPage<Person>
+};
+
+const RelatedPeople = (props: Props) => (
+  <RelatedList
+    data={props.data}
+    emptyMessage={'No related people'}
+    renderItem={(person) => (
+      <>
+        <UserCircle
+          className='h-4 w-4 mr-1.5'
+        />
+        { person.body.title }
+      </>
+    )}
+  />
+);
+
+export default RelatedPeople;

package/src/components/RelatedPlaces.js

@@ -0,0 +1,28 @@
+// @flow
+
+import { AnnotationPage } from '@peripleo/peripleo';
+import { MapPin } from 'lucide-react';
+import React from 'react';
+import type { Place } from '../types/Place';
+import RelatedList from './RelatedList';
+
+type Props = {
+  data: AnnotationPage<Place>
+};
+
+const RelatedPlaces = (props: Props) => (
+  <RelatedList
+    data={props.data}
+    emptyMessage={'No related places'}
+    renderItem={(place) => (
+      <>
+        <MapPin
+          className='h-4 w-4 mr-0.5 inline-block mb-0.5'
+        />
+        { place.body.title }
+      </>
+    )}
+  />
+);
+
+export default RelatedPlaces;

package/src/components/RelatedTaxonomies.js

@@ -0,0 +1,28 @@
+// @flow
+
+import { AnnotationPage } from '@peripleo/peripleo';
+import { ListTree } from 'lucide-react';
+import React from 'react';
+import RelatedList from './RelatedList';
+import type { Taxonomy } from '../types/Taxonomy';
+
+type Props = {
+  data: AnnotationPage<Taxonomy>
+};
+
+const RelatedTaxonomies = (props: Props) => (
+  <RelatedList
+    data={props.data}
+    emptyMessage={'No related taxonomies'}
+    renderItem={(taxonomy) => (
+      <>
+        <ListTree
+          className='h-4 w-4 mr-1.5'
+        />
+        { taxonomy.body.title }
+      </>
+    )}
+  />
+);
+
+export default RelatedTaxonomies;

package/src/index.js

@@ -0,0 +1,14 @@
+// @flow
+
+// 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 RelatedItemsList } from './components/RelatedItemsList';
+export { default as RelatedList } from './components/RelatedList';
+export { default as RelatedMedia } from './components/RelatedMedia';
+export { default as RelatedOrganization } from './components/RelatedOrganizations';
+export { default as RelatedPeople } from './components/RelatedPeople';
+export { default as RelatedPlaces } from './components/RelatedPlaces';
+export { default as RelatedTaxonomies } from './components/RelatedTaxonomies';

package/src/types/Annotation.js

@@ -0,0 +1,13 @@
+// @flow
+
+import type { UserDefinedField } from './UserDefinedField';
+
+export type Annotation = {
+  id: string,
+  record_id: string,
+  uuid: string,
+  title: string,
+  user_defined: {
+    [key: string]: UserDefinedField
+  }
+};

package/src/types/MediaContent.js

@@ -0,0 +1,13 @@
+// @flow
+
+import type { Annotation } from './Annotation';
+
+export type MediaContent = Annotation & {
+  content_download_url: string,
+  content_iiif_url: string,
+  content_preview_url: string,
+  content_thumbnail_url: string,
+  content_url: string,
+  manifest_url: string,
+  type: 'MediaContent'
+};

package/src/types/Organization.js

@@ -0,0 +1,8 @@
+// @flow
+
+import type { Annotation } from './Annotation';
+
+export type Organization = Annotation & {
+  type: 'Organization',
+  biography: string
+};

package/src/types/Person.js

@@ -0,0 +1,11 @@
+// @flow
+
+import type { Annotation } from './Annotation';
+
+export type Person = Annotation & {
+  id: string,
+  type: 'Person',
+  record_id: string,
+  title: string,
+  biography: string
+};

package/src/types/Place.js

@@ -0,0 +1,9 @@
+// @flow
+
+import type { FeatureGeometry } from '@peripleo/peripleo';
+import type { Annotation } from './Annotation';
+
+export type Place = Annotation & {
+  type: 'Place',
+  geometry: FeatureGeometry
+};

package/src/types/RelatedItems.js

@@ -0,0 +1,12 @@
+// @flow
+
+import { AnnotationPage } from '@peripleo/peripleo';
+import type { Annotation } from './Annotation';
+
+export type RelatedItems = {
+  endpoint: string,
+  ui_label: string,
+  default_open?: boolean,
+  data?: AnnotationPage<Annotation>,
+  error?: Error
+};

package/src/types/Taxonomy.js

@@ -0,0 +1,7 @@
+// @flow
+
+import type { Annotation } from './Annotation';
+
+export type Taxonomy = Annotation & {
+  type: 'Taxonomy'
+};

package/src/types/UserDefinedField.js

@@ -0,0 +1,6 @@
+// @flow
+
+export type UserDefinedField = {
+  label: string,
+  value: string
+};

package/types/components/LoadAnimation.js.flow

@@ -0,0 +1,24 @@
+// @flow
+
+import React from 'react';
+import './LoadAnimation.css';
+
+type Props = {
+  /**
+   * Additional class name to apply to the element.
+   */
+  className?: string
+};
+
+/**
+ * This component renders a basic loading animation.
+ */
+const LoadAnimation = (props: Props) => {
+  const className = `${props.className || ''} loader three-dots`.trim();
+
+  return (
+    <span className={className} />
+  );
+};
+
+export default LoadAnimation;

package/types/components/MediaGallery.js.flow

@@ -0,0 +1,80 @@
+// @flow
+
+import * as Dialog from '@radix-ui/react-dialog';
+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 = {
+  /**
+   * The MediaContent record contain the IIIF manifest URL.
+   */
+  defaultItem: MediaContent,
+
+  /**
+   * Callback fired when the dialog is closed.
+   */
+  onClose: () => void,
+
+  /**
+   * Title text to display at the top of the dialog.
+   */
+  title?: string
+};
+
+/**
+ * This component renders a IIIF Viewer for the passed MediaContent record.
+ */
+const MediaGallery = (props: Props) => (
+  <Dialog.Root
+    onOpenChange={props.onClose}
+    open={Boolean(props.defaultItem)}
+  >
+    <Dialog.Portal>
+      <Dialog.Overlay
+        className='dialog-overlay'
+      />
+      <Dialog.Content
+        className='dialog-content'
+      >
+        <Dialog.Title
+          className='dialog-title flex items-center'
+        >
+          <Image
+            className='h-4 w-4 mr-1.5'
+          />
+          { props.title }
+        </Dialog.Title>
+        <div
+          className='pt-6 pb-2 text-sm w-full text-muted min-h-20'
+        >
+          { Boolean(props.defaultItem) && (
+            <Viewer
+              iiifContent={props.defaultItem.manifest_url}
+              options={{
+                informationPanel: {
+                  open: false
+                }
+              }}
+            />
+          )}
+        </div>
+        <Dialog.Close
+          asChild
+        >
+          <button
+            className='dialog-close rounded-full'
+            type='button'
+          >
+            <X className='h-7 w-7 p-1.5' />
+          </button>
+        </Dialog.Close>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog.Root>
+);
+
+export default MediaGallery;