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

package/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.

package/build/index.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";var e={n:t=>{var r=t&&t.__esModule?()=>t.default:()=>t;return e.d(r,{a:r}),r},d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{LoadAnimation:()=>a,MediaGallery:()=>u,PlaceDetailsPanel:()=>j,PlaceMarker:()=>M,RelatedItemsList:()=>N,RelatedList:()=>v,RelatedMedia:()=>y,RelatedOrganization:()=>g,RelatedPeople:()=>h,RelatedPlaces:()=>E,RelatedTaxonomies:()=>w});const r=require("react");var n=e.n(r);const a=function(e){var t="".concat(e.className||""," loader three-dots").trim();return n().createElement("span",{className:t})},l=require("@radix-ui/react-dialog"),o=require("@samvera/clover-iiif/viewer");var i=e.n(o);const c=require("lucide-react"),u=function(e){return n().createElement(l.Root,{onOpenChange:e.onClose,open:Boolean(e.defaultItem)},n().createElement(l.Portal,null,n().createElement(l.Overlay,{className:"dialog-overlay"}),n().createElement(l.Content,{className:"dialog-content"},n().createElement(l.Title,{className:"dialog-title flex items-center"},n().createElement(c.Image,{className:"h-4 w-4 mr-1.5"}),e.title),n().createElement("div",{className:"pt-6 pb-2 text-sm w-full text-muted min-h-20"},Boolean(e.defaultItem)&&n().createElement(i(),{iiifContent:e.defaultItem.manifest_url,options:{informationPanel:{open:!1}}})),n().createElement(l.Close,{asChild:!0},n().createElement("button",{className:"dialog-close rounded-full",type:"button"},n().createElement(c.X,{className:"h-7 w-7 p-1.5"}))))))},m=require("underscore");var s=e.n(m);const d=require("@radix-ui/react-accordion"),f=(require("@peripleo/peripleo"),require("@samvera/clover-iiif/primitives"));function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var b=function(e){var t,a,l,o=(a=(0,r.useState)(),l=2,function(e){if(Array.isArray(e))return e}(a)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,l,o,i=[],c=!0,u=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=l.call(r)).done)&&(i.push(n.value),i.length!==t);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(u)throw a}}return i}}(a,l)||function(e,t){if(e){if("string"==typeof e)return p(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?p(e,t):void 0}}(a,l)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),i=o[0],c=o[1];return n().createElement("div",{className:"p-3 pb-4 grid grid-cols-3 gap-1"},s().map(null===(t=e.data)||void 0===t?void 0:t.items,(function(t){return n().createElement(f.Thumbnail,{key:t.body.id,className:"rounded shadow cursor-pointer",onClick:function(){return c(t.body)},thumbnail:[{id:t.body.content_thumbnail_url,type:"Image",width:e.thumbnailWidth,height:e.thumbnailHeight}]})})),n().createElement(u,{defaultItem:i,onClose:function(){return c(void 0)}}))};b.defaultProps={thumbnailHeight:80,thumbnailWidth:80};const y=b,v=function(e){var t=e.data.items;return s().isEmpty(t)?n().createElement("div",{className:"pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/50 italic"},e.emptyMessage):n().createElement("ul",{className:"p-3 pt-1 pb-4"},s().map(t,(function(t){return n().createElement("li",{key:t.id,className:"flex items-center"},e.renderItem(t))})))},g=function(e){return n().createElement(v,{data:e.data,emptyMessage:"No related organization",renderItem:function(e){return n().createElement(n().Fragment,null,n().createElement(c.Building2,{className:"h-4 w-4 mr-1.5"}),e.body.title)}})},h=function(e){return n().createElement(v,{data:e.data,emptyMessage:"No related people",renderItem:function(e){return n().createElement(n().Fragment,null,n().createElement(c.UserCircle,{className:"h-4 w-4 mr-1.5"}),e.body.title)}})},E=function(e){return n().createElement(v,{data:e.data,emptyMessage:"No related places",renderItem:function(e){return n().createElement(n().Fragment,null,n().createElement(c.MapPin,{className:"h-4 w-4 mr-0.5 inline-block mb-0.5"}),e.body.title)}})},w=function(e){return n().createElement(v,{data:e.data,emptyMessage:"No related taxonomies",renderItem:function(e){return n().createElement(n().Fragment,null,n().createElement(c.ListTree,{className:"h-4 w-4 mr-1.5"}),e.body.title)}})};var O=["data","error"];const N=function(e){return s().isEmpty(e.items)?null:n().createElement(d.Root,{type:"multiple"},s().map(e.items,(function(e){var t=e.data,r=e.error,l=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(e,O);return n().createElement(d.Item,{key:l.endpoint,value:l.endpoint},n().createElement(d.Header,null,n().createElement(d.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"},n().createElement("div",null,l.ui_label,t&&n().createElement("span",{className:"ml-1"},"(",t.items.length,")"),r&&n().createElement(c.AlertCircle,{className:"inline ml-1.5 h-4 w-4 text-red-600 align-text-bottom"}),!(t||r)&&n().createElement(a,{className:"text-muted/60 ml-4"})),n().createElement(c.ChevronDown,{className:"accordion-chevron h-4 w-4"}))),n().createElement(d.Content,{className:"accordion-content text-sm leading-6"},"media_contents"===l.endpoint&&n().createElement(y,{data:t}),"organizations"===l.endpoint&&n().createElement(g,{data:t}),"people"===l.endpoint&&n().createElement(h,{data:t}),"places"===l.endpoint&&n().createElement(E,{data:t}),"taxonomies"===l.endpoint&&n().createElement(w,{data:t})))})))},j=function(e){var t=(0,r.useRef)(null),a=(0,r.useMemo)((function(){var t=e.related.find((function(e){var t;return"media_contents"===e.endpoint&&!s().isEmpty(null===(t=e.data)||void 0===t?void 0:t.items)}));return t?t.data&&t.data.items[0].body:void 0}),[e.related]),l=(0,r.useMemo)((function(){var t;return null!==(t=e.place)&&void 0!==t&&t.user_defined?Object.values(e.place.user_defined):[]}),[e.place]);return n().createElement("aside",{className:"flex flex-col absolute z-10 h-full w-[280px] bg-white/80 backdrop-blur shadow overflow-y-auto",ref:t},n().createElement("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:e.onClose,type:"button"},n().createElement(c.X,{className:"h-4 w-4"})),e.place&&n().createElement(n().Fragment,null,a&&n().createElement("div",{className:"relative w-full h-[200px] flex-grow-0 flex-shrink-0 bg-muted/20 z-0"},n().createElement("div",{className:"absolute top-0 left-0 w-full h-full flex justify-center items-center"},n().createElement(c.Image,{className:"h-20 w-20 text-gray-400",strokeWidth:1})),n().createElement("div",{className:"absolute top-0 left-0 w-full h-full flex justify-center items-center"},n().createElement("img",{className:"object-cover h-full w-full",src:a.content_url,alt:a.title}))),n().createElement("div",{className:"p-3"},n().createElement("h1",{className:"pr-6 font-medium"},e.place.properties.title),n().createElement("ol",{className:"text-sm mt-4 leading-6 overflow-hidden"},s().map(l,(function(e){var t=e.label,r=e.value;return n().createElement("li",{key:t,className:"mb-2"},n().createElement("div",{className:"text-muted"},t),n().createElement("div",{className:"font-medium overflow-hidden text-ellipsis"},r))})))),n().createElement(N,{items:e.related})))},x=require("@performant-software/geospatial");function S(e){return S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},S(e)}function P(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function I(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?P(Object(r),!0).forEach((function(t){var n,a,l,o;n=e,a=t,l=r[t],o=function(e,t){if("object"!=S(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!=S(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(a),(a="symbol"==S(o)?o:String(o))in n?Object.defineProperty(n,a,{value:l,enumerable:!0,configurable:!0,writable:!0}):n[a]=l})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):P(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function C(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const M=function(e){var t,a,l=(t=(0,r.useState)(),a=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,l,o,i=[],c=!0,u=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=l.call(r)).done)&&(i.push(n.value),i.length!==t);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(u)throw a}}return i}}(t,a)||function(e,t){if(e){if("string"==typeof e)return C(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?C(e,t):void 0}}(t,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),o=l[0],i=l[1],c=(0,r.useCallback)((function(e){var t={type:"FeatureCollection",features:[I(I({},e),{},{properties:I(I({},e.properties),{},{record_id:e.record_id})})]};i(t)}),[]);return(0,r.useEffect)((function(){fetch(e.url).then((function(e){return e.json()})).then(c)}),[e.url]),o?n().createElement(x.LocationMarker,{data:o}):null};module.exports=t})();
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","mappings":"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","sources":["webpack://@performant-software/core-data/webpack/bootstrap","webpack://@performant-software/core-data/webpack/runtime/compat get default export","webpack://@performant-software/core-data/webpack/runtime/define property getters","webpack://@performant-software/core-data/webpack/runtime/hasOwnProperty shorthand","webpack://@performant-software/core-data/webpack/runtime/make namespace object","webpack://@performant-software/core-data/external commonjs2 \"react\"","webpack://@performant-software/core-data/./src/components/LoadAnimation.js","webpack://@performant-software/core-data/external commonjs \"@radix-ui/react-dialog\"","webpack://@performant-software/core-data/external commonjs \"@samvera/clover-iiif/viewer\"","webpack://@performant-software/core-data/external commonjs \"lucide-react\"","webpack://@performant-software/core-data/./src/components/MediaGallery.js","webpack://@performant-software/core-data/external commonjs \"underscore\"","webpack://@performant-software/core-data/external commonjs \"@radix-ui/react-accordion\"","webpack://@performant-software/core-data/external commonjs \"@samvera/clover-iiif/primitives\"","webpack://@performant-software/core-data/external commonjs \"@peripleo/peripleo\"","webpack://@performant-software/core-data/./src/components/RelatedMedia.js","webpack://@performant-software/core-data/./src/components/RelatedList.js","webpack://@performant-software/core-data/./src/components/RelatedOrganizations.js","webpack://@performant-software/core-data/./src/components/RelatedPeople.js","webpack://@performant-software/core-data/./src/components/RelatedPlaces.js","webpack://@performant-software/core-data/./src/components/RelatedTaxonomies.js","webpack://@performant-software/core-data/./src/components/RelatedItemsList.js","webpack://@performant-software/core-data/./src/components/PlaceDetailsPanel.js","webpack://@performant-software/core-data/external commonjs \"@performant-software/geospatial\"","webpack://@performant-software/core-data/./src/components/PlaceMarker.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","// @flow\n\nimport React from 'react';\nimport './LoadAnimation.css';\n\ntype Props = {\n  /**\n   * Additional class name to apply to the element.\n   */\n  className?: string\n};\n\n/**\n * This component renders a basic loading animation.\n */\nconst LoadAnimation = (props: Props) => {\n  const className = `${props.className || ''} loader three-dots`.trim();\n\n  return (\n    <span className={className} />\n  );\n};\n\nexport default LoadAnimation;\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@radix-ui/react-dialog\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@samvera/clover-iiif/viewer\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"lucide-react\");","// @flow\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport Viewer from '@samvera/clover-iiif/viewer';\nimport { Image, X } from 'lucide-react';\nimport React from 'react';\nimport type { MediaContent } from '../types/MediaContent';\n\nimport './MediaGallery.css';\n\ntype Props = {\n  /**\n   * The MediaContent record contain the IIIF manifest URL.\n   */\n  defaultItem: MediaContent,\n\n  /**\n   * Callback fired when the dialog is closed.\n   */\n  onClose: () => void,\n\n  /**\n   * Title text to display at the top of the dialog.\n   */\n  title?: string\n};\n\n/**\n * This component renders a IIIF Viewer for the passed MediaContent record.\n */\nconst MediaGallery = (props: Props) => (\n  <Dialog.Root\n    onOpenChange={props.onClose}\n    open={Boolean(props.defaultItem)}\n  >\n    <Dialog.Portal>\n      <Dialog.Overlay\n        className='dialog-overlay'\n      />\n      <Dialog.Content\n        className='dialog-content'\n      >\n        <Dialog.Title\n          className='dialog-title flex items-center'\n        >\n          <Image\n            className='h-4 w-4 mr-1.5'\n          />\n          { props.title }\n        </Dialog.Title>\n        <div\n          className='pt-6 pb-2 text-sm w-full text-muted min-h-20'\n        >\n          { Boolean(props.defaultItem) && (\n            <Viewer\n              iiifContent={props.defaultItem.manifest_url}\n              options={{\n                informationPanel: {\n                  open: false\n                }\n              }}\n            />\n          )}\n        </div>\n        <Dialog.Close\n          asChild\n        >\n          <button\n            className='dialog-close rounded-full'\n            type='button'\n          >\n            <X className='h-7 w-7 p-1.5' />\n          </button>\n        </Dialog.Close>\n      </Dialog.Content>\n    </Dialog.Portal>\n  </Dialog.Root>\n);\n\nexport default MediaGallery;\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"underscore\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@radix-ui/react-accordion\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@samvera/clover-iiif/primitives\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@peripleo/peripleo\");","// @flow\n\nimport { AnnotationPage } from '@peripleo/peripleo';\nimport { Thumbnail } from '@samvera/clover-iiif/primitives';\nimport React, { useState } from 'react';\nimport _ from 'underscore';\nimport type { MediaContent } from '../types/MediaContent';\nimport MediaGallery from './MediaGallery';\n\ntype Props = {\n  data: AnnotationPage<MediaContent>,\n  thumbnailHeight?: number,\n  thumbnailWidth?: number\n};\n\nconst DEFAULT_THUMBNAIL_HEIGHT = 80;\nconst DEFAULT_THUMBNAIL_WIDTH = 80;\n\nconst RelatedMedia = (props: Props) => {\n  const [showGallery, setShowGallery] = useState<MediaContent>();\n\n  return (\n    <div\n      className='p-3 pb-4 grid grid-cols-3 gap-1'\n    >\n      { _.map(props.data?.items, (item) => (\n        <Thumbnail\n          key={item.body.id}\n          className='rounded shadow cursor-pointer'\n          onClick={() => setShowGallery(item.body)}\n          thumbnail={[{\n            id: item.body.content_thumbnail_url,\n            type: 'Image',\n            width: props.thumbnailWidth,\n            height: props.thumbnailHeight\n          }]}\n        />\n      ))}\n      <MediaGallery\n        defaultItem={showGallery}\n        onClose={() => setShowGallery(undefined)}\n      />\n    </div>\n  );\n};\n\nRelatedMedia.defaultProps = {\n  thumbnailHeight: DEFAULT_THUMBNAIL_HEIGHT,\n  thumbnailWidth: DEFAULT_THUMBNAIL_WIDTH\n};\n\nexport default RelatedMedia;\n","// @flow\n\nimport { AnnotationPage } from '@peripleo/peripleo';\nimport React from 'react';\nimport _ from 'underscore';\n\ntype Item = {\n  id: string\n};\n\ntype Props = {\n  data: AnnotationPage<Item>,\n  emptyMessage?: string,\n  renderItem: (item: Item) => JSX.Element\n};\n\nconst RelatedList = (props: Props) => {\n  const { items } = props.data;\n\n  if (_.isEmpty(items)) {\n    return (\n      <div\n        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/50 italic'\n      >\n        { props.emptyMessage }\n      </div>\n    );\n  }\n\n  return (\n    <ul\n      className='p-3 pt-1 pb-4'\n    >\n      { _.map(items, (item) => (\n        <li\n          key={item.id}\n          className='flex items-center'\n        >\n          { props.renderItem(item) }\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default RelatedList;\n","// @flow\n\nimport { AnnotationPage } from '@peripleo/peripleo';\nimport { Building2 } from 'lucide-react';\nimport React from 'react';\nimport type { Organization } from '../types/Organization';\nimport RelatedList from './RelatedList';\n\ntype Props = {\n  data: AnnotationPage<Organization>\n};\n\nconst RelatedOrganizations = (props: Props) => (\n  <RelatedList\n    data={props.data}\n    emptyMessage={'No related organization'}\n    renderItem={(organization) => (\n      <>\n        <Building2\n          className='h-4 w-4 mr-1.5'\n        />\n        { organization.body.title }\n      </>\n    )}\n  />\n);\n\nexport default RelatedOrganizations;\n","// @flow\n\nimport { AnnotationPage } from '@peripleo/peripleo';\nimport { UserCircle } from 'lucide-react';\nimport React from 'react';\nimport type { Person } from '../types/Person';\nimport RelatedList from './RelatedList';\n\ntype Props = {\n  data: AnnotationPage<Person>\n};\n\nconst RelatedPeople = (props: Props) => (\n  <RelatedList\n    data={props.data}\n    emptyMessage={'No related people'}\n    renderItem={(person) => (\n      <>\n        <UserCircle\n          className='h-4 w-4 mr-1.5'\n        />\n        { person.body.title }\n      </>\n    )}\n  />\n);\n\nexport default RelatedPeople;\n","// @flow\n\nimport { AnnotationPage } from '@peripleo/peripleo';\nimport { MapPin } from 'lucide-react';\nimport React from 'react';\nimport type { Place } from '../types/Place';\nimport RelatedList from './RelatedList';\n\ntype Props = {\n  data: AnnotationPage<Place>\n};\n\nconst RelatedPlaces = (props: Props) => (\n  <RelatedList\n    data={props.data}\n    emptyMessage={'No related places'}\n    renderItem={(place) => (\n      <>\n        <MapPin\n          className='h-4 w-4 mr-0.5 inline-block mb-0.5'\n        />\n        { place.body.title }\n      </>\n    )}\n  />\n);\n\nexport default RelatedPlaces;\n","// @flow\n\nimport { AnnotationPage } from '@peripleo/peripleo';\nimport { ListTree } from 'lucide-react';\nimport React from 'react';\nimport RelatedList from './RelatedList';\nimport type { Taxonomy } from '../types/Taxonomy';\n\ntype Props = {\n  data: AnnotationPage<Taxonomy>\n};\n\nconst RelatedTaxonomies = (props: Props) => (\n  <RelatedList\n    data={props.data}\n    emptyMessage={'No related taxonomies'}\n    renderItem={(taxonomy) => (\n      <>\n        <ListTree\n          className='h-4 w-4 mr-1.5'\n        />\n        { taxonomy.body.title }\n      </>\n    )}\n  />\n);\n\nexport default RelatedTaxonomies;\n","// @flow\n\nimport * as Accordion from '@radix-ui/react-accordion';\nimport { AlertCircle, ChevronDown } from 'lucide-react';\nimport React from 'react';\nimport _ from 'underscore';\nimport LoadAnimation from './LoadAnimation';\nimport RelatedMedia from './RelatedMedia';\nimport RelatedOrganizations from './RelatedOrganizations';\nimport RelatedPeople from './RelatedPeople';\nimport RelatedPlaces from './RelatedPlaces';\nimport RelatedTaxonomies from './RelatedTaxonomies';\nimport type { RelatedItems } from '../types/RelatedItems';\n\ntype Props = {\n  items: Array<RelatedItems>\n};\n\nconst RelatedItemsList = (props: Props) => {\n  if (_.isEmpty(props.items)) {\n    return null;\n  }\n\n  return (\n    <Accordion.Root type='multiple'>\n      { _.map(props.items, ({ data, error, ...conf }) => (\n        <Accordion.Item\n          key={conf.endpoint}\n          value={conf.endpoint}\n        >\n          <Accordion.Header>\n            <Accordion.Trigger\n              className='accordion-trigger border-black/20 border border-t border-b-0 border-l-0 border-r-0 border-solid\n                rounded-none w-full flex justify-between items-center px-3 py-3 text-sm'\n            >\n              <div>\n                { conf.ui_label }\n                { data && (\n                  <span className='ml-1'>\n                    ({ data.items.length })\n                  </span>\n                )}\n                { error && (\n                  <AlertCircle\n                    className='inline ml-1.5 h-4 w-4 text-red-600 align-text-bottom'\n                  />\n                )}\n                { !(data || error) && (\n                  <LoadAnimation\n                    className='text-muted/60 ml-4'\n                  />\n                )}\n              </div>\n              <ChevronDown\n                className='accordion-chevron h-4 w-4'\n              />\n            </Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content\n            className='accordion-content text-sm leading-6'\n          >\n            { conf.endpoint === 'media_contents' && (\n              <RelatedMedia\n                data={data}\n              />\n            )}\n            { conf.endpoint === 'organizations' && (\n              <RelatedOrganizations\n                data={data}\n              />\n            )}\n            { conf.endpoint === 'people' && (\n              <RelatedPeople\n                data={data}\n              />\n            )}\n            { conf.endpoint === 'places' && (\n              <RelatedPlaces\n                data={data}\n              />\n            )}\n            { conf.endpoint === 'taxonomies' && (\n              <RelatedTaxonomies\n                data={data}\n              />\n            )}\n          </Accordion.Content>\n        </Accordion.Item>\n      ))}\n    </Accordion.Root>\n  );\n};\n\nexport default RelatedItemsList;\n","// @flow\n\nimport { Image, X } from 'lucide-react';\nimport React, { useMemo, useRef } from 'react';\nimport _ from 'underscore';\nimport type { Place } from '../types/Place';\nimport type { RelatedItems } from '../types/RelatedItems';\nimport RelatedItemsList from './RelatedItemsList';\nimport './PlaceDetailsPanel.css';\n\ntype Props = {\n  place?: Place,\n  related: Array<RelatedItems>,\n  onClose: () => void\n};\n\nconst PlaceDetailsPanel = (props: Props) => {\n  const el = useRef<HTMLElement>(null);\n\n  /**\n   * Returns the first image for the passed related items.\n   */\n  const firstImage = useMemo(() => {\n    const images = props.related.find((i) => i.endpoint === 'media_contents' && !_.isEmpty(i.data?.items));\n    return images ? (images.data && images.data.items[0].body) : undefined;\n  }, [props.related]);\n\n  /**\n   * Sets the user defined field values.\n   *\n   * @type {UserDefinedField[]|*[]}\n   */\n  const userDefined = useMemo(() => (\n    props.place?.user_defined ? Object.values(props.place.user_defined) : []\n  ), [props.place]);\n\n  return (\n    <aside\n      className='flex flex-col absolute z-10 h-full w-[280px] bg-white/80 backdrop-blur shadow overflow-y-auto'\n      ref={el}\n    >\n      <button\n        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'\n        onClick={props.onClose}\n        type='button'\n      >\n        <X className='h-4 w-4' />\n      </button>\n      { props.place && (\n        <>\n          { firstImage && (\n            <div\n              className='relative w-full h-[200px] flex-grow-0 flex-shrink-0 bg-muted/20 z-0'\n            >\n              <div\n                className='absolute top-0 left-0 w-full h-full flex justify-center items-center'\n              >\n                <Image\n                  className='h-20 w-20 text-gray-400'\n                  strokeWidth={1}\n                />\n              </div>\n              <div\n                className='absolute top-0 left-0 w-full h-full flex justify-center items-center'\n              >\n                <img\n                  className='object-cover h-full w-full'\n                  src={firstImage.content_url}\n                  alt={firstImage.title}\n                />\n              </div>\n            </div>\n          )}\n          <div\n            className='p-3'\n          >\n            <h1\n              className='pr-6 font-medium'\n            >\n              { props.place.properties.title }\n            </h1>\n            <ol\n              className='text-sm mt-4 leading-6 overflow-hidden'\n            >\n              { _.map(userDefined, ({ label, value }) => (\n                <li\n                  key={label}\n                  className='mb-2'\n                >\n                  <div\n                    className='text-muted'\n                  >\n                    { label }\n                  </div>\n                  <div\n                    className='font-medium overflow-hidden text-ellipsis'\n                  >\n                    { value }\n                  </div>\n                </li>\n              ))}\n            </ol>\n          </div>\n          <RelatedItemsList\n            items={props.related}\n          />\n        </>\n      )}\n    </aside>\n  );\n};\n\nexport default PlaceDetailsPanel;\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@performant-software/geospatial\");","// @flow\n\nimport { LocationMarker } from '@performant-software/geospatial';\nimport React, { useCallback, useEffect, useState } from 'react';\n\ntype Props = {\n  /**\n   * The URL of the Core Data place record.\n   */\n  url: string\n};\n\n/**\n * This component renders a map marker for a given Core Data Place record.\n */\nconst PlaceMarker = (props: Props) => {\n  const [place, setPlace] = useState();\n\n  /**\n   * Converts the passed data to a feature collection and sets it on the state.\n   *\n   * @type {(function(*): void)|*}\n   */\n  const onLoad = useCallback((data) => {\n    const featureCollection = {\n      type: 'FeatureCollection',\n      features: [{\n        ...data,\n        properties: {\n          ...data.properties,\n          record_id: data.record_id\n        }\n      }]\n    };\n\n    setPlace(featureCollection);\n  }, []);\n\n  /**\n   * Fetch the place record from the passed URL.\n   */\n  useEffect(() => {\n    fetch(props.url)\n      .then((res) => res.json())\n      .then(onLoad);\n  }, [props.url]);\n\n  if (!place) {\n    return null;\n  }\n\n  return (\n    <LocationMarker\n      data={place}\n    />\n  );\n};\n\nexport default PlaceMarker;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","props","className","concat","trim","React","Dialog","onOpenChange","onClose","open","Boolean","defaultItem","Image","title","Viewer","iiifContent","manifest_url","options","informationPanel","asChild","type","X","RelatedMedia","_props$data","_useState2","useState","showGallery","setShowGallery","_","data","items","item","Thumbnail","body","id","onClick","thumbnail","content_thumbnail_url","width","thumbnailWidth","height","thumbnailHeight","MediaGallery","undefined","defaultProps","emptyMessage","renderItem","RelatedList","organization","Building2","person","UserCircle","place","MapPin","taxonomy","ListTree","Accordion","_ref","error","conf","_objectWithoutProperties","_excluded","endpoint","ui_label","length","AlertCircle","LoadAnimation","ChevronDown","RelatedOrganizations","RelatedPeople","RelatedPlaces","RelatedTaxonomies","el","useRef","firstImage","useMemo","images","related","find","i","_i$data","userDefined","_props$place","user_defined","values","ref","strokeWidth","src","content_url","alt","properties","label","RelatedItemsList","setPlace","onLoad","useCallback","featureCollection","features","_objectSpread","record_id","useEffect","fetch","url","then","res","json","LocationMarker"],"sourceRoot":""}

package/build/main.css

@@ -0,0 +1,133 @@
+/** https://cssloaders.github.io/ MIT License **/
+.loader.three-dots,
+.loader.three-dots::before,
+.loader.three-dots::after {
+  display: inline-block;
+  border-radius: 50%;
+  width: 2.2em;
+  height: 2.2em;
+  animation-fill-mode: both;
+  animation: bblFadInOut 1.8s infinite ease-in-out;
+}
+.loader.three-dots {
+  font-size: 2px;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  top: -3em;
+  animation-delay: -0.16s;
+}
+.loader.three-dots::before,
+.loader.three-dots::after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+.loader.three-dots::before {
+  left: -3.3em;
+  animation-delay: -0.32s;
+}
+.loader.three-dots::after {
+  left: 3.3em;
+}
+@keyframes bblFadInOut {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em;
+  }
+  40% {
+    box-shadow: 0 2.5em 0 0;
+  }
+}
+
+.dialog-overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  position: fixed;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 98;
+}
+.dialog-content {
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px, rgba(14, 18, 22, 0.2) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 1000px;
+  max-height: 90vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 99;
+}
+.dialog-content:focus {
+  outline: none;
+}
+.dialog-close {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+.clover-viewer-header {
+  font-weight: 500;
+  align-items: center !important;
+}
+.clover-viewer-header > span {
+  font-size: 1rem !important;
+  padding-top: 1.3rem;
+  padding-left: 0 !important;
+}
+
+.accordion-chevron {
+  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.accordion-trigger[data-state='open'] > .accordion-chevron {
+  transform: rotate(180deg);
+}
+.accordion-content {
+  overflow: hidden;
+}
+.accordion-content[data-state='open'] {
+  animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.accordion-content[data-state='closed'] {
+  animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+

package/index.js

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

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@performant-software/core-data",
+  "version": "1.2.0-beta.1",
+  "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.1",
+    "@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"
+  }
+}

package/src/components/LoadAnimation.css

@@ -0,0 +1,40 @@
+/** https://cssloaders.github.io/ MIT License **/
+.loader.three-dots, .loader.three-dots::before, .loader.three-dots::after {
+  display:inline-block;
+  border-radius: 50%;
+  width: 2.2em;
+  height: 2.2em;
+  animation-fill-mode: both;
+  animation: bblFadInOut 1.8s infinite ease-in-out;
+}
+
+.loader.three-dots {
+  font-size: 2px;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  top: -3em;
+  animation-delay: -0.16s;
+}
+
+.loader.three-dots::before,
+.loader.three-dots::after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.loader.three-dots::before {
+  left: -3.3em;
+  animation-delay: -0.32s;
+}
+
+.loader.three-dots::after {
+  left: 3.3em;
+}
+
+@keyframes bblFadInOut {
+  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
+  40% { box-shadow: 0 2.5em 0 0 }
+}
+    

package/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;

package/src/components/MediaGallery.css

@@ -0,0 +1,64 @@
+.dialog-overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  position: fixed;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 98;
+}
+
+.dialog-content {
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px, rgba(14, 18, 22, 0.2) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 1000px;
+  max-height: 90vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 99;
+}
+
+.dialog-content:focus {
+  outline: none;
+}
+
+.dialog-close {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.clover-viewer-header  {
+  font-weight: 500;
+  align-items: center !important;
+}
+
+.clover-viewer-header > span {
+  font-size: 1rem !important;
+  padding-top: 1.3rem;
+  padding-left: 0 !important;
+}

package/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;

package/src/components/PlaceDetailsPanel.css

@@ -0,0 +1,37 @@
+.accordion-chevron {
+  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.accordion-trigger[data-state='open'] > .accordion-chevron {
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  overflow: hidden;
+}
+
+.accordion-content[data-state='open'] {
+  animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.accordion-content[data-state='closed'] {
+  animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/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;