@c-rex/components 0.1.37 → 0.1.39

package/src/results/filter-navbar.tsx

@@ -1,261 +1,294 @@
-"use client"
-import { FC, useMemo } from "react";
-import { useTranslations } from "next-intl";
-import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs";
-import { Button } from "@c-rex/ui/button";
-import { Funnel, X } from "lucide-react";
-import { Badge } from "@c-rex/ui/badge";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { OPERATOR_OPTIONS } from "@c-rex/constants";
-import { Tags } from "@c-rex/interfaces";
-import { memoizeFilteredTags } from "./filter-sidebar/utils";
-import { useSearchSettingsStore } from "../stores/search-settings-store";
-import { useRestrictionStore } from "../stores/restriction-store";
-
-type filterModel = {
-    key: string
-    name?: string
-    value: string
-    default?: string | boolean | null
-    removable: boolean
-}
-
-type FilterNavbarProps = {
-    tags?: Tags
-}
-
-export const FilterNavbar: FC<FilterNavbarProps> = ({ tags }) => {
-    const t = useTranslations()
-    const restrictionList = useRestrictionStore((state) => state.restrictionList);
-    const [params, setParams] = useQueryStates({
-        language: parseAsString.withDefault(useSearchSettingsStore.getState().language || ''),
-        page: parseAsInteger.withDefault(1),
-        wildcard: parseAsString.withDefault(useSearchSettingsStore.getState().wildcard),
-        operator: parseAsString.withDefault(useSearchSettingsStore.getState().operator),
-        packages: parseAsString,
-        filter: parseAsString,
-        restrict: parseAsString,
-        like: parseAsBoolean.withDefault(useSearchSettingsStore.getState().like),
-        search: {
-            defaultValue: "",
-            parse(value) {
-                return value
-            },
-        },
-    }, {
-        history: 'push',
-        shallow: false,
-    });
-    const isMobile = false
-
-
-    const filteredTags = useMemo(() => {
-        return memoizeFilteredTags(tags, params.filter, params.packages);
-    }, [tags, params.filter, params.packages]);
-
-    const filters = useMemo(() => {
-        const filters: filterModel[] = [{
-            key: "operator",
-            name: t("filter.operator"),
-            value: `${params?.operator !== OPERATOR_OPTIONS.OR}`,
-            removable: false
-        }, {
-            key: "like",
-            name: t("filter.like"),
-            value: `${params.like}`,
-            removable: false
-        }, {
-            key: "wildcard",
-            name: t("filter.wildcard"),
-            value: params.wildcard as string,
-            removable: false,
-        }]
-
-        if (params.language !== null) {
-            filters.push({
-                key: "language",
-                name: t(`language`),
-                value: params.language.toUpperCase(),
-                removable: false,
-            })
-        }
-
-        if (params.filter !== null) {
-            const splittedParam = params.filter.split(",")
-
-            splittedParam.forEach((item, index) => {
-                const aux = item.split(".shortId=")
-                const name = aux[0] as string
-                const shortId = aux[1] as string
-
-                const defaultValue = [...splittedParam]
-                defaultValue.splice(index, 1)
-
-                if (!Object.keys(filteredTags).includes(name) || !filteredTags[name]) return;
-
-                const tag = filteredTags[name].find(el => el.shortId === shortId)
-                if (!tag) return;
-
-                const value = defaultValue.length == 0 ? null : defaultValue.join(",")
-
-                filters.push({
-                    key: "filter",
-                    name: t(`filter.tags.${name}`),
-                    value: tag.label,
-                    removable: true,
-                    default: value
-                })
-            })
-        }
-
-        if (params.restrict !== null) {
-            const splittedParam = params.restrict.split("=")
-            const key = splittedParam[0]
-            const shortIdList = splittedParam[1]?.split(",") || []
-
-            shortIdList.forEach((item, index) => {
-                const defaultValue = [...shortIdList]
-                defaultValue.splice(index, 1)
-
-                const value = defaultValue.length == 0 ? null : `${key}=${defaultValue.join(",")}`
-
-                filters.push({
-                    key: "restrict",
-                    name: t(`filter.tags.${key}`),
-                    value: restrictionList.get(item) || item,
-                    removable: true,
-                    default: value
-                })
-            })
-        }
-
-        if (params.packages !== null) {
-            let label = params.packages
-
-            if (filteredTags["packages"]) {
-                const aux = filteredTags["packages"].find(el => el.shortId === params.packages)
-
-                if (aux) {
-                    label = aux.label
-                }
-            }
-
-            filters.push({
-                key: "packages",
-                name: t("filter.tags.packages"),
-                value: label,
-                removable: true,
-                default: null
-            })
-        }
-
-        Object.keys(params)
-            .filter(item => !["page", "search", "language", "operator", "like", "wildcard", "filter", "restrict", "packages"].includes(item))
-            .forEach(item => {
-                if (params[item as keyof typeof params] === null || params[item as keyof typeof params] === undefined) return;
-                const value = params[item as keyof typeof params] as string
-                filters.push({ key: item, value: value, removable: true, default: null })
-            })
-
-        return filters
-    }, [filteredTags, params]);
-
-    if (filters == null || filters.length === 0) {
-        return null;
-    }
-
-    return (
-        <div className="pb-4 flex justify-between">
-
-            <div className="flex flex-wrap gap-2">
-                <Button
-                    size="sm"
-                    variant="secondary"
-                    //onClick={() => setOpen(true)}
-                    className="md:hidden"
-                >
-                    <Funnel className="h-2" />
-                </Button>
-
-                {filters.length > 0 && (
-                    <>
-                        {filters.slice(0, 1).map((item) => (
-                            <Badge
-                                key={`${item.key}-${item?.value}`}
-                                variant="outline"
-                                className="h-8"
-                            >
-                                {item?.name ? item.name : item.key}: {item.value}
-
-                                {item.removable && (
-                                    <Button size="xs" variant="ghost" onClick={() => {
-                                        setParams({ [item.key]: item?.default })
-                                    }}>
-                                        <X className="h-2" />
-                                    </Button>
-                                )}
-                            </Badge>
-                        ))}
-
-
-                        {isMobile ? (
-                            <TooltipProvider>
-                                <Tooltip delayDuration={100}>
-                                    <TooltipTrigger>
-                                        <Badge
-                                            key={`grouped-filters`}
-                                            variant="outline"
-                                            className="h-8"
-                                        >
-                                            +{filters.length - 1} {t("filter.filters")}
-                                        </Badge>
-
-                                    </TooltipTrigger>
-
-                                    <TooltipContent>
-                                        {filters.slice(1).map((item) => {
-                                            const label = item?.name ? item.name : item.key
-                                            const returnString = `${label}: ${item.value}`;
-                                            return <div className="capitalize" key={returnString}>{returnString}</div>;
-                                        })}
-                                    </TooltipContent>
-                                </Tooltip>
-                            </TooltipProvider>
-                        ) : (
-                            <>
-                                {filters.slice(1).map((item) => (
-                                    <Badge
-                                        key={`${item.key}-${item?.value}`}
-                                        variant="outline"
-                                        className="h-8"
-                                    >
-                                        {item?.name ? item.name : item.key}: {item.value}
-
-                                        {item.removable && (
-                                            <Button size="xs" variant="ghost" onClick={() => {
-                                                setParams({ [item.key]: item?.default })
-                                            }}>
-                                                <X className="h-2" />
-                                            </Button>
-                                        )}
-                                    </Badge>
-                                ))}
-                            </>
-                        )}
-                    </>
-                )}
-            </div>
-
-            <Button
-                size="sm"
-                variant="secondary"
-                onClick={() => {
-                    setParams({ filter: null, packages: null })
-                }}
-            >
-                {t("reset")}
-            </Button>
-
-        </div>
-    );
-};
+"use client"
+import { FC, useMemo } from "react";
+import { useLocale, useTranslations } from "next-intl";
+import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs";
+import { Button } from "@c-rex/ui/button";
+import { Funnel, X } from "lucide-react";
+import { Badge } from "@c-rex/ui/badge";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { OPERATOR_OPTIONS } from "@c-rex/constants";
+import { Tags } from "@c-rex/interfaces";
+import { applyFacetPropertyVisibility, FacetLabelOverrides, memoizeFilteredTags } from "./filter-sidebar/utils";
+import { useSearchSettingsStore } from "../stores/search-settings-store";
+import { useRestrictionStore } from "../stores/restriction-store";
+
+type filterModel = {
+    key: string
+    name?: string
+    value: string
+    default?: string | boolean | null
+    removable: boolean
+}
+
+type FilterNavbarProps = {
+    tags?: Tags
+    facetLabelOverrides?: FacetLabelOverrides
+    includeZeroHits?: boolean
+    includeProperties?: string[]
+    excludeProperties?: string[]
+}
+
+export const FilterNavbar: FC<FilterNavbarProps> = ({
+    tags,
+    facetLabelOverrides,
+    includeZeroHits = true,
+    includeProperties,
+    excludeProperties,
+}) => {
+    const t = useTranslations()
+    const locale = useLocale()
+    const restrictionList = useRestrictionStore((state) => state.restrictionList);
+    const [params, setParams] = useQueryStates({
+        language: parseAsString.withDefault(useSearchSettingsStore.getState().language || ''),
+        page: parseAsInteger.withDefault(1),
+        wildcard: parseAsString.withDefault(useSearchSettingsStore.getState().wildcard),
+        operator: parseAsString.withDefault(useSearchSettingsStore.getState().operator),
+        packages: parseAsString,
+        filter: parseAsString,
+        restrict: parseAsString,
+        like: parseAsBoolean.withDefault(useSearchSettingsStore.getState().like),
+        search: {
+            defaultValue: "",
+            parse(value) {
+                return value
+            },
+        },
+    }, {
+        history: 'push',
+        shallow: false,
+    });
+    const isMobile = 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 humanizeMetadataKey = (key: string): string =>
+        key
+            .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+            .replace(/[-_]/g, " ")
+            .replace(/\s+/g, " ")
+            .trim()
+            .replace(/^./, (char) => char.toUpperCase());
+
+    const resolveSectionLabelByKey = (key: string): string => {
+        const candidates = filteredTags[key] || [];
+        const sectionLabel = candidates.find((item) => item.sectionLabel)?.sectionLabel;
+        if (sectionLabel) return sectionLabel;
+        const groupLabel = candidates.find((item) => item.groupLabel)?.groupLabel;
+        if (groupLabel) return groupLabel;
+        return humanizeMetadataKey(key);
+    };
+
+    const filters = useMemo(() => {
+        const filters: filterModel[] = [{
+            key: "operator",
+            name: t("filter.operator"),
+            value: `${params?.operator !== OPERATOR_OPTIONS.OR}`,
+            removable: false
+        }, {
+            key: "like",
+            name: t("filter.like"),
+            value: `${params.like}`,
+            removable: false
+        }, {
+            key: "wildcard",
+            name: t("filter.wildcard"),
+            value: params.wildcard as string,
+            removable: false,
+        }]
+
+        if (params.language !== null) {
+            filters.push({
+                key: "language",
+                name: t(`language`),
+                value: params.language.toUpperCase(),
+                removable: false,
+            })
+        }
+
+        if (params.filter !== null) {
+            const splittedParam = params.filter.split(",")
+
+            splittedParam.forEach((item, index) => {
+                const aux = item.split(".shortId=")
+                const name = aux[0] as string
+                const shortId = aux[1] as string
+
+                const defaultValue = [...splittedParam]
+                defaultValue.splice(index, 1)
+
+                if (!Object.keys(filteredTags).includes(name) || !filteredTags[name]) return;
+
+                const tag = filteredTags[name].find(el => el.shortId === shortId)
+                if (!tag) return;
+
+                const value = defaultValue.length == 0 ? null : defaultValue.join(",")
+
+                filters.push({
+                    key: "filter",
+                    name: (tag as { sectionLabel?: string }).sectionLabel || resolveSectionLabelByKey(name),
+                    value: tag.label,
+                    removable: true,
+                    default: value
+                })
+            })
+        }
+
+        if (params.restrict !== null) {
+            const splittedParam = params.restrict.split("=")
+            const key = splittedParam[0]
+            const shortIdList = splittedParam[1]?.split(",") || []
+
+            shortIdList.forEach((item, index) => {
+                const defaultValue = [...shortIdList]
+                defaultValue.splice(index, 1)
+
+                const value = defaultValue.length == 0 ? null : `${key}=${defaultValue.join(",")}`
+
+                filters.push({
+                    key: "restrict",
+                    name: resolveSectionLabelByKey(key),
+                    value: restrictionList.get(item) || item,
+                    removable: true,
+                    default: value
+                })
+            })
+        }
+
+        if (params.packages !== null) {
+            let label = params.packages
+
+            if (filteredTags["packages"]) {
+                const aux = filteredTags["packages"].find(el => el.shortId === params.packages)
+
+                if (aux) {
+                    label = aux.label
+                }
+            }
+
+            filters.push({
+                key: "packages",
+                name: resolveSectionLabelByKey("packages"),
+                value: label,
+                removable: true,
+                default: null
+            })
+        }
+
+        Object.keys(params)
+            .filter(item => !["page", "search", "language", "operator", "like", "wildcard", "filter", "restrict", "packages"].includes(item))
+            .forEach(item => {
+                if (params[item as keyof typeof params] === null || params[item as keyof typeof params] === undefined) return;
+                const value = params[item as keyof typeof params] as string
+                filters.push({ key: item, value: value, removable: true, default: null })
+            })
+
+        return filters
+    }, [filteredTags, params]);
+
+    if (filters == null || filters.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="pb-4 flex justify-between">
+
+            <div className="flex flex-wrap gap-2">
+                <Button
+                    size="sm"
+                    variant="secondary"
+                    //onClick={() => setOpen(true)}
+                    className="md:hidden"
+                >
+                    <Funnel className="h-2" />
+                </Button>
+
+                {filters.length > 0 && (
+                    <>
+                        {filters.slice(0, 1).map((item) => (
+                            <Badge
+                                key={`${item.key}-${item?.value}`}
+                                variant="outline"
+                                className="h-8"
+                            >
+                                {item?.name ? item.name : item.key}: {item.value}
+
+                                {item.removable && (
+                                    <Button size="xs" variant="ghost" onClick={() => {
+                                        setParams({ [item.key]: item?.default })
+                                    }}>
+                                        <X className="h-2" />
+                                    </Button>
+                                )}
+                            </Badge>
+                        ))}
+
+
+                        {isMobile ? (
+                            <TooltipProvider>
+                                <Tooltip delayDuration={100}>
+                                    <TooltipTrigger>
+                                        <Badge
+                                            key={`grouped-filters`}
+                                            variant="outline"
+                                            className="h-8"
+                                        >
+                                            +{filters.length - 1} {t("filter.filters")}
+                                        </Badge>
+
+                                    </TooltipTrigger>
+
+                                    <TooltipContent>
+                                        {filters.slice(1).map((item) => {
+                                            const label = item?.name ? item.name : item.key
+                                            const returnString = `${label}: ${item.value}`;
+                                            return <div className="capitalize" key={returnString}>{returnString}</div>;
+                                        })}
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
+                        ) : (
+                            <>
+                                {filters.slice(1).map((item) => (
+                                    <Badge
+                                        key={`${item.key}-${item?.value}`}
+                                        variant="outline"
+                                        className="h-8"
+                                    >
+                                        {item?.name ? item.name : item.key}: {item.value}
+
+                                        {item.removable && (
+                                            <Button size="xs" variant="ghost" onClick={() => {
+                                                setParams({ [item.key]: item?.default })
+                                            }}>
+                                                <X className="h-2" />
+                                            </Button>
+                                        )}
+                                    </Badge>
+                                ))}
+                            </>
+                        )}
+                    </>
+                )}
+            </div>
+
+            <Button
+                size="sm"
+                variant="secondary"
+                onClick={() => {
+                    setParams({ filter: null, packages: null })
+                }}
+            >
+                {t("reset")}
+            </Button>
+
+        </div>
+    );
+};