RC #251 - Refactoring CoreData/Peripleo components into separate pack…

…ages

.eslintrc.json

@@ -6,6 +6,7 @@
   },
   "extends": [
     "plugin:flowtype/recommended",
+    "plugin:import/recommended",
     "plugin:react/recommended",
     "airbnb"
   ],
@@ -36,6 +37,7 @@
     "max-len": ["error", { "code": 120, "ignoreStrings": true }],
     "no-underscore-dangle": "off",
     "no-use-before-define": "off",
+    "import/no-unresolved": ["error", { "ignore": ["@samvera/clover-iiif.*"] }],
     "import/prefer-default-export": "off",
     "react/no-array-index-key": "off",
     "react/default-props-match-prop-types": "off",

package.json

@@ -23,7 +23,7 @@
     "eslint": "^7.1.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-flowtype": "^5.9.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^26.1.4",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "1.1.3",
+  "version": "1.2.0-beta.0",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,8 +12,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.1.3",
-    "@performant-software/shared-components": "^1.1.3",
+    "@performant-software/semantic-components": "^1.2.0-beta.0",
+    "@performant-software/shared-components": "^1.2.0-beta.0",
     "i18next": "^21.9.2",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/core-data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Performant Software Solutions LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/core-data/index.js

@@ -0,0 +1 @@
+module.exports = require('./build/index');

packages/core-data/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@performant-software/core-data",
+  "version": "1.1.3",
+  "description": "A package of components used for Core Data",
+  "license": "MIT",
+  "main": "./build/index.js",
+  "style": "./build/main.css",
+  "scripts": {
+    "build": "webpack --mode production && flow-copy-source -v src types"
+  },
+  "dependencies": {
+    "@performant-software/geospatial": "^1.2.0-beta.0",
+    "@peripleo/peripleo": "^0.3.2",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@samvera/clover-iiif": "^2.3.2",
+    "lucide-react": "^0.321.0",
+    "underscore": "^1.13.2"
+  },
+  "peerDependencies": {
+    "react": ">= 16.13.1 < 19.0.0",
+    "react-dom": ">= 16.13.1 < 19.0.0"
+  },
+  "devDependencies": {
+    "@performant-software/webpack-config": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/core-data/src/components/LoadAnimation.js

@@ -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;

packages/core-data/src/components/MediaGallery.js

@@ -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;

packages/core-data/src/components/PlaceDetailsPanel.js

@@ -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;

packages/core-data/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;