Merge pull request #271 from performant-software/feature/atlas4_place…

…_details

Atlas #4 - Place details

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.0.0",
-    "@performant-software/shared-components": "^2.0.0",
+    "@performant-software/semantic-components": "^2.1.0",
+    "@performant-software/shared-components": "^2.1.0",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

packages/core-data/README.md

@@ -0,0 +1,41 @@
+# core-data
+
+## CSS
+Depending on whether your application using Tailwind CSS, we'll configure the CSS in one of two ways:
+
+### WITHOUT Tailwind CSS
+Import both exported `styles.css` and `tailwind.css` into your application.
+
+```javascript
+// index.js
+
+import '@performant-software/core-data/styles.css';
+import '@performant-software/core-data/tailwind.css';
+```
+
+### WITH Tailwind CSS
+
+Import **ONLY** the `styles.css` import your application.
+
+```javascript
+// index.js
+
+import '@performant-software/core-data/styles.css';
+```
+
+Include the `core-data` Tailwind config as a `present`, and update the `content` section to source classes from the `core-data` package.
+
+```javascript
+// tailwind.config.js
+
+import coreDataConfig from '@performant-software/core-data/tailwind.config';
+
+export default {
+  presets: [
+    coreDataConfig
+  ],
+  content: [
+    '../../node_modules/@performant-software/core-data/**/*.{js,jsx,ts,tsx}'
+  ]
+};
+```

packages/core-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/core-data",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A package of components used with the Core Data platform.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -12,25 +12,35 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/packages/core-data/src/index.css",
+    "./tailwind.css": "./dist/packages/core-data/src/tailwind.css",
+    "./tailwind.config": "./dist/tailwind.config.js"
   },
   "scripts": {
     "build": "vite build && flow-copy-source -v src types"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@samvera/clover-iiif": "^2.3.2",
     "@turf/turf": "^6.5.0",
-    "i18next": "^23.8.2",
+    "clsx": "^2.1.0",
+    "dequal": "^2.0.3",
+    "instantsearch.js": "^4.66.0",
     "lucide-react": "^0.321.0",
+    "postcss-import": "^16.1.0",
     "react-instantsearch": "^7.5.4",
     "react-virtualized-auto-sizer": "^1.0.22",
     "react-window": "^1.8.10",
+    "typesense-instantsearch-adapter": "^2.8.0",
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/geospatial": "^2.0.0",
+    "@performant-software/geospatial": "^2.1.0",
+    "@peripleo/maplibre": "^0.5.1",
+    "@peripleo/peripleo": "^0.5.1",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },
@@ -42,7 +52,9 @@
     "postcss": "^8.4.34",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup-plugin-copy": "^3.5.0",
     "tailwindcss": "^3.4.1",
-    "vite": "^5.1.4"
+    "vite": "^5.1.4",
+    "vite-plugin-copy": "^0.1.6"
   }
-}
+}

packages/core-data/postcss.config.js

@@ -2,6 +2,7 @@
 
 export default {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {}
   }

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

@@ -0,0 +1,38 @@
+// @flow
+
+import React, { type Node, useMemo } from 'react';
+import CoreDataContext from '../context/CoreData';
+
+type Props = {
+  /**
+   * Core Data base URL.
+   */
+  baseUrl: string,
+
+  /**
+   * JSX child elements.
+   */
+  children: Node,
+
+  /**
+   * Core Data project IDs.
+   */
+  projectIds: Array<string>
+};
+
+/**
+ * This component renders a context provider to supply the Core Data base URL and project IDs to any child elements.
+ */
+const CoreDataContextProvider = ({ baseUrl, children, projectIds }: Props) => {
+  const value = useMemo(() => ({ baseUrl, projectIds }), [baseUrl, projectIds]);
+
+  return (
+    <CoreDataContext.Provider
+      value={value}
+    >
+      { children }
+    </CoreDataContext.Provider>
+  );
+};
+
+export default CoreDataContextProvider;

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

