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

package/types/components/PlaceDetailsPanel.js.flow

@@ -0,0 +1,113 @@
+// @flow
+
+import { Image, X } from 'lucide-react';
+import React, { useMemo, useRef } from 'react';
+import _ from 'underscore';
+import type { Place } from '../types/Place';
+import type { RelatedItems } from '../types/RelatedItems';
+import RelatedItemsList from './RelatedItemsList';
+import './PlaceDetailsPanel.css';
+
+type Props = {
+  place?: Place,
+  related: Array<RelatedItems>,
+  onClose: () => void
+};
+
+const PlaceDetailsPanel = (props: Props) => {
+  const el = useRef<HTMLElement>(null);
+
+  /**
+   * Returns the first image for the passed related items.
+   */
+  const firstImage = useMemo(() => {
+    const images = props.related.find((i) => i.endpoint === 'media_contents' && !_.isEmpty(i.data?.items));
+    return images ? (images.data && images.data.items[0].body) : undefined;
+  }, [props.related]);
+
+  /**
+   * Sets the user defined field values.
+   *
+   * @type {UserDefinedField[]|*[]}
+   */
+  const userDefined = useMemo(() => (
+    props.place?.user_defined ? Object.values(props.place.user_defined) : []
+  ), [props.place]);
+
+  return (
+    <aside
+      className='flex flex-col absolute z-10 h-full w-[280px] bg-white/80 backdrop-blur shadow overflow-y-auto'
+      ref={el}
+    >
+      <button
+        className='absolute top-2 right-2 p-1.5 rounded-full z-10 bg-slate-200/60 hover:bg-slate-200 focus:outline-2 focus:outline-offset-2 focus:outline-teal-700'
+        onClick={props.onClose}
+        type='button'
+      >
+        <X className='h-4 w-4' />
+      </button>
+      { props.place && (
+        <>
+          { firstImage && (
+            <div
+              className='relative w-full h-[200px] flex-grow-0 flex-shrink-0 bg-muted/20 z-0'
+            >
+              <div
+                className='absolute top-0 left-0 w-full h-full flex justify-center items-center'
+              >
+                <Image
+                  className='h-20 w-20 text-gray-400'
+                  strokeWidth={1}
+                />
+              </div>
+              <div
+                className='absolute top-0 left-0 w-full h-full flex justify-center items-center'
+              >
+                <img
+                  className='object-cover h-full w-full'
+                  src={firstImage.content_url}
+                  alt={firstImage.title}
+                />
+              </div>
+            </div>
+          )}
+          <div
+            className='p-3'
+          >
+            <h1
+              className='pr-6 font-medium'
+            >
+              { props.place.properties.title }
+            </h1>
+            <ol
+              className='text-sm mt-4 leading-6 overflow-hidden'
+            >
+              { _.map(userDefined, ({ label, value }) => (
+                <li
+                  key={label}
+                  className='mb-2'
+                >
+                  <div
+                    className='text-muted'
+                  >
+                    { label }
+                  </div>
+                  <div
+                    className='font-medium overflow-hidden text-ellipsis'
+                  >
+                    { value }
+                  </div>
+                </li>
+              ))}
+            </ol>
+          </div>
+          <RelatedItemsList
+            items={props.related}
+          />
+        </>
+      )}
+    </aside>
+  );
+};
+
+export default PlaceDetailsPanel;

package/types/components/PlaceMarker.js.flow

@@ -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/types/components/RelatedItemsList.js.flow

@@ -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/types/components/RelatedList.js.flow

@@ -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/types/components/RelatedMedia.js.flow

@@ -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/types/components/RelatedOrganizations.js.flow

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

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

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

@@ -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/types/index.js.flow

@@ -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/types/types/Annotation.js.flow

@@ -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/types/types/MediaContent.js.flow

@@ -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/types/types/Organization.js.flow

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

package/types/types/Person.js.flow

@@ -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/types/types/Place.js.flow

@@ -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/types/types/RelatedItems.js.flow

@@ -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/types/types/Taxonomy.js.flow

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

package/types/types/UserDefinedField.js.flow

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

package/webpack.config.js

@@ -0,0 +1,3 @@
+const { configure } = require('@performant-software/webpack-config');
+
+module.exports = configure(__dirname);