@c-rex/components 0.1.38 → 0.1.39

package/src/results/filter-sidebar/__tests__/utils.test.ts

@@ -0,0 +1,129 @@
+import { Tags } from "@c-rex/interfaces";
+import {
+    clearData,
+    memoizeFilteredTags,
+    resolveLabelByLanguage,
+    updateFilterParam,
+    removeFilterItem,
+} from "../utils";
+
+const createTags = (): Tags => ({
+    informationSubjects: {
+        labels: ["Information Subjects"],
+        items: [
+            {
+                hits: 3,
+                total: 10,
+                labels: [
+                    { language: "en", value: "Translation" },
+                    { language: "de", value: "Uebersetzung" },
+                ],
+                shortId: "subA",
+                id: "https://example.org/subA",
+            } as unknown as Tags[string]["items"][number],
+            {
+                hits: 0,
+                total: 5,
+                labels: [{ language: "en", value: "Collection" }],
+                shortId: "subB",
+                id: "https://example.org/subB",
+            } as unknown as Tags[string]["items"][number],
+        ],
+    },
+    packages: {
+        labels: ["Packages"],
+        items: [
+            {
+                hits: 2,
+                total: 2,
+                labels: [{ language: "en", value: "Default Package" }],
+                shortId: "pkgA",
+                id: "https://example.org/pkgA",
+            } as unknown as Tags[string]["items"][number],
+        ],
+    },
+});
+
+describe("filter-sidebar utils", () => {
+    it("resolveLabelByLanguage prefers exact language, then base, then fallback", () => {
+        const labels = [
+            { language: "en", value: "English Label" },
+            { language: "de", value: "German Label" },
+            { value: "Neutral Label" },
+        ];
+
+        expect(resolveLabelByLanguage(labels, "de-DE")).toBe("German Label");
+        expect(resolveLabelByLanguage(labels, "en-US")).toBe("English Label");
+        expect(resolveLabelByLanguage([{ value: "Neutral Label" }], "fr-FR")).toBe("Neutral Label");
+        expect(resolveLabelByLanguage([], "en")).toBeUndefined();
+    });
+
+    it("clearData includes zero-hit entries by default", () => {
+        const tags = createTags();
+        const result = clearData(tags, { uiLanguage: "en" });
+
+        expect(result.informationSubjects).toHaveLength(2);
+        expect(result.informationSubjects?.map((item) => item.shortId)).toEqual(["subA", "subB"]);
+    });
+
+    it("clearData excludes zero-hit entries when includeZeroHits is false", () => {
+        const tags = createTags();
+        const result = clearData(tags, { uiLanguage: "en", includeZeroHits: false });
+
+        expect(result.informationSubjects).toHaveLength(1);
+        expect(result.informationSubjects?.[0]?.shortId).toBe("subA");
+    });
+
+    it("clearData applies facet overrides and stores taxonomyId", () => {
+        const tags = createTags();
+        const result = clearData(tags, {
+            uiLanguage: "en",
+            labelOverrides: {
+                informationSubjects: {
+                    subA: {
+                        label: "Overridden Label",
+                        groupLabel: "Subject Group",
+                        sectionLabel: "Process",
+                    },
+                },
+            },
+        });
+
+        expect(result.informationSubjects?.[0]).toMatchObject({
+            label: "Overridden Label",
+            groupLabel: "Subject Group",
+            sectionLabel: "Process",
+            taxonomyId: "https://example.org/subA",
+        });
+    });
+
+    it("memoizeFilteredTags marks active filters and active package", () => {
+        const tags = createTags();
+        const result = memoizeFilteredTags(tags, "informationSubjects.shortId=subA", "pkgA", {
+            uiLanguage: "en",
+        });
+
+        expect(result.informationSubjects?.find((item) => item.shortId === "subA")?.active).toBe(true);
+        expect(result.informationSubjects?.find((item) => item.shortId === "subB")?.active).toBe(false);
+        expect(result.packages?.find((item) => item.shortId === "pkgA")?.active).toBe(true);
+    });
+
+    it("updateFilterParam and removeFilterItem keep query behavior stable", () => {
+        expect(updateFilterParam("packages", { shortId: "pkgA", hits: 0, total: 0, label: "", active: false }, null)).toEqual({
+            packages: "pkgA",
+        });
+
+        expect(updateFilterParam("informationSubjects", { shortId: "subA", hits: 0, total: 0, label: "", active: false }, null)).toEqual({
+            filter: "informationSubjects.shortId=subA",
+        });
+
+        expect(
+            removeFilterItem(
+                "informationSubjects",
+                { shortId: "subA", hits: 0, total: 0, label: "", active: false },
+                "informationSubjects.shortId=subA,packages.shortId=pkgA"
+            )
+        ).toEqual({ filter: "packages.shortId=pkgA" });
+    });
+});
+