@@ -0,0 +1,37 @@
+// @flow
+
+import React, { type Node } from 'react';
+
+type Props = {
+  /**
+   * Label for the list.
+   */
+  label: string,
+
+  /**
+   * Callback fired to render the list content.
+   *
+   * @param attribute
+   */
+  renderList: (attribute: string) => Node,
+};
+
+/**
+ * This component renders a wrapper for a facet list.
+ */
+const FacetList = (props: Props) => (
+  <div
+    className='facet-list'
+  >
+    <h3
+      className='mt-5 font-medium text-sm mb-2 flex items-center'
+    >
+      <span>
+        { props.label }
+      </span>
+    </h3>
+    { props.renderList() }
+  </div>
+);
+
+export default FacetList;

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

@@ -0,0 +1,53 @@
+// @flow
+
+import React, { useCallback, type Node } from 'react';
+import _ from 'underscore';
+import FacetList from './FacetList';
+import TypesenseUtils from '../utils/Typesense';
+
+type Props = {
+  /**
+   * The list of attributes for which to render the lists.
+   */
+  attributes: Array<string>,
+
+  /**
+   * Callback fired to render the facet list.
+   *
+   * @param attribute
+   */
+  renderList: (attribute: string) => Node,
+
+  /**
+   * Returns the label for the passed UUID value.
+   *
+   * @param uuid
+   */
+  resolveLabel: (uuid: string) => string
+};
+
+/**
+ * This component renders a set of facet lists for the passed attributes.
+ */
+const FacetLists = (props: Props) => {
+  /**
+   * Renders the passed attribute.
+   *
+   * @type {function(string): *}
+   */
+  const renderList = useCallback((attribute: string) => {
+    const uuid = TypesenseUtils.getFieldId(attribute);
+
+    return (
+      <FacetList
+        key={attribute}
+        label={props.resolveLabel(uuid)}
+        renderList={() => props.renderList(attribute)}
+      />
+    );
+  }, [props.renderList, props.resolveLabel]);
+
+  return _.map(props.attributes, renderList);
+};
+
+export default FacetLists;

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

@@ -0,0 +1,79 @@
+// @flow
+
+import React, { useCallback, useMemo, type Node } from 'react';
+import _ from 'underscore';
+import FacetLists from './FacetLists';
+import TypesenseUtils from '../utils/Typesense';
+
+type Props = {
+  /**
+   * The list of attributes for which to render the lists.
+   */
+  attributes: Array<string>,
+
+  /**
+   * Callback fired to render the facet list.
+   *
+   * @param attribute
+   */
+  renderList: (attribute: string) => Node,
+
+  /**
+   * Returns the label for the passed UUID value.
+   *
+   * @param uuid
+   */
+  resolveLabel: (uuid: string) => string
+};
+
+const DEFAULT_ID = 'root';
+
+/**
+ * This component renders a set of facet lists for the passed attributes, grouped by the relationship value.
+ */
+const FacetListsGrouped = (props: Props) => {
+  /**
+   * Groups the attributes according to the relationship UUID prefix.
+   */
+  const groupedAttributes = useMemo(() => {
+    const value = [];
+
+    _.each(props.attributes, (attribute: string) => {
+      const id = TypesenseUtils.getRelationshipId(attribute) || DEFAULT_ID;
+      const label = props.resolveLabel(id);
+
+      let group = _.findWhere(value, { id });
+      if (!group) {
+        group = { id, label, items: [] };
+        value.push(group);
+      }
+
+      group.items.push(attribute);
+    });
+
+    return _.sortBy(value, 'label');
+  }, [props.attributes, props.resolveLabel]);
+
+  /**
+   * Renders the section for the passed item. An item can contain many facets.
+   *
+   * @type {unknown}
+   */
+  const renderSection = useCallback((item) => (
+    <div
+      className='border-t my-3'
+      key={item.id}
+    >
+      <h1>{ item.label }</h1>
+      <FacetLists
+        attributes={item.items}
+        renderList={props.renderList}
+        resolveLabel={props.resolveLabel}
+      />
+    </div>
+  ), [props.renderList, props.resolveLabel]);
+
+  return _.map(groupedAttributes, renderSection);
+};
+
+export default FacetListsGrouped;