Merge pull request #291 from nulib/deploy/staging

Production push

.eslintrc.json

@@ -21,7 +21,6 @@
     "@typescript-eslint/no-var-requires": "warn",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-explicit-any": "error",
-    "@typescript-eslint/sort-type-union-intersection-members": "error",
     "@typescript-eslint/ban-ts-comment": "warn"
   }
 }

.husky/pre-commit

@@ -2,4 +2,5 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npm run ts-lint-commit-hook
-npm run lint && npm run test:ci
+npm run lint
+# npm run lint && npm run test:ci

.tool-versions

@@ -1 +1 @@
-nodejs 16.14.0
+nodejs 20.5.0

components/BloomWrapper.tsx → components/Clover/SliderWrapper.tsx

@@ -1,13 +1,13 @@
+import Slider from "@samvera/clover-iiif/slider";
 import { SwiperProps } from "swiper/react";
-import dynamic from "next/dynamic";
 import { gr } from "@/styles/sizes";
 import { rem } from "@/styles/global";
 import { styled } from "@/stitches.config";
 import { width } from "@/styles/media";
 
 /* eslint sort-keys: 0 */
 
-const StyledBloomIIIFWrapper = styled("div", {
+const StyledSliderIIIFWrapper = styled("div", {
   position: "relative",
   zIndex: "0",
 
@@ -64,28 +64,16 @@ const breakpoints: SwiperBreakpoints = {
   },
 };
 
-const BloomIIIF: React.ComponentType<{
-  collectionId: string;
-  options: {
-    breakpoints: SwiperBreakpoints;
-    credentials: "include" | "omit" | "same-origin";
-    enablePreview: boolean;
-  };
-}> = dynamic(() => import("@samvera/bloom-iiif"), {
-  ssr: false,
-});
-
-const BloomIIIFWrapper = ({ collectionId }: { collectionId: string }) => (
-  <StyledBloomIIIFWrapper>
-    <BloomIIIF
-      collectionId={collectionId}
+const SliderIIIFWrapper = ({ collectionId }: { collectionId: string }) => (
+  <StyledSliderIIIFWrapper>
+    <Slider
+      iiifContent={collectionId}
       options={{
-        enablePreview: false,
         breakpoints: breakpoints,
         credentials: "include",
       }}
     />
-  </StyledBloomIIIFWrapper>
+  </StyledSliderIIIFWrapper>
 );
 
-export default BloomIIIFWrapper;
+export default SliderIIIFWrapper;

components/Work/ViewerWrapper.styled.ts → components/Clover/ViewerWrapper.styled.ts

@@ -10,6 +10,10 @@ const ViewerWrapperStyled = styled("section", {
   "[class*='-css']": {
     boxShadow: "3px 3px 11px #0002",
   },
+
+  "& label[for='information-toggle']": {
+    boxShadow: "none",
+  },
 });
 
 const AnnouncementContent = styled("div", {

components/Work/ViewerWrapper.test.tsx → components/Clover/ViewerWrapper.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from "@/test-utils";
+
 import { UserContext } from "@/context/user-context";
-import WorkViewerWrapper from "@/components/Work/ViewerWrapper";
+import WorkViewerWrapper from "@/components/Clover/ViewerWrapper";
 
 const userContextValue = {
   user: {
@@ -29,14 +30,14 @@ describe("WorkViewerWrapper", () => {
 
     render(
       <UserContext.Provider value={readingUserContext}>
-        <WorkViewerWrapper isWorkRestricted={true} manifestId="http://testing.com" />
+        <WorkViewerWrapper
+          isWorkRestricted={true}
+          manifestId="http://testing.com"
+        />
       </UserContext.Provider>
     );
 
-    expect(
-      await screen.findByText(readingRoomMessage)
-    ).toBeInTheDocument();
-
+    expect(await screen.findByText(readingRoomMessage)).toBeInTheDocument();
   });
 
   it("does not render an announcement when in the Reading Room and the Work is not restricted", async () => {
@@ -45,14 +46,17 @@ describe("WorkViewerWrapper", () => {
 
     render(
       <UserContext.Provider value={readingUserContext}>
-        <WorkViewerWrapper isWorkRestricted={false} manifestId="http://testing.com" />
+        <WorkViewerWrapper
+          isWorkRestricted={false}
+          manifestId="http://testing.com"
+        />
       </UserContext.Provider>
     );
 
     let el;
     await waitFor(() => {
-       el = screen.queryByText(readingRoomMessage);
-    })
+      el = screen.queryByText(readingRoomMessage);
+    });
     expect(el).toBeNull();
   });
 });

components/Work/ViewerWrapper.tsx → components/Clover/ViewerWrapper.tsx

@@ -1,27 +1,21 @@
 import {
   AnnouncementContent,
   ViewerWrapperStyled,
-} from "@/components/Work/ViewerWrapper.styled";
+} from "@/components/Clover/ViewerWrapper.styled";
 import Announcement from "@/components/Shared/Announcement";
 import { IconInfo } from "@/components/Shared/SVG/Icons";
-import { Options as OpenSeadragonOptions } from "openseadragon";
 import React from "react";
 import { UserContext } from "@/context/user-context";
 import { type Work } from "@nulib/dcapi-types";
 import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
 
-export const CloverIIIF: React.ComponentType<{
-  customTheme: {
-    colors: { [key: string]: string };
-    fonts: { [key: string]: string };
-  };
-  id: string;
-  options: {
-    [key: string]: OpenSeadragonOptions | boolean | string;
-  };
-}> = dynamic(() => import("@samvera/clover-iiif"), {
-  ssr: false,
-});
+export const CloverViewer = dynamic(
+  () => import("@samvera/clover-iiif/viewer"),
+  {
+    ssr: false,
+  }
+);
 
 interface WrapperProps {
   manifestId: Work["iiif_manifest"];
@@ -33,6 +27,7 @@ const WorkViewerWrapper: React.FC<WrapperProps> = ({
   isWorkRestricted,
 }) => {
   const userAuth = React.useContext(UserContext);
+  const router = useRouter();
 
   const customTheme = {
     colors: {
@@ -67,12 +62,21 @@ const WorkViewerWrapper: React.FC<WrapperProps> = ({
     withCredentials: true,
   };
 
+  // On an "embedded-viewer" route, show the metadata drawer in the viewer
+  if (router.pathname === "/embedded-viewer/[manifestId]") {
+    options["renderAbout"] = true;
+    options["showInformationToggle"] = true;
+    options["showIIIFBadge"] = true;
+    options["showTitle"] = true;
+  }
+
   return (
     <ViewerWrapperStyled data-testid="work-viewer-wrapper">
       {manifestId && (
-        <CloverIIIF
+        <CloverViewer
+          // @ts-ignore
           customTheme={customTheme}
-          id={manifestId}
+          iiifContent={manifestId}
           options={options}
         />
       )}

components/Clover/__mocks__/SliderWrapper.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SliderWrapperMock = ({ collectionId }: { collectionId: string }) => (
+  <div>Mock SliderWrapper with props: {collectionId}</div>
+);
+
+export default SliderWrapperMock;

components/Clover/__mocks__/ViewerWrapper.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+const ViewerWrapperMock = () => <div>Mock ViewerWrapper</div>;
+
+export default ViewerWrapperMock;

components/Collection/Tabs/Organization.tsx

@@ -1,5 +1,6 @@
 import { GenericAggsReturn, sortAggsByKey } from "@/lib/collection-helpers";
-import BloomIIIFWrapper from "@/components/BloomWrapper";
+
+import BloomIIIFWrapper from "@/components/Clover/SliderWrapper";
 import ExpandableList from "@/components/Shared/ExpandableList";
 import Heading from "@/components/Heading/Heading";
 import { OrganizationStyled } from "@/components/Collection/Tabs/Organization.styled";

components/Hero/Hero.tsx

@@ -1,7 +1,8 @@
 import { Autoplay, EffectFade, Keyboard, Navigation, Pagination } from "swiper";
 import { HeroActions, HeroStyled } from "@/components/Hero/Hero.styled";
-import { Label, Summary, Thumbnail } from "@samvera/nectar-iiif";
+import { Label, Summary, Thumbnail } from "@samvera/clover-iiif/primitives";
 import { Swiper, SwiperSlide } from "swiper/react";
+
 import Container from "@/components/Shared/Container";
 import { HeroCollection } from "@/lib/constants/homepage";
 import Link from "next/link";

components/Homepage/Overview.tsx

@@ -4,9 +4,10 @@ import {
   Inner,
   OverviewStyled,
 } from "@/components/Homepage/Overview.styled";
+
 import { Button } from "@nulib/design-system";
 import Container from "@/components/Shared/Container";
-import { Thumbnail } from "@samvera/nectar-iiif";
+import { Thumbnail } from "@samvera/clover-iiif/primitives";
 import { overviewThumbnails } from "@/lib/constants/homepage";
 import { useRouter } from "next/router";
 

components/Shared/RelatedItems.test.tsx

@@ -1,23 +1,36 @@
 import RelatedItems, {
   RelatedItemsProps,
 } from "@/components/Shared/RelatedItems";
-import { render, screen, waitFor } from "@/test-utils";
+import { render, screen } from "@/test-utils";
+
+jest.mock("../Clover/SliderWrapper.tsx");
 
 const props: RelatedItemsProps = {
   collectionUris: ["http://localhost:3000/something.json"],
   title: "Explore Further",
 };
 
-xdescribe("RelatedItems component", () => {
-  it("renders a wrapping element for Clover", async () => {
+describe("RelatedItems component", () => {
+  it("renders the component and proper heading", async () => {
     render(<RelatedItems {...props} />);
-    await waitFor(() => {
-      expect(screen.getByTestId("related-items")).toBeInTheDocument;
-    });
-    await waitFor(() => {
-      expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
-        "Explore Further"
-      );
-    });
+    expect(await screen.findByTestId("related-items")).toBeInTheDocument();
+    expect(await screen.findByRole("heading", { level: 2 })).toHaveTextContent(
+      "Explore Further"
+    );
+  });
+
+  it("renders multiple SliderWrappers if passed multiple Collection URIs", async () => {
+    const multipleUris = {
+      collectionUris: [
+        "http://localhost:3000/something",
+        "http://localhost:3000/another-thing",
+      ],
+      title: "Multiple Related Items",
+    };
+
+    render(<RelatedItems {...multipleUris} />);
+    for (const uri of multipleUris.collectionUris) {
+      expect(await screen.findByText(uri, { exact: false }));
+    }
   });
 });

components/Shared/RelatedItems.tsx

@@ -1,8 +1,8 @@
-import BloomIIIFWrapper from "@/components/BloomWrapper";
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorFallback from "@/components/Shared/ErrorFallback";
 import Heading from "@/components/Heading/Heading";
 import { RelatedItemsStyled } from "@/components/Shared/RelatedItems.styled";
+import SliderWrapper from "@/components/Clover/SliderWrapper";
 
 export interface RelatedItemsProps {
   collectionUris?: string[];
@@ -30,7 +30,7 @@ const RelatedItems: React.FC<RelatedItemsProps> = ({
       )}
       <ErrorBoundary FallbackComponent={ErrorFallback}>
         {collectionUris?.map((collectionId) => (
-          <BloomIIIFWrapper collectionId={collectionId} key={collectionId} />
+          <SliderWrapper collectionId={collectionId} key={collectionId} />
         ))}
       </ErrorBoundary>
     </RelatedItemsStyled>