Catalog cards

src/components/composite/Catalog.module.css

@@ -0,0 +1,37 @@
+.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 {
+    width: 16px;
+    height: 16px;
+    background: #000;
+    border-radius: 100%;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 8px;
+}

src/components/composite/Catalog.tsx

@@ -0,0 +1,20 @@
+import styles from "./Catalog.module.css";
+import { type BaseCatalog, CatalogCard } from "../core/CatalogCard";
+
+export interface CatalogProps {
+    catalogs: BaseCatalog[];
+}
+
+export const Catalog = ({ catalogs, ...props }: CatalogProps) => (
+    <div className={styles.catalogContainer} {...props}>
+        <div className={styles.catalogHeader}>
+            <h2>Catalogs</h2>
+            <span>{catalogs.length}</span>
+        </div>
+        <div className={styles.catalogList}>
+            {catalogs.map((catalog) => (
+                <CatalogCard {...catalog} key={catalog.id} />
+            ))}
+        </div>
+    </div>
+);

src/components/core/CatalogCard.module.css

@@ -0,0 +1,69 @@
+.cardContainer * {
+    padding: 0;
+    margin: 0;
+}
+
+.cardContainer {
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    padding: 12px;
+    border: 1px solid #00000027;
+    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);
+}
+
+.readMore {
+    border: none;
+    text-decoration: underline;
+    cursor: pointer;
+    background: none;
+}

src/components/core/CatalogCard.tsx

