Catalog cards

src/components/composite/Catalog/CatalogCard.module.css

@@ -0,0 +1,70 @@
+.cardContainer * {
+    padding: 0;
+    margin: 0;
+}
+
+.cardContainer {
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    padding: 12px;
+    border: 1px solid #00000027;
+    background: white;
+    gap: 32px;
+}
+
+.infoContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.title {
+    font-size: 20px;
+}
+
+.description {
+    font-size: var(--font-size-base);
+    font-weight: 400;
+}
+
+.date {
+    font-size: var(--font-size-small);
+    font-weight: 400;
+    color: #0000009b;
+}
+
+.footerContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tag {
+    font-size: var(--font-size-base);
+    padding: 2px 6px;
+    border-radius: 3px;
+    color: white;
+}
+
+.tagAPI {
+    background-color: #FFC5003B;
+    color: #A16B00;
+}
+
+.tagCatalog {
+    background-color: #00000010;
+    color: #0000009B;
+}
+
+.browseButton {
+    color: #202020;
+    font-size: var(--font-size-base);
+}
+
+.button {
+    border: none;
+    text-decoration: underline;
+    cursor: pointer;
+    background: none;
+}

src/components/composite/Catalog/CatalogCard.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CatalogCard } from "./CatalogCard";
+import { BaseCatalog } from "./types";
+
+const shortDescription = "Lorem ipsum dolor sit amet";
+const longDescription =
+    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus in quam quod amet eaque rem, sit ex consequatur delectus porro a aliquid neque aliquam illum odit fuga libero suscipit quisquam.";
+
+const shortCatalog: BaseCatalog = {
+    id: "1",
+    title: "Catalog 1",
+    description: shortDescription,
+    temporalExtent: [new Date(Date.UTC(2024, 1, 1)), new Date(Date.UTC(2025, 1, 1))],
+    indicatorTag: "API",
+};
+
+const longCatalog: BaseCatalog = {
+    id: "2",
+    title: "Catalog 2",
+    description: longDescription,
+    temporalExtent: [new Date(Date.UTC(2024, 1, 1)), new Date(Date.UTC(2025, 1, 1))],
+};
+
+describe("CatalogCard", () => {
+    it("renders all components correctly", async () => {
+        render(<CatalogCard {...shortCatalog} />);
+        expect(screen.getByText("Catalog 1")).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                "2/1/2024, 12:00:00 AM UTC - 2/1/2025, 12:00:00 AM UTC",
+            ),
+        ).toBeInTheDocument();
+        expect(screen.getByText(shortDescription)).toBeInTheDocument();
+        expect(screen.queryByText("Read More")).not.toBeInTheDocument();
+        expect(screen.queryByText("Browse")).toBeInTheDocument();
+        expect(screen.queryByText("API")).toBeInTheDocument();
+    });
+
+    it("displays full and truncated description", async () => {
+        const user = userEvent.setup();
+        const maxLength = 10;
+        render(
+            <CatalogCard {...longCatalog} maxDescriptionLength={maxLength} />,
+        );
+        expect(screen.getByText("Catalog 2")).toBeInTheDocument();
+        expect(
+            screen.getByText(`${longDescription.slice(0, maxLength)}...`),
+        ).toBeInTheDocument();
+        const readMoreButton = screen.getByRole("button", {
+            name: "Read more",
+        });
+        expect(readMoreButton).toHaveTextContent("Read More");
+        await user.click(readMoreButton);
+        expect(readMoreButton).toHaveTextContent("Read Less");
+        expect(screen.getByText(`${longDescription}`)).toBeInTheDocument();
+    });
+
+    it("renders one date when only one date is provided", () => {
+        const date = new Date(Date.UTC(2024, 1, 1, 9, 0, 0));
+        render(<CatalogCard {...longCatalog} temporalExtent={[date]} />);
+        expect(
+            screen.getByText("2/1/2024, 9:00:00 AM UTC"),
+        ).toBeInTheDocument();
+    });
+
+    it("renders one date when two dates are the same", () => {
+        const date1 = new Date(Date.UTC(2024, 1, 1, 0, 0, 0));
+        const date2 = new Date(Date.UTC(2024, 1, 1, 0, 0, 0));
+        render(
+            <CatalogCard {...longCatalog} temporalExtent={[date1, date2]} />,
+        );
+        expect(
+            screen.getByText("2/1/2024, 12:00:00 AM UTC"),
+        ).toBeInTheDocument();
+    });
+
+    it("renders custom description", () => {
+        render(
+            <CatalogCard
+                {...longCatalog}
+                renderDescription={() => <p>Custom Description</p>}
+            />,
+        );
+        expect(screen.getByText("Custom Description")).toBeInTheDocument();
+    });
+});

src/components/composite/Catalog/CatalogCard.tsx

@@ -0,0 +1,103 @@
+import { useMemo, useState, JSX } from "react";
+import { Button } from "react-aria-components";
+
+import type { PressEvent } from "react-aria";
+import styles from "./CatalogCard.module.css";
+import { convertDateToUTCString, truncateText } from "../../../utils";
+import { BaseCatalog, IndicatorTag } from "./types";
+
+export interface CatalogCardProps extends BaseCatalog {
+    onBrowsePress?: (e: PressEvent) => void;
+    maxDescriptionLength?: number;
+    renderDescription?: (description: string) => JSX.Element;
+}
+
+const MAX_LENGTH = 250;
+
+const Tag = ({ indicatorTag }: { indicatorTag: IndicatorTag }) => (
+    <div
+        className={`${styles.tag} ${
+            indicatorTag === "API" ? styles.tagAPI : styles.tagCatalog
+        }`}
+    >
+        {indicatorTag}
+    </div>
+);
+
+export const CatalogCard = ({
+    id,
+    title,
+    description: initialDescription,
+    temporalExtent,
+    indicatorTag,
+    maxDescriptionLength = MAX_LENGTH,
+    onBrowsePress,
+    renderDescription,
+}: CatalogCardProps) => {
+    const [shouldTruncateDescription, setShouldTruncateDescription] =
+        useState(true);
+
+    const description = useMemo(
+        () =>
+            shouldTruncateDescription
+                ? truncateText(initialDescription, maxDescriptionLength)
+                : initialDescription,
+        [initialDescription, maxDescriptionLength, shouldTruncateDescription],
+    );
+
+    const dateRange = useMemo(() => {
+        if (!temporalExtent) return "";
+
+        const startDate = convertDateToUTCString(temporalExtent[0]);
+
+        let endDate: string = "";
+
+        // Check if end date exists and compare with start date
+        if (
+            temporalExtent[1] &&
+            temporalExtent[1].getTime() > temporalExtent[0].getTime()
+        ) {
+            endDate = convertDateToUTCString(temporalExtent[1]);
+        }
+
+        return `${startDate}${endDate ? ` - ${endDate}` : ""}`;
+    }, [temporalExtent]);
+
+    const renderDefaultDescription = () => (
+        <p className={styles.description}>
+            {description}{" "}
+            {initialDescription.length > maxDescriptionLength && (
+                <Button
+                    className={styles.button}
+                    onPress={() =>
+                        setShouldTruncateDescription(!shouldTruncateDescription)
+                    }
+                    aria-expanded={!shouldTruncateDescription}
+                    aria-label="Read more"
+                >
+                    {shouldTruncateDescription ? "Read More" : "Read Less"}
+                </Button>
+            )}
+        </p>
+    );
+
+    return (
+        <div className={styles.cardContainer}>
+            <div className={styles.infoContainer}>
+                <h3 className={styles.title}>{title ?? `ID: ${id}`}</h3>
+                {renderDescription
+                    ? renderDescription(initialDescription)
+                    : renderDefaultDescription()}
+                <p className={styles.date}>{dateRange}</p>
+            </div>
+            <div className={styles.footerContainer}>
+                <div>{indicatorTag && <Tag indicatorTag={indicatorTag} />}</div>
+                <div>
+                    <Button onPress={onBrowsePress} className={styles.button}>
+                        Browse
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/composite/Catalog/CatalogList.module.css

@@ -0,0 +1,41 @@
+.catalogContainer,
+.catalogList {
+    display: flex;
+    flex-direction: column;
+}
+
+.catalogList {
+    gap: 24px;
+}
+
+.catalogContainer {
+    height: 100%;
+    overflow-y: auto;
+    gap: 16px;
+}
+
+.catalogHeader {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.catalogHeader h2 {
+    font-size: 28;
+    font-weight: 700;
+}
+
+.catalogHeader span {
+    padding: 4px;
+    background: #000;
+    border-radius: 50%;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 10px;
+    white-space: nowrap;
+    aspect-ratio: 1/1;
+    flex-shrink: 0;
+    min-width: 16px;
+}

src/components/composite/Catalog/CatalogList.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { BaseCatalog } from "./types";
+import { CatalogList } from "./CatalogList";
+
+const shortDescription = "Lorem ipsum dolor sit amet";
+const longDescription =
+    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus in quam quod amet eaque rem, sit ex consequatur delectus porro a aliquid neque aliquam illum odit fuga libero suscipit quisquam.";
+
+const shortCatalog: BaseCatalog = {
+    id: "1",
+    title: "Catalog 1",
+    description: shortDescription,
+    temporalExtent: [new Date(2024, 1, 1), new Date(2025, 1, 1)],
+    indicatorTag: "API",
+};
+
+const longCatalog: BaseCatalog = {
+    id: "2",
+    title: "Catalog 2",
+    description: longDescription,
+    temporalExtent: [new Date(2024, 1, 1), new Date(2025, 1, 1)],
+};
+
+const catalogs = [shortCatalog, longCatalog];
+
+describe("CatalogList", () => {
+    it("renders catalog list", async () => {
+        render(<CatalogList catalogs={catalogs} />);
+        expect(screen.getByText("Catalogs")).toBeInTheDocument();
+        expect(screen.getByTestId("catalogSize")).toHaveTextContent("2");
+        expect(screen.getByText("Catalog 1")).toBeInTheDocument();
+        expect(screen.getByText("Catalog 2")).toBeInTheDocument();
+    });
+
+    it("renders empty list", async () => {
+        render(<CatalogList catalogs={null} />);
+        expect(screen.getByText("Catalogs")).toBeInTheDocument();
+        expect(screen.getByTestId("catalogSize")).toHaveTextContent("0");
+        expect(screen.getByText("No catalogs available.")).toBeInTheDocument();
+
+        render(<CatalogList catalogs={[]} />);
+        expect(screen.getByText("No catalogs available.")).toBeInTheDocument();
+    });
+
+    it("renders loading state", async () => {
+        render(<CatalogList catalogs={catalogs} isLoading />);
+        expect(screen.getByText("Catalogs")).toBeInTheDocument();
+        expect(screen.getByTestId("catalogSize")).toHaveTextContent("0");
+        expect(screen.getByText("Loading...")).toBeInTheDocument();
+    });
+});