Merge branch 'master' into LIBSEARCH-1032-test-an-integration-of-book…

…-covers-from-syndetic-solutions-in-the-shelf-carousel
mlibrary · Jan 8, 2025 · 3e9aefa · 3e9aefa
2 parents 8fba2b3 + 21935a0
commit 3e9aefa
Show file tree

Hide file tree

Showing 115 changed files with 877 additions and 1,675 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -50,7 +50,9 @@ export default [
       'no-ternary': 'off',
       'no-magic-numbers': 'off',
       'one-var': ['error', { initialized: 'never' }],
-      'sort-imports': ['error', { 'ignoreCase': true }], 
+      'sort-imports': ['error', { 'ignoreCase': true }],
+
+      'react/prop-types': 'off',
 
       '@stylistic/brace-style': ['error', '1tbs'],
       '@stylistic/comma-dangle': ['error', 'never'],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,25 +4,24 @@
   "private": true,
   "homepage": "https://search.lib.umich.edu",
   "devDependencies": {
-    "@eslint/compat": "^1.2.3",
-    "@eslint/js": "^9.16.0",
-    "@stylistic/eslint-plugin": "^2.11.0",
-    "eslint": "^9.16.0",
-    "eslint-plugin-react": "^7.37.2",
-    "globals": "^15.11.0",
+    "@eslint/compat": "^1.2.4",
+    "@eslint/js": "^9.17.0",
+    "@stylistic/eslint-plugin": "^2.12.1",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.3",
+    "globals": "^15.14.0",
     "react-scripts": "^5.0.1"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.4.0",
+    "@reduxjs/toolkit": "^2.5.0",
     "citeproc": "^2.4.63",
     "prejudice": "git+https://github.com/mlibrary/prejudice.git",
     "pride": "git+https://github.com/mlibrary/pride.git",
-    "prop-types": "^15.8.1",
     "qs": "^6.13.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2",
-    "react-router-dom": "^7.0.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.1.1"
   },
   "overrides": {
     "@babel/plugin-proposal-private-property-in-object": "npm:@babel/plugin-transform-private-property-in-object",

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,6 @@
 import './stylesheets/colors.css';
+import './stylesheets/base.css';
+import './stylesheets/typography.css';
 import './stylesheets/forms.css';
 import './stylesheets/main.css';
 import './stylesheets/spacing.css';
@@ -19,10 +21,10 @@ const App = () => {
   return (
     <Provider store={store}>
       <BrowserRouter>
+        <A11yLiveMessage />
+        <ScrollToTop />
+        <SearchHeader />
         <div className='site-wrapper'>
-          <A11yLiveMessage />
-          <ScrollToTop />
-          <SearchHeader />
           <Routes>
             <Route
               path='/'
@@ -47,8 +49,8 @@ const App = () => {
             <Route path=':datastoreSlug/*' element={<DatastoreRoute />} />
             <Route path='*' element={<NoMatch />} />
           </Routes>
-          <Footer />
         </div>
+        <Footer />
       </BrowserRouter>
     </Provider>
   );

diff --git a/src/modules/advanced/components/ActiveAdvancedFilters/index.js b/src/modules/advanced/components/ActiveAdvancedFilters/index.js
@@ -1,5 +1,4 @@
 import './styles.css';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 const ActiveAdvancedFilters = ({ activeFilters, filters }) => {
@@ -66,9 +65,4 @@ const ActiveAdvancedFilters = ({ activeFilters, filters }) => {
   );
 };
 
-ActiveAdvancedFilters.propTypes = {
-  activeFilters: PropTypes.object,
-  filters: PropTypes.array
-};
-
 export default ActiveAdvancedFilters;
diff --git a/src/modules/advanced/components/ActiveAdvancedFilters/styles.css b/src/modules/advanced/components/ActiveAdvancedFilters/styles.css
@@ -4,5 +4,4 @@
 
 .active-filter-list {
   font-size: 0.9rem;
-  margin-left: 2.5rem;
 }
diff --git a/src/modules/advanced/components/AdvancedFilter/index.js b/src/modules/advanced/components/AdvancedFilter/index.js
@@ -1,6 +1,5 @@
 import { Checkbox } from '../../../reusable';
 import NarrowSearchTo from '../NarrowSearchTo';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 const getIsCheckboxFilterChecked = ({ advancedFilter }) => {
@@ -53,9 +52,4 @@ const AdvancedFilter = ({ advancedFilter, changeAdvancedFilter }) => {
   return null;
 };
 
-AdvancedFilter.propTypes = {
-  advancedFilter: PropTypes.object,
-  changeAdvancedFilter: PropTypes.func
-};
-
 export default AdvancedFilter;
diff --git a/src/modules/advanced/components/AdvancedSearchContainer/index.js b/src/modules/advanced/components/AdvancedSearchContainer/index.js
@@ -41,7 +41,7 @@ const AdvancedSearchContainer = () => {
         ]}
       />
 
-      <H1 className='heading-xlarge'>Advanced Search</H1>
+      <H1>Advanced Search</H1>
       <p className='font-lede'>Select a search category below for associated advanced search options.</p>
 
       <nav className='advanced-search-nav' aria-label='Advanced Search Datastores'>

diff --git a/src/modules/advanced/components/AdvancedSearchForm/index.js b/src/modules/advanced/components/AdvancedSearchForm/index.js
@@ -4,7 +4,6 @@ import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import FieldInput from '../FieldInput';
 import FiltersContainer from '../FiltersContainer';
-import PropTypes from 'prop-types';
 import { stringifySearch } from '../../../search';
 import { useNavigate } from 'react-router-dom';
 
@@ -86,7 +85,7 @@ const AdvancedSearchForm = ({ datastore }) => {
 
   return (
     <form className='y-spacing container__rounded page margin-top__none' onSubmit={handleSubmit}>
-      <h2 className='h1'>{name} Search</h2>
+      <h2>{name} Search</h2>
       {errors.map((error, index) => {
         return (
           <Alert type='error' key={index}>
@@ -119,8 +118,4 @@ const AdvancedSearchForm = ({ datastore }) => {
   );
 };
 
-AdvancedSearchForm.propTypes = {
-  datastore: PropTypes.object.isRequired
-};
-
 export default AdvancedSearchForm;
diff --git a/src/modules/advanced/components/FieldInput/index.js b/src/modules/advanced/components/FieldInput/index.js
@@ -1,7 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { removeFieldedSearch, setFieldedSearch } from '../../../advanced';
 import Icon from '../../../reusable/components/Icon';
-import PropTypes from 'prop-types';
 import SearchByOptions from '../../../search/components/SearchByOptions';
 import { useDispatch } from 'react-redux';
 
@@ -118,12 +117,4 @@ const FieldInput = ({
   );
 };
 
-FieldInput.propTypes = {
-  booleanTypes: PropTypes.array,
-  datastoreUid: PropTypes.string,
-  fieldedSearch: PropTypes.object,
-  fieldedSearchIndex: PropTypes.number,
-  fields: PropTypes.array
-};
-
 export default memo(FieldInput);
diff --git a/src/modules/advanced/components/FiltersContainer/index.js b/src/modules/advanced/components/FiltersContainer/index.js
@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import ActiveAdvancedFilters from '../ActiveAdvancedFilters';
 import AdvancedFilter from '../AdvancedFilter';
 import getFilters from './getFilters';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 const FiltersContainer = ({ datastoreUid }) => {
@@ -67,7 +66,7 @@ const FiltersContainer = ({ datastoreUid }) => {
   return (
     <>
       {activeFilters && <ActiveAdvancedFilters {...{ activeFilters, filters: filterGroups }} />}
-      <h2 className='heading-large'>Additional search options</h2>
+      <h3>Additional search options</h3>
       <div className='advanced-filters-inner-container'>
         {filterGroupings.map((filterGroup, groupIndex) => {
           return (
@@ -89,7 +88,7 @@ const FiltersContainer = ({ datastoreUid }) => {
                       ];
                       return (
                         <div key={index} className='advanced-filter-container'>
-                          <h2 className='advanced-filter-label-text'>{name}</h2>
+                          <h4 className='advanced-filter-label-text'>{name}</h4>
                           <div className='advanced-filter-inner-container'>
                             {type === 'multiple_select' && <Multiselect {...{ currentFilters, datastoreUid, filterGroupUid: uid, filters, name }} />}
                             {type === 'date_range_input' && <DateRangeInput {...{ currentFilter: currentURLFilters[0], datastoreUid, filterGroupUid: uid }} />}
@@ -101,7 +100,7 @@ const FiltersContainer = ({ datastoreUid }) => {
                   )
                 : (
                     <div className='advanced-filter-container'>
-                      <h2 className='advanced-filter-label-text'>{filterGroup}</h2>
+                      <h4 className='advanced-filter-label-text'>{filterGroup}</h4>
                       {advancedDatastoreFilters[filterGroup].map((advancedFilter, index) => {
                         return <AdvancedFilter key={index} {...{ advancedFilter, changeAdvancedFilter }} />;
                       })}
@@ -116,8 +115,4 @@ const FiltersContainer = ({ datastoreUid }) => {
   );
 };
 
-FiltersContainer.propTypes = {
-  datastoreUid: PropTypes.string
-};
-
 export default FiltersContainer;
diff --git a/src/modules/advanced/components/NarrowSearchTo/index.js b/src/modules/advanced/components/NarrowSearchTo/index.js
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 const NarrowSearchTo = ({ handleChange, options }) => {
@@ -43,9 +42,4 @@ const NarrowSearchTo = ({ handleChange, options }) => {
   );
 };
 
-NarrowSearchTo.propTypes = {
-  handleChange: PropTypes.func,
-  options: PropTypes.array
-};
-
 export default NarrowSearchTo;
diff --git a/src/modules/browse/components/BrowseAtoZ/index.js b/src/modules/browse/components/BrowseAtoZ/index.js
@@ -16,7 +16,7 @@ const BrowseAtoZ = () => {
 
   return (
     <section className='browse'>
-      <h2 className='heading-large margin-top__none'>Titles A-Z</h2>
+      <h2 className='margin-y__none'>Titles A-Z</h2>
       <ul className='browse-list'>
         {['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0-9', 'Other'].map((character, key) => {
           return (

diff --git a/src/modules/browse/components/BrowseByFilters/index.js b/src/modules/browse/components/BrowseByFilters/index.js
@@ -1,5 +1,4 @@
 import { Anchor } from '../../../reusable';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { stringifySearch } from '../../../search';
 import { useParams } from 'react-router-dom';
@@ -15,7 +14,7 @@ const NestedList = ({ browserFilterTo, filter }) => {
             </Anchor>
           )
         : (
-            <h3 className='heading-medium'>{filter.name}</h3>
+            <h3>{filter.name}</h3>
           )}
       {filter.children && (
         <ul>
@@ -34,16 +33,6 @@ const NestedList = ({ browserFilterTo, filter }) => {
   );
 };
 
-NestedList.propTypes = {
-  browserFilterTo: PropTypes.func.isRequired,
-  filter: PropTypes.shape({
-    children: PropTypes.array,
-    count: PropTypes.number,
-    name: PropTypes.string.isRequired,
-    value: PropTypes.string
-  }).isRequired
-};
-
 const BrowseByFilters = ({ filters }) => {
   const { datastoreSlug } = useParams();
 
@@ -61,8 +50,8 @@ const BrowseByFilters = ({ filters }) => {
     <>
       {Object.keys(filters).map((uid) => {
         return (
-          <section key={uid} className='browse u-margin-top-1'>
-            <h2 className='heading-large u-margin-top-none'>{filters[uid].name}</h2>
+          <section key={uid} className='browse margin-top__m'>
+            <h2 className='margin-y__none'>{filters[uid].name}</h2>
             <ul className='nested-list'>
               {filters[uid].filters.map((filter) => {
                 return (
@@ -81,11 +70,4 @@ const BrowseByFilters = ({ filters }) => {
   );
 };
 
-BrowseByFilters.propTypes = {
-  filters: PropTypes.objectOf(PropTypes.shape({
-    filters: PropTypes.array.isRequired,
-    name: PropTypes.string.isRequired
-  })).isRequired
-};
-
 export default BrowseByFilters;
diff --git a/src/modules/browse/components/BrowseInfo/index.js b/src/modules/browse/components/BrowseInfo/index.js
@@ -1,5 +1,4 @@
 import { Anchor } from '../../../reusable';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 const BrowseInfo = ({ datastore }) => {
@@ -14,8 +13,4 @@ const BrowseInfo = ({ datastore }) => {
   );
 };
 
-BrowseInfo.propTypes = {
-  datastore: PropTypes.object
-};
-
 export default BrowseInfo;
diff --git a/src/modules/browse/components/BrowseLink/index.js b/src/modules/browse/components/BrowseLink/index.js
@@ -1,5 +1,4 @@
 import { Anchor } from '../../../reusable';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 const BrowseLink = ({ type = 'callnumber', value, children, ...rest }) => {
@@ -18,13 +17,4 @@ const BrowseLink = ({ type = 'callnumber', value, children, ...rest }) => {
   );
 };
 
-BrowseLink.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]),
-  type: PropTypes.string,
-  value: PropTypes.string
-};
-
 export default BrowseLink;
diff --git a/src/modules/browse/components/BrowsePage/index.js b/src/modules/browse/components/BrowsePage/index.js
@@ -18,14 +18,14 @@ const BrowsePage = () => {
   });
 
   return (
-    <div className='container container-narrow u-margin-top-1'>
+    <div className='container container-narrow margin-top__m'>
       <Breadcrumb
         items={[
           { text: `${datastore.name}`, to: `/${datastore.slug}${document.location.search}` },
           { text: 'Browse' }
         ]}
       />
-      <H1 className='heading-xlarge'>Browse all {datastore.name}</H1>
+      <H1>Browse all {datastore.name}</H1>
       <p className='font-lede'>When you&apos;re stuck looking for specific {datastore.name.toLowerCase()} or just want to see what&apos;s out there, the browse page makes finding the right {datastore.name.toLowerCase()} easy. Browse all {datastore.name.toLowerCase()} titles alphabetically or by academic discipline.</p>
       <BrowseAtoZ />
       <BrowseByFilters filters={browse} />

diff --git a/src/modules/browse/components/ShelfBrowse/index.js b/src/modules/browse/components/ShelfBrowse/index.js
@@ -91,7 +91,7 @@ const ShelfBrowse = () => {
   return (
     <section className='shelf-browse container__rounded'>
       <header className='flex__responsive'>
-        <h2 className='margin-y__none heading-medium'>Shelf browse</h2>
+        <h2 className='margin-y__none h4'>Shelf browse</h2>
         <BrowseLink value={callNumber}>
           <Icon icon='list' size='24' className='margin-right__xs' />Browse in call number list
         </BrowseLink>

diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js
@@ -2,7 +2,6 @@ import './styles.css';
 /* Import { Anchor, Icon, ImagePlaceholder } from '../../../reusable'; */
 import { Anchor, Icon } from '../../../reusable';
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 
 /*
 Const bookCover = (item) => {
@@ -168,13 +167,4 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction,
   );
 };
 
-ShelfBrowseCarousel.propTypes = {
-  callNumber: PropTypes.string,
-  items: PropTypes.array,
-  itemsPerPage: PropTypes.number,
-  setButtonAction: PropTypes.func,
-  setDisableButton: PropTypes.func,
-  uid: PropTypes.string
-};
-
 export default ShelfBrowseCarousel;
diff --git a/src/modules/browse/organizeByParents.js b/src/modules/browse/organizeByParents.js
@@ -16,8 +16,8 @@ const organizeByParents = (array) => {
 
   return array
     .filter((item) => {
-      return !item.parents.length || item.parents.some((parent) => {
-        return !parentMap.has(parent);
+      return !item.parents.length || !item.parents.some((parent) => {
+        return parentMap.has(parent);
       });
     })
     .map((item) => {