@@ -0,0 +1,112 @@
+import { useMemo, useState, JSX } from "react";
+import { Button, Link } from "react-aria-components";
+
+import type { DateValue } from "react-aria";
+import styles from "./CatalogCard.module.css";
+
+export type TemporalExtent = [DateValue, DateValue?];
+
+export type IndicatorTag = "API" | "Catalog";
+
+export interface BaseCatalog {
+    // eslint-disable-next-line react/no-unused-prop-types
+    id: string;
+    title: string;
+    description: string;
+    temporalExtent: TemporalExtent;
+    indicatorTag?: IndicatorTag;
+}
+
+export interface CatalogCardProps extends BaseCatalog {
+    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 = ({
+    title,
+    description: initialDescription,
+    temporalExtent,
+    indicatorTag,
+    renderDescription,
+}: CatalogCardProps) => {
+    const [shouldTruncateDescription, setShouldTruncateDescription] =
+        useState(true);
+
+    const isLongText = initialDescription.length > MAX_LENGTH;
+
+    const description = useMemo(
+        () =>
+            shouldTruncateDescription
+                ? `${initialDescription.slice(0, MAX_LENGTH)}${isLongText ? "..." : ""}`
+                : initialDescription,
+        [initialDescription, isLongText, shouldTruncateDescription],
+    );
+
+    const dateRange = useMemo(() => {
+        const startDate = temporalExtent[0].toString();
+
+        let endDate: string = "";
+
+        // Check if end date exists and compare with start date
+        if (
+            temporalExtent[1] &&
+            temporalExtent[1].compare(temporalExtent[0]) !== 0
+        ) {
+            endDate = temporalExtent[1].toString();
+        }
+
+        return `${startDate}${endDate ? ` - ${endDate}` : ""}`;
+    }, [temporalExtent]);
+
+    const renderDefaultDescription = () => (
+        <p className={styles.description}>
+            {description}{" "}
+            {isLongText && (
+                <Button
+                    className={styles.readMore}
+                    onPress={() =>
+                        setShouldTruncateDescription(!shouldTruncateDescription)
+                    }
+                    aria-expanded={!shouldTruncateDescription}
+                >
+                    {shouldTruncateDescription ? "Read More" : "Read Less"}
+                </Button>
+            )}
+        </p>
+    );
+
+    return (
+        <div className={styles.cardContainer}>
+            <div className={styles.infoContainer}>
+                <h3 className={styles.title}>{title}</h3>
+                {renderDescription
+                    ? renderDescription(initialDescription)
+                    : renderDefaultDescription()}
+                <p className={styles.date}>{dateRange}</p>
+            </div>
+            <div className={styles.footerContainer}>
+                <div>{indicatorTag && <Tag indicatorTag={indicatorTag} />}</div>
+                <div>
+                    <Link
+                        href="#todo"
+                        target="_blank"
+                        className={styles.browseButton}
+                    >
+                        Browse
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};

src/stories/Catalog.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { CalendarDateTime } from "@internationalized/date";
+import { Catalog } from "../components/composite/Catalog";
+import { BaseCatalog } from "../components/core/CatalogCard";
+
+const meta = {
+    title: "Composite/Catalog",
+    component: Catalog,
+} satisfies Meta<typeof Catalog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const longDescription =
+    "The Kentucky From Above ([KyFromAbove](https://kyfromabove.ky.gov)) program has acquired aerial imagery and elevation (LiDAR) data for the Commonwealth of Kentucky since 2011. The catalog will be subdivided into separate catalogs for orthorectified imagery, oblique imagery, LiDAR-derived digital elevation models (DEM), and LiDAR point cloud data. The data acquired through KyFromAbove program is free to download and consume.  All imagery within the catalog uses the Cloud-Optimized Geotiff (COG) format.  With the exception of the Phase1 point cloud LAZ files, all LAZ files use the Cloud-Optimized Point Cloud (COPC) format.\n\nSee also:\n\n- [STAC Browser version](https://radiantearth.github.io/stac-browser/#/external/kyfromabove-stac.s3.us-west-1.amazonaws.com/catalog.json)";
+
+const catalogs: BaseCatalog[] = [
+    {
+        id: "1",
+        title: "Catalog 1",
+        description: longDescription,
+        temporalExtent: [
+            new CalendarDateTime(2024, 1, 1, 12, 22, 11),
+        ],
+        indicatorTag: "API",
+    },
+    {
+        id: "2",
+        title: "Catalog 2",
+        description: "Catalog 2 Description",
+        temporalExtent: [
+            new CalendarDateTime(2024, 1, 1),
+            new CalendarDateTime(2024, 1, 1),
+        ],
+        indicatorTag: "API",
+    },
+    {
+        id: "3",
+        title: "Catalog 3",
+        description: "Catalog 3 Description",
+        temporalExtent: [
+            new CalendarDateTime(2024, 1, 1),
+            new CalendarDateTime(2025, 1, 1),
+        ],
+        indicatorTag: "API",
+    },
+];
+
+export const Default: Story = {
+    args: {
+        catalogs,
+    },
+};

src/stories/CatalogCard.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { CalendarDateTime } from "@internationalized/date";
+import { CatalogCard } from "../components/core/CatalogCard";
+
+const meta = {
+    title: "Core/CatalogCard",
+    component: CatalogCard,
+} satisfies Meta<typeof CatalogCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const shortDescription = "Lorem ipsum dolor sit amet";
+const longDescription =
+    "The Kentucky From Above ([KyFromAbove](https://kyfromabove.ky.gov)) program has acquired aerial imagery and elevation (LiDAR) data for the Commonwealth of Kentucky since 2011. The catalog will be subdivided into separate catalogs for orthorectified imagery, oblique imagery, LiDAR-derived digital elevation models (DEM), and LiDAR point cloud data. The data acquired through KyFromAbove program is free to download and consume.  All imagery within the catalog uses the Cloud-Optimized Geotiff (COG) format.  With the exception of the Phase1 point cloud LAZ files, all LAZ files use the Cloud-Optimized Point Cloud (COPC) format.\n\nSee also:\n\n- [STAC Browser version](https://radiantearth.github.io/stac-browser/#/external/kyfromabove-stac.s3.us-west-1.amazonaws.com/catalog.json)";
+
+export const Default: Story = {
+    args: {
+        title: "This is a title",
+        description: longDescription,
+        temporalExtent: [
+            new CalendarDateTime(2024, 1, 1),
+            new CalendarDateTime(2025, 1, 1),
+        ],
+        indicatorTag: "API",
+    },
+};
+
+export const MissingDate: Story = {
+    args: {
+        title: "This is a title",
+        description: shortDescription,
+        temporalExtent: [new CalendarDateTime(2024, 1, 1)],
+        indicatorTag: "Catalog",
+    },
+};
+
+export const CustomDescriptionRender: Story = {
+    args: {
+        title: "This is a title",
+        description: longDescription,
+        temporalExtent: [new CalendarDateTime(2024, 1, 1)],
+        indicatorTag: "Catalog",
+        renderDescription: (description) => (
+            <p style={{ color: "red" }}>{description}</p>
+        ),
+    },
+};