Merge faf7124 into 764fda1

.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

@@ -7,9 +7,8 @@
     "packages/*"
   ],
   "scripts": {
-    "build-semantic": "yarn --cwd packages/semantic-ui build",
-    "build-shared": "yarn --cwd packages/shared build",
-    "build-storybook": "yarn build-shared && yarn build-semantic && yarn --cwd packages/storybook build",
+    "build-all": "node --experimental-json-modules ./scripts/build.js",
+    "build-storybook": "yarn build-all && yarn --cwd packages/storybook build",
     "flow": "flow",
     "storybook": "yarn --cwd packages/storybook storybook",
     "test": "jest",
@@ -23,7 +22,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.15",
   "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.15",
+    "@performant-software/shared-components": "^1.2.0-beta.15",
     "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,40 @@
+{
+  "name": "@performant-software/core-data",
+  "version": "1.2.0-beta.15",
+  "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.15",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@samvera/clover-iiif": "^2.3.2",
+    "i18next": "^23.8.2",
+    "lucide-react": "^0.321.0",
+    "react-instantsearch": "^7.5.4",
+    "react-virtualized-auto-sizer": "^1.0.22",
+    "react-window": "^1.8.10",
+    "underscore": "^1.13.2"
+  },
+  "peerDependencies": {
+    "@peripleo/maplibre": "^0.3.3",
+    "react": ">= 16.13.1 < 19.0.0",
+    "react-dom": ">= 16.13.1 < 19.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@performant-software/webpack-config": "^1.0.0",
+    "@peripleo/maplibre": "^0.3.3",
+    "autoprefixer": "^10.4.17",
+    "mini-css-extract-plugin": "^2.8.0",
+    "postcss": "^8.4.34",
+    "postcss-loader": "^8.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.1"
+  }
+}

packages/core-data/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

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

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.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;
+}

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
+    className='media-gallery'
+    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;