package/src/results/filter-sidebar/index.tsx

@@ -1,126 +1,270 @@
-"use client";
-
-import { FC, useMemo } from "react";
-import { useTranslations } from 'next-intl'
-import { Check, ChevronDown } from "lucide-react"
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@c-rex/ui/collapsible";
-import {
-    SidebarContent,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
-    SidebarHeader,
-    SidebarMenu,
-    SidebarMenuSub,
-    SidebarMenuSubButton,
-    SidebarMenuSubItem
-} from "@c-rex/ui/sidebar";
-import { parseAsString, useQueryStates } from "nuqs";
-import { memoizeFilteredTags, removeFilterItem, updateFilterParam } from "./utils";
-import { FilterItem, Tags } from "@c-rex/interfaces";
-
-
-export interface FilterSidebarProps {
-    tags?: Tags
-    totalItemCount?: number
-}
-
-
-//TODO; check layout on mobile
-export const FilterSidebar: FC<FilterSidebarProps> = ({ tags, totalItemCount }) => {
-    const t = useTranslations();
-    const [params, setParams] = useQueryStates({
-        packages: parseAsString,
-        filter: parseAsString,
-    }, {
-        history: 'push',
-        shallow: false,
-    });
-
-    const filteredTags = useMemo(() => {
-        return memoizeFilteredTags(tags, params.filter, params.packages);
-    }, [tags, params.filter, params.packages]);
-
-    const onClickHandler = (key: string, item: FilterItem) => {
-        if (item.active) {
-            setParams(removeFilterItem(key, item, params.filter))
-            return;
-        }
-
-        setParams(updateFilterParam(key, item, params.filter))
-    }
-
-    const content = (
-        <SidebarContent className="!gap-0" suppressHydrationWarning>
-
-            {Object.entries(filteredTags).map(([key, value]) => (
-
-                <Collapsible defaultOpen key={key} className="py-0 group/collapsible">
-                    <SidebarGroup>
-
-                        <SidebarGroupLabel asChild className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold">
-                            <CollapsibleTrigger className="!h-9">
-                                {t(`filter.tags.${key}`)}
-                                <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
-                            </CollapsibleTrigger>
-                        </SidebarGroupLabel>
-
-                        <CollapsibleContent>
-                            <SidebarGroupContent>
-                                <SidebarMenu>
-                                    <SidebarMenuSub>
-                                        {value.map((item) => (
-                                            <SidebarMenuSubItem key={item.shortId}>
-                                                <SidebarMenuSubButton
-                                                    className="cursor-pointer"
-                                                    isActive={item.active}
-                                                    onClick={() => onClickHandler(key, item)}
-                                                >
-                                                    {item.label} ({item.hits}/{item.total})
-                                                    {item.active && <Check className="ml-2" />}
-                                                </SidebarMenuSubButton>
-                                            </SidebarMenuSubItem>
-                                        ))}
-                                    </SidebarMenuSub>
-                                </SidebarMenu>
-                            </SidebarGroupContent>
-                        </CollapsibleContent>
-                    </SidebarGroup>
-                </Collapsible>
-            ))}
-        </SidebarContent>
-    )
-
-    /*
-    if (isMobile) {
-        return (
-            
-        <SheetContent
-        side="left"
-        className="!pt-6 !px-2 w-[400px] overflow-y-auto"
-        >
-        <SheetHeader className="justify-center items-end font-bold">
-        {t("filter.filters")}
-        <span className="text-xs text-muted-foreground leading-5">
-        {totalItemCount} {t("results.results")}
-        </span>
-        </SheetHeader>
-        {content}
-        </SheetContent>
-    )
-    }
-    */
-    if (Object.entries(filteredTags).length === 0) return null;
-
-    return (
-        <div className="w-60 lg:w-80 bg-sidebar rounded-md border pb-4">
-            <SidebarHeader className="justify-center items-end font-bold">
-                {t("filter.filters")}
-                <span className="text-xs text-muted-foreground leading-5">
-                    {totalItemCount} {t("results.results")}
-                </span>
-            </SidebarHeader>
-            {content}
-        </div>
-    );
-};
+"use client";
+
+import { FC, useMemo } from "react";
+import { useLocale, useTranslations } from 'next-intl'
+import { Check, ChevronDown } from "lucide-react"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@c-rex/ui/collapsible";
+import {
+    SidebarContent,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem
+} from "@c-rex/ui/sidebar";
+import { parseAsString, useQueryStates } from "nuqs";
+import { applyFacetPropertyVisibility, FacetLabelOverrides, memoizeFilteredTags, removeFilterItem, ResolvedFilterItem, resolveLabelByLanguage, updateFilterParam } from "./utils";
+import { FilterItem, Tags } from "@c-rex/interfaces";
+
+
+export interface FilterSidebarProps {
+    tags?: Tags
+    totalItemCount?: number
+    facetLabelOverrides?: FacetLabelOverrides
+    includeZeroHits?: boolean
+    includeProperties?: string[]
+    excludeProperties?: string[]
+}
+
+
+//TODO; check layout on mobile
+export const FilterSidebar: FC<FilterSidebarProps> = ({
+    tags,
+    totalItemCount,
+    facetLabelOverrides,
+    includeZeroHits = true,
+    includeProperties,
+    excludeProperties,
+}) => {
+    const t = useTranslations();
+    const locale = useLocale();
+    const [params, setParams] = useQueryStates({
+        packages: parseAsString,
+        filter: parseAsString,
+    }, {
+        history: 'push',
+        shallow: false,
+    });
+
+    const filteredTags = useMemo(() => {
+        const resolved = memoizeFilteredTags(tags, params.filter, params.packages, {
+            uiLanguage: locale,
+            labelOverrides: facetLabelOverrides,
+            includeZeroHits,
+        });
+        return applyFacetPropertyVisibility(resolved, includeProperties, excludeProperties);
+    }, [tags, params.filter, params.packages, locale, facetLabelOverrides, includeZeroHits, includeProperties, excludeProperties]);
+
+    const onClickHandler = (key: string, item: FilterItem) => {
+        if (item.active) {
+            setParams(removeFilterItem(key, item, params.filter))
+            return;
+        }
+
+        setParams(updateFilterParam(key, item, params.filter))
+    }
+
+    const resolvePropertyLabel = (propertyKey: string): string => {
+        const rawLabels = (tags?.[propertyKey]?.labels as unknown[] | undefined) || [];
+        const normalized = rawLabels
+            .map((item) => {
+                if (typeof item === "string") {
+                    return { value: item };
+                }
+
+                if (item && typeof item === "object") {
+                    const labelObj = item as { language?: string; value?: string };
+                    if (typeof labelObj.value === "string") {
+                        return { language: labelObj.language, value: labelObj.value };
+                    }
+                }
+
+                return undefined;
+            })
+            .filter((item): item is { language?: string; value: string } => Boolean(item));
+
+        return resolveLabelByLanguage(normalized, locale) || propertyKey;
+    };
+
+    const content = (
+        <SidebarContent className="!gap-0" suppressHydrationWarning>
+
+            {Object.entries(filteredTags).map(([key, value]) => {
+                const items = value as ResolvedFilterItem[];
+                const hasSectionLabels = items.some((item) => Boolean(item.sectionLabel));
+                const propertyLabel = resolvePropertyLabel(key);
+
+                return (
+                    <div
+                        key={key}
+                        data-filter-group-key={key}
+                        className="border-b border-border/40 pb-1 mb-1 last:border-b-0 last:mb-0"
+                    >
+                        {!hasSectionLabels && (
+                            <Collapsible defaultOpen className="py-0 group/collapsible">
+                                <SidebarGroup className="!p-1">
+                                    <SidebarGroupLabel asChild className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold">
+                                        <CollapsibleTrigger className="!h-8">
+                                            {propertyLabel}
+                                            <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                                        </CollapsibleTrigger>
+                                    </SidebarGroupLabel>
+                                    <CollapsibleContent>
+                                        <SidebarGroupContent>
+                                            <SidebarMenu className="!gap-0.5">
+                                                <SidebarMenuSub className="!ml-2 !pl-1.5 !py-0 !gap-0.5">
+                                                    {items.map((item) => (
+                                                        <SidebarMenuSubItem key={item.shortId}>
+                                                            <SidebarMenuSubButton
+                                                                className="cursor-pointer !py-1.5"
+                                                                data-taxonomy-id={item.taxonomyId}
+                                                                data-taxonomy-short-id={item.shortId}
+                                                                isActive={item.active}
+                                                                onClick={() => onClickHandler(key, item)}
+                                                            >
+                                                                {item.label} ({item.hits}/{item.total})
+                                                                {item.active && <Check className="ml-2" />}
+                                                            </SidebarMenuSubButton>
+                                                        </SidebarMenuSubItem>
+                                                    ))}
+                                                </SidebarMenuSub>
+                                            </SidebarMenu>
+                                        </SidebarGroupContent>
+                                    </CollapsibleContent>
+                                </SidebarGroup>
+                            </Collapsible>
+                        )}
+
+                        {hasSectionLabels && (
+                            <>
+                                <div className="sr-only">{propertyLabel}</div>
+                                {Object.entries(
+                                    items.reduce<Record<string, ResolvedFilterItem[]>>((acc, item) => {
+                                        const sectionLabel = item.sectionLabel || "Other";
+                                        if (!acc[sectionLabel]) acc[sectionLabel] = [];
+                                        acc[sectionLabel].push(item);
+                                        return acc;
+                                    }, {})
+                                )
+                                    .sort(([a], [b]) => a.localeCompare(b))
+                                    .map(([sectionLabel, sectionItems]) => {
+                                        const hasNestedGroups = sectionItems.some((item) => Boolean(item.groupLabel));
+                                        return (
+                                            <Collapsible
+                                                defaultOpen
+                                                key={`${key}:${sectionLabel}`}
+                                                className="py-0 group/collapsible"
+                                            >
+                                                <SidebarGroup className="!p-1">
+                                                    <SidebarGroupLabel
+                                                        asChild
+                                                        className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold"
+                                                    >
+                                                        <CollapsibleTrigger className="!h-8">
+                                                            {sectionLabel}
+                                                            <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                                                        </CollapsibleTrigger>
+                                                    </SidebarGroupLabel>
+                                                    <CollapsibleContent>
+                                                        <SidebarGroupContent>
+                                                            <SidebarMenu className="!gap-0.5">
+                                                                <SidebarMenuSub className="!ml-2 !pl-1.5 !py-0 !gap-0.5">
+                                                                    {!hasNestedGroups &&
+                                                                        sectionItems.map((item) => (
+                                                                            <SidebarMenuSubItem key={item.shortId}>
+                                                                                <SidebarMenuSubButton
+                                                                                    className="cursor-pointer !py-1.5"
+                                                                                    data-taxonomy-id={item.taxonomyId}
+                                                                                    data-taxonomy-short-id={item.shortId}
+                                                                                    isActive={item.active}
+                                                                                    onClick={() => onClickHandler(key, item)}
+                                                                                >
+                                                                                    {item.label} ({item.hits}/{item.total})
+                                                                                    {item.active && <Check className="ml-2" />}
+                                                                                </SidebarMenuSubButton>
+                                                                            </SidebarMenuSubItem>
+                                                                        ))}
+
+                                                                    {hasNestedGroups &&
+                                                                        Object.entries(
+                                                                            sectionItems.reduce<Record<string, ResolvedFilterItem[]>>((acc, item) => {
+                                                                                const groupLabel = item.groupLabel || "Other";
+                                                                                if (!acc[groupLabel]) acc[groupLabel] = [];
+                                                                                acc[groupLabel].push(item);
+                                                                                return acc;
+                                                                            }, {})
+                                                                        )
+                                                                            .sort(([a], [b]) => a.localeCompare(b))
+                                                                            .map(([groupLabel, groupedItems]) => (
+                                                                                <div key={groupLabel} className="pb-0.5">
+                                                                                    <div className="px-2 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                                                                                        {groupLabel}
+                                                                                    </div>
+                                                                                    {groupedItems.map((item) => (
+                                                                                        <SidebarMenuSubItem key={item.shortId}>
+                                                                                            <SidebarMenuSubButton
+                                                                                                className="cursor-pointer !py-1.5"
+                                                                                                data-taxonomy-id={item.taxonomyId}
+                                                                                                data-taxonomy-short-id={item.shortId}
+                                                                                                isActive={item.active}
+                                                                                                onClick={() => onClickHandler(key, item)}
+                                                                                            >
+                                                                                                {item.label} ({item.hits}/{item.total})
+                                                                                                {item.active && <Check className="ml-2" />}
+                                                                                            </SidebarMenuSubButton>
+                                                                                        </SidebarMenuSubItem>
+                                                                                    ))}
+                                                                                </div>
+                                                                            ))}
+                                                                </SidebarMenuSub>
+                                                            </SidebarMenu>
+                                                        </SidebarGroupContent>
+                                                    </CollapsibleContent>
+                                                </SidebarGroup>
+                                            </Collapsible>
+                                        );
+                                    })}
+                            </>
+                        )}
+                    </div>
+                );
+            })}
+        </SidebarContent>
+    )
+
+    /*
+    if (isMobile) {
+        return (
+            
+        <SheetContent
+        side="left"
+        className="!pt-6 !px-2 w-[400px] overflow-y-auto"
+        >
+        <SheetHeader className="justify-center items-end font-bold">
+        {t("filter.filters")}
+        <span className="text-xs text-muted-foreground leading-5">
+        {totalItemCount} {t("results.results")}
+        </span>
+        </SheetHeader>
+        {content}
+        </SheetContent>
+    )
+    }
+    */
+    if (Object.entries(filteredTags).length === 0) return null;
+
+    return (
+        <div className="w-60 lg:w-80 bg-sidebar rounded-md border pb-4">
+            <SidebarHeader className="justify-center items-end font-bold">
+                {t("filter.filters")}
+                <span className="text-xs text-muted-foreground leading-5">
+                    {totalItemCount} {t("results.results")}
+                </span>
+            </SidebarHeader>
+            {content}
+        </div>
+    );
+};