@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/Card/_dS.jsx

@@ -0,0 +1,177 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { Card } from ".";
+import sampleSrc from "../Image/assets/sample-landscape.svg";
+
+const X = () => {
+    return (
+        <Ds.page
+            title="<Card>"
+            releasedOn="1.0.0"
+            description={{
+                tr: "Card, base içindeki tıklanabilir içerik kartı katmanıdır. İlk varyant Amedist olarak hazırlanmıştır. Kart genişliği her zaman bulunduğu alanın %100'ünü alır; genişlik kararını CardViewer veya parent layout verir.",
+                en: "Card is the clickable content-card layer in base. Its first variant is Amedist. A card always fills the width supplied by its parent; CardViewer or the parent layout owns sizing.",
+            }}
+        >
+            <Ds.block
+                title={{ tr: "Varyant Sözleşmesi", en: "Variant contract" }}
+                description={{
+                    tr: "Card şu anda Card.amedist aliasıdır. Base katmanı görsel kaynağı, lokalize metinleri, tıklama/klavye davranışını ve disabled durumunu normalize eder. Yerleşim, tipografi ve CTA görünümü varyanta aittir; yeni bir Card varyantının Amedist görünümünü veya tüm alanlarını desteklemesi zorunlu değildir. Belirli tasarıma bağımlı kullanımda Card.amedist yazın.",
+                    en: "Card currently aliases Card.amedist. The base layer normalizes image sources, localized copy, click/keyboard behavior, and the disabled state. Layout, typography, and CTA presentation belong to the variant; a future Card variant does not have to reproduce Amedist's presentation or every field. Use Card.amedist when the design specifically depends on Amedist.",
+                }}
+                code={`<Card.amedist {...cardProps} />
+
+// Current default-variant shorthand:
+<Card {...cardProps} />`}
+            />
+            <Ds.block
+                title={{ tr: "Amedist", en: "Amedist" }}
+                description={{
+                    tr: "thumb, supTitle, title, subtitle ve description alanları opsiyoneldir. supTitle title üstünde gösterilir ve title-case uygulanır (TR locale). supTitleIcon ile ikon eklenebilir. ctaLabel verilmezse lokalize İncele/View etiketi kullanılır; disabled kartta CTA gizlenir. to verilen kart React Router Link, href veya dış URL verilen kart anchor olarak render edilir; yalnızca onClick verilen kart button semantiğini kullanır. CTA yalnızca görsel bir işarettir.",
+                    en: "thumb, supTitle, title, subtitle, and description are optional. supTitle renders above title with title-case formatting. Use supTitleIcon for an optional icon. ctaLabel defaults to the localized View label; the CTA is hidden for a disabled card. A card with to renders as a React Router Link, while href or an external URL renders as an anchor; button semantics are reserved for onClick-only cards. The CTA is visual only.",
+                }}
+                code={`import { Card } from "${SYS.basePath}";
+
+<Card.amedist
+    thumb={thumbUrl}
+    title="Lorem ipsum dolor sit amet consectetur adipiscing elit."
+    description="Lorem ipsum dolor sit amet consectetur adipiscing elit."
+    ctaLabel="İncele"
+    to="/detail"
+/>`}
+                example={
+                    <div style={{ width: 300 }}>
+                        <Card
+                            thumb={sampleSrc}
+                            title="Lorem ipsum dolor sit amet consectetur adipiscing elit."
+                            description="Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat."
+                            ctaLabel=""
+                            to="/design-system/card"
+                        />
+                    </div>
+                }
+            />
+            <Ds.block
+                title={{ tr: "Katalog Thumb", en: "Catalog Thumb" }}
+                description={{
+                    tr: "catalogSet verildiğinde Card, Image komponentini thumb variantı ile kullanır. Katalogda thumb yoksa Image normal seçim akışına geri döner.",
+                    en: "When catalogSet is provided, Card uses Image with its thumb variant. If the catalog has no thumb, Image falls back to its normal selection flow.",
+                }}
+                code={`<Card
+    catalogSet="i0030"
+    title="Diyarbakır"
+    description="Katalogdan gelen thumb ile kart."
+/>`}
+            />
+            <Ds.api
+                args="Card base props"
+                props={{
+                    thumb: {
+                        description: {
+                            tr: "String src veya React node olarak görsel alanı.",
+                            en: "Image area as a string src or React node.",
+                        },
+                        type: "string | ReactNode",
+                    },
+                    catalogSet: {
+                        description: {
+                            tr: "Image catalog set adı. Thumb variantı seçilir.",
+                            en: "Image catalog set name. The thumb variant is selected.",
+                        },
+                        type: "string",
+                    },
+                    src: {
+                        description: {
+                            tr: "Image komponentine aktarılan tekil görsel URL'i.",
+                            en: "Single image URL forwarded to Image.",
+                        },
+                        type: "string",
+                    },
+                    externalSet: {
+                        description: {
+                            tr: "Image komponentine aktarılan harici görsel seti.",
+                            en: "External image set forwarded to Image.",
+                        },
+                        type: "object | array",
+                    },
+                    thumbAlt: {
+                        description: {
+                            tr: "Kart görselinin alt metni.",
+                            en: "Alt text for the card image.",
+                        },
+                        type: "string | object",
+                    },
+                    title: {
+                        description: { tr: "Kart başlığı.", en: "Card title." },
+                        type: "string | object",
+                    },
+                    supTitle: {
+                        description: {
+                            tr: "Title üstündeki üst başlık. String değerler title-case uygulanır (ör. TARİHİ MİRAS → Tarihi Miras).",
+                            en: "Overline above title. String values are title-cased (e.g. HISTORICAL HERITAGE → Historical Heritage).",
+                        },
+                        type: "string | object | ReactNode",
+                    },
+                    supTitleIcon: {
+                        description: {
+                            tr: "supTitle yanında gösterilecek Icon adı.",
+                            en: "Icon name rendered beside supTitle.",
+                        },
+                        type: "string",
+                    },
+                    subtitle: {
+                        description: { tr: "Kart alt başlığı.", en: "Card subtitle." },
+                        type: "string | object",
+                    },
+                    description: {
+                        description: { tr: "Kart açıklaması.", en: "Card description." },
+                        type: "string | object",
+                    },
+                    ctaLabel: {
+                        description: {
+                            tr: "Kart aksiyon metni; varsayılan İncele/View.",
+                            en: "Card action copy; defaults to View.",
+                        },
+                        type: "string | object",
+                    },
+                    to: {
+                        description: { tr: "Dahili route.", en: "Internal route." },
+                        type: "string",
+                    },
+                    state: {
+                        description: {
+                            tr: "React Router Link state. Örn. { fromCategory: \"tarihi-miras\" }.",
+                            en: "React Router Link state. e.g. { fromCategory: \"tarihi-miras\" }.",
+                        },
+                        type: "object",
+                    },
+                    href: {
+                        description: { tr: "Harici veya doğrudan URL.", en: "External or direct URL." },
+                        type: "string",
+                    },
+                    onClick: {
+                        description: { tr: "Kart tıklama callback'i.", en: "Card click callback." },
+                        type: "function",
+                    },
+                    target: {
+                        description: {
+                            tr: "href/to hedef davranışı; _blank güvenli window.open kullanır.",
+                            en: "Destination target; _blank uses a safe window.open call.",
+                        },
+                        type: "string",
+                    },
+                    disabled: {
+                        description: {
+                            tr: "Tıklama ve klavye aktivasyonunu kapatır.",
+                            en: "Disables click and keyboard activation.",
+                        },
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/Card/index.js

@@ -0,0 +1,14 @@
+import { componentCreator } from "helpers/componentCreator";
+import { Base } from "./_Base.jsx";
+import Amedist from "./Amedist/index.jsx";
+
+export const cardVariants = {
+    amedist: Amedist,
+};
+
+export const Card = componentCreator({
+    name: "Card",
+    BaseComp: Base,
+    DefaultVariant: Amedist,
+    variants: cardVariants,
+});

package/src/libs/Card/tools/useVars.js

@@ -0,0 +1,95 @@
+import { useMemo, useState, isValidElement } from "react";
+import { Link } from "react-router-dom";
+import { baseStore } from "../../baseStore";
+import { getText as t } from "../../getText";
+
+const isExternalUrl = (url) => /^https?:\/\//i.test(url || "");
+
+const toTitleCase = (value, language) => {
+    if (typeof value !== "string" || !value) return value;
+    const locale = language === "tr" ? "tr-TR" : "en";
+    return value
+        .toLocaleLowerCase(locale)
+        .split(/\s+/)
+        .map((word) => (word ? word.charAt(0).toLocaleUpperCase(locale) + word.slice(1) : word))
+        .join(" ");
+};
+
+const resolveSupTitle = (supTitle, language) => {
+    if (supTitle == null || supTitle === false) return "";
+    if (isValidElement(supTitle)) return supTitle;
+    const resolved = t(supTitle);
+    if (isValidElement(resolved)) return resolved;
+    return toTitleCase(resolved, language);
+};
+
+export const useVars = ({
+    title,
+    subtitle,
+    supTitle,
+    description,
+    ctaLabel,
+    to,
+    href,
+    state,
+    onClick,
+    target,
+    disabled,
+}) => {
+    const language = baseStore.useGlobal((s) => s.language);
+    const [isHovered, setIsHovered] = useState(false);
+    const url = href || to;
+    const isClickable = !disabled && (!!url || !!onClick);
+    const isSemanticLink = !disabled && !!url;
+    const linkComponent = href || isExternalUrl(url) ? "a" : Link;
+
+    const texts = useMemo(
+        () => ({
+            title: t(title),
+            subtitle: t(subtitle),
+            supTitle: resolveSupTitle(supTitle, language),
+            description: t(description),
+            ctaLabel: t(ctaLabel || { tr: "İncele", en: "View" }),
+        }),
+        [title, subtitle, supTitle, description, ctaLabel, language],
+    );
+
+    const handleClick = (event) => {
+        if (!isClickable) return;
+        onClick?.(event);
+    };
+
+    const handleKeyDown = (event) => {
+        if (!isClickable || isSemanticLink) return;
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        handleClick(event);
+    };
+
+    const linkProps = isSemanticLink
+        ? {
+              as: linkComponent,
+              ...(linkComponent === Link
+                  ? { to: url, ...(state !== undefined ? { state } : {}) }
+                  : { href: url }),
+              ...(target ? { target } : {}),
+              ...(target === "_blank" ? { rel: "noopener noreferrer" } : {}),
+          }
+        : {};
+
+    return {
+        texts,
+        isHovered,
+        isClickable,
+        isSemanticLink,
+        linkProps,
+        handleClick,
+        handleKeyDown,
+        hoverProps: {
+            onMouseEnter: () => setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            onFocus: () => setIsHovered(true),
+            onBlur: () => setIsHovered(false),
+        },
+    };
+};

package/src/libs/CardViewer/Grid.js

@@ -0,0 +1,7 @@
+import { S } from "./tools/_styled";
+
+export const X = {
+    layout: S.Grid,
+};
+
+export default X;

package/src/libs/CardViewer/Masonry.js

@@ -0,0 +1,7 @@
+import { S } from "./tools/_styled";
+
+export const X = {
+    layout: S.Masonry,
+};
+
+export default X;

package/src/libs/CardViewer/_dS.jsx

@@ -0,0 +1,214 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { CardViewer } from ".";
+import sampleSrc from "../Image/assets/sample-landscape.svg";
+
+const items = [
+    {
+        thumb: sampleSrc,
+        title: "Lorem ipsum dolor sit amet.",
+        description: "Quisque faucibus ex sapien vitae pellentesque sem placerat.",
+        to: "/design-system/cardViewer",
+    },
+    {
+        thumb: sampleSrc,
+        title: "Consectetur adipiscing elit.",
+        description: "In id cursus mi pretium tellus duis convallis.",
+        to: "/design-system/cardViewer",
+    },
+];
+
+const X = () => {
+    return (
+        <Ds.page
+            title="<CardViewer>"
+            releasedOn="1.0.0"
+            description={{
+                tr: "CardViewer, Card datasını listelemek için kullanılan viewer katmanıdır. Array tabanlı kullanım, empty state, layout varyantı, card varyantı, basic pagination ve load more aksiyonlarını destekler. BE destekli kullanımda page, offset, pageSize, total, onPageChange ve onLoadMore proplarıyla dış sorgu akışı bağlanabilir.",
+                en: "CardViewer renders collections of Card data. It supports array data, empty state, layout variants, Card variants, basic pagination, and load-more actions. For backend-driven lists, external query state can be connected through page, offset, pageSize, total, onPageChange, and onLoadMore.",
+            }}
+        >
+            <Ds.block
+                title={{ tr: "İki Ayrı Varyant Ekseni", en: "Two independent variant axes" }}
+                description={{
+                    tr: "CardViewer.grid ve CardViewer.masonry yalnızca koleksiyon yerleşimini seçer. cardVariant ise her item için hangi Card varyantının render edileceğini belirler. Bu API'ler birbirinden bağımsızdır: yeni layout varyantları Card API'sini, yeni Card varyantları da viewer yerleşimini miras almak zorunda değildir.",
+                    en: "CardViewer.grid and CardViewer.masonry select only the collection layout. cardVariant selects the Card variant rendered for each item. These APIs are independent: future layout variants do not define the Card API, and future Card variants do not define viewer layout behavior.",
+                }}
+                code={`<CardViewer.grid items={items} cardVariant="amedist" />
+<CardViewer.masonry items={items} cardVariant="amedist" />`}
+            />
+            <Ds.block
+                title={{ tr: "Grid", en: "Grid" }}
+                description={{
+                    tr: "items içindeki her obje Card prop'u gibi değerlendirilir. Grid varyantı aynı row içindeki kartları aynı yüksekliğe stretch eder. Kart genişliği minColumnWidth ile sabit kalır; autoWidth açıldığında aynı satırdaki iki veya daha fazla kart kalan alanı paylaşır.",
+                    en: "Each object in items is treated as Card props. The Grid variant stretches cards in the same row to equal height. Card width remains fixed by minColumnWidth; when autoWidth is enabled, two or more cards in the same row share the remaining space.",
+                }}
+                code={`import { CardViewer } from "${SYS.basePath}";
+
+<CardViewer.grid items={items} />
+<CardViewer.grid items={items} alignX="start" />
+<CardViewer.grid items={items} autoWidth />`}
+                example={<CardViewer.grid items={items} />}
+            />
+            <Ds.block
+                title={{ tr: "Masonry", en: "Masonry" }}
+                description={{
+                    tr: "Masonry, Pinterest benzeri column bazlı yerleşimdir. Bu varyantta kartlar kendi doğal yüksekliğini korur ve kolonlara akar.",
+                    en: "Masonry is a Pinterest-like column-based layout. Cards retain their natural height and flow into columns.",
+                }}
+                code={`<CardViewer.masonry
+    items={items}
+    minColumnWidth={280}
+/>`}
+                example={<CardViewer.masonry items={items} />}
+            />
+            <Ds.block
+                title={{ tr: "Boş Durum", en: "Empty State" }}
+                description={{
+                    tr: "items boşsa emptyText gösterilir. emptyText verilmezse globalData.textLibrary.emptyCardMap kullanılır.",
+                    en: "When items is empty, emptyText is displayed. If emptyText is omitted, globalData.textLibrary.emptyCardMap is used.",
+                }}
+                code={`<CardViewer
+    items={[]}
+    emptyText={{ tr: "Henüz kart yok.", en: "No cards yet." }}
+/>`}
+            />
+            <Ds.block
+                title={{ tr: "BE ve Pagination Hazırlığı", en: "Backend and Pagination Readiness" }}
+                description={{
+                    tr: "CardViewer veri çekmez; sorgu state'ini parent yönetir. page değişiminde parent yeni BE sorgusunu yapar ve items/total değerlerini tekrar gönderir. Load more akışında onLoadMore parent tarafında offset/page artırabilir.",
+                    en: "CardViewer does not fetch data; the parent manages query state. On page changes, the parent makes the new backend query and passes items/total again. In a load-more flow, onLoadMore can increment offset or page in the parent.",
+                }}
+                code={`<CardViewer
+    items={items}
+    page={page}
+    pageSize={12}
+    total={total}
+    onPageChange={setPage}
+    onLoadMore={loadMore}
+    hasMore={hasMore}
+    loading={loading}
+/>`}
+            />
+            <Ds.api
+                args="CardViewer common props"
+                props={{
+                    items: {
+                        description: { tr: "Kart datası dizisi.", en: "Array of Card data." },
+                        type: "array",
+                    },
+                    data: {
+                        description: {
+                            tr: "items için geriye uyumlu alias.",
+                            en: "Compatibility alias for items.",
+                        },
+                        type: "array",
+                    },
+                    variant: {
+                        description: { tr: "CardViewer yerleşim varyantı.", en: "CardViewer layout variant." },
+                        type: "string",
+                        defaultValue: '"grid"',
+                    },
+                    cardVariant: {
+                        description: { tr: "Kullanılacak Card varyantı.", en: "Card variant to use." },
+                        type: "string",
+                        defaultValue: '"amedist"',
+                    },
+                    minColumnWidth: {
+                        description: {
+                            tr: "Grid kolon genişliği (sabit). Kartlar bu genişliği korur; 1fr ile esnemez.",
+                            en: "Fixed grid column width. Cards keep this size instead of stretching with 1fr.",
+                        },
+                        type: "number | string",
+                        defaultValue: "280",
+                    },
+                    alignX: {
+                        description: {
+                            tr: "Az kart olduğunda yatay hizalama. center | start | end (left→start, right→end alias).",
+                            en: "Horizontal alignment when cards do not fill the row. center | start | end (left→start, right→end aliases).",
+                        },
+                        type: '"center" | "start" | "end" | "left" | "right"',
+                        defaultValue: '"center"',
+                    },
+                    autoWidth: {
+                        description: {
+                            tr: "true olduğunda tek satırda iki veya daha fazla kart varsa, gap korunarak kartlar kalan genişliği paylaşır. Tek kart minColumnWidth değerinde kalır.",
+                            en: "When true and a row has two or more cards, cards share the remaining width while preserving the gap. A single card keeps minColumnWidth.",
+                        },
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    emptyText: {
+                        description: {
+                            tr: "Boş state metni. String veya dil objesi kabul eder.",
+                            en: "Empty-state copy. Accepts a string or a language object.",
+                        },
+                        type: "string | object",
+                    },
+                    renderItem: {
+                        description: {
+                            tr: "Varsayılan Card renderını tamamen değiştiren render callback'i.",
+                            en: "Render callback that fully replaces default Card rendering.",
+                        },
+                        type: "function(item, index)",
+                    },
+                    getItemProps: {
+                        description: {
+                            tr: "Her item için Card proplarını genişleten callback.",
+                            en: "Callback that extends Card props for each item.",
+                        },
+                        type: "function(item, index)",
+                    },
+                    gap: {
+                        description: {
+                            tr: "Kartlar arasındaki rem tabanlı boşluk.",
+                            en: "Rem-based gap between cards.",
+                        },
+                        type: "number | string",
+                        defaultValue: "20",
+                    },
+                    page: {
+                        description: { tr: "1 tabanlı sayfa numarası.", en: "1-based page number." },
+                        type: "number",
+                    },
+                    offset: {
+                        description: { tr: "Slice veya backend sorgusu için offset.", en: "Offset for a slice or backend query." },
+                        type: "number",
+                    },
+                    pageSize: {
+                        description: { tr: "Sayfa başına kart sayısı.", en: "Number of cards per page." },
+                        type: "number",
+                    },
+                    total: {
+                        description: { tr: "Backend tarafındaki toplam kayıt sayısı.", en: "Total record count on the backend." },
+                        type: "number",
+                    },
+                    onPageChange: {
+                        description: { tr: "Pagination sayfa değişim callback'i.", en: "Pagination page-change callback." },
+                        type: "function",
+                    },
+                    onLoadMore: {
+                        description: { tr: "Load-more callback'i.", en: "Load-more callback." },
+                        type: "function",
+                    },
+                    hasMore: {
+                        description: {
+                            tr: "Load more aksiyonunun gösterilip gösterilmeyeceği.",
+                            en: "Whether the load-more action remains available.",
+                        },
+                        type: "boolean",
+                    },
+                    loading: {
+                        description: {
+                            tr: "Pagination ve load more aksiyonlarının pending/disabled durumu.",
+                            en: "Pending/disabled state for pagination and load-more actions.",
+                        },
+                        type: "boolean",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/CardViewer/index.jsx

@@ -0,0 +1,107 @@
+import { Button } from "../Button";
+import { Card } from "../Card";
+import { Visibility } from "../Visibility";
+import { useVars } from "./tools/useVars";
+import { S } from "./tools/_styled";
+
+const getCardComponent = (cardVariant) => {
+    if (!cardVariant) return Card;
+    return Card[cardVariant] || Card;
+};
+
+const BaseCardViewer = ({
+    items,
+    data,
+    variant = "grid",
+    cardVariant = "amedist",
+    emptyText,
+    renderItem,
+    getItemProps,
+    gap = 20,
+    minColumnWidth = 280,
+    phoneColumns,
+    alignX = "center",
+    autoWidth = false,
+    page = 1,
+    pageSize,
+    offset = 0,
+    total,
+    onPageChange,
+    onLoadMore,
+    hasMore,
+    loading,
+    loadMoreLabel = { tr: "Daha fazla yükle", en: "Load more" },
+    previousLabel = { tr: "Önceki", en: "Previous" },
+    nextLabel = { tr: "Sonraki", en: "Next" },
+    ...rest
+}) => {
+    const { visibleItems, isEmpty, totalPages, hasPreviousPage, hasNextPage } = useVars({
+        items,
+        data,
+        page,
+        pageSize,
+        offset,
+        emptyText,
+        total,
+    });
+
+    const VariantCard = getCardComponent(cardVariant);
+    const cards = visibleItems.map((item, index) => {
+        const key = item?.id || item?.key || item?.catalogSet || index;
+        if (renderItem) return renderItem(item, index);
+        return <VariantCard key={key} {...item} {...getItemProps?.(item, index)} />;
+    });
+
+    return (
+        <Visibility.mount visible={!isEmpty}>
+            <S.Wrapper {...rest}>
+                {variant === "masonry" ? (
+                    <S.Masonry $gap={gap} $minColumnWidth={minColumnWidth}>
+                        {cards}
+                    </S.Masonry>
+                ) : (
+                    <S.Grid
+                        $gap={gap}
+                        $minColumnWidth={minColumnWidth}
+                        $phoneColumns={phoneColumns}
+                        $alignX={alignX}
+                        $autoWidth={autoWidth && visibleItems.length > 1}
+                    >
+                        {cards}
+                    </S.Grid>
+                )}
+                {(onLoadMore || onPageChange) && (
+                    <S.Actions>
+                        {onPageChange && totalPages > 1 && (
+                            <>
+                                <Button.amedist
+                                    label={previousLabel}
+                                    disabled={!hasPreviousPage || loading}
+                                    onClick={() => onPageChange(page - 1)}
+                                />
+                                <Button.amedist
+                                    label={nextLabel}
+                                    disabled={!hasNextPage || loading}
+                                    onClick={() => onPageChange(page + 1)}
+                                />
+                            </>
+                        )}
+                        {onLoadMore && (hasMore ?? true) && (
+                            <Button.amedist
+                                label={loadMoreLabel}
+                                pendingManually={loading}
+                                disabled={loading}
+                                onClick={onLoadMore}
+                            />
+                        )}
+                    </S.Actions>
+                )}
+            </S.Wrapper>
+        </Visibility.mount>
+    );
+};
+
+export const CardViewer = BaseCardViewer;
+
+CardViewer.grid = (props) => <BaseCardViewer {...props} variant="grid" />;
+CardViewer.masonry = (props) => <BaseCardViewer {...props} variant="masonry" />;

package/src/libs/CardViewer/index.test.jsx

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { CardViewer } from ".";
+
+describe("CardViewer", () => {
+    it("unmounts when items are missing or empty", () => {
+        const missing = render(<CardViewer />);
+        const empty = render(<CardViewer items={[]} />);
+
+        expect(missing.container).toBeEmptyDOMElement();
+        expect(empty.container).toBeEmptyDOMElement();
+    });
+});