@c-rex/components 0.1.22 → 0.1.24

package/src/renditions/html.tsx

@@ -0,0 +1,55 @@
+import { FC } from "react";
+import * as cheerio from "cheerio"
+import { FragmentsGetAll } from "../generated/server-components";
+
+interface HtmlRenditionProps {
+    htmlFormats?: string[]
+    shortId: string
+}
+
+export const HtmlRendition: FC<HtmlRenditionProps> = ({
+    shortId,
+    htmlFormats = ["application/xhtml+xml", "application/html", "text/html"]
+}) => {
+    const empty = <div>No rendition available</div>;
+
+    return (
+        <FragmentsGetAll
+            queryParams={{
+                Fields: ["titles", "renditions"],
+                Embed: ["renditions"],
+                PageSize: 1,
+                Links: true,
+                Restrict: [
+                    `informationUnits=${shortId}`,
+                    ...htmlFormats.map(format => `renditions.format=${format}`)
+                ],
+
+            }}
+            render={async (data, error) => {
+                if (error) {
+                    return <div>Error loading content</div>;
+                }
+
+                const renditions = data?.items?.[0]?.renditions;
+
+                if (renditions == null || renditions.length == 0) return empty;
+                if (renditions.length == 0 || renditions[0] == undefined || renditions[0].links == undefined) return empty;
+
+                const filteredLinks = renditions[0].links.filter((item) => item.rel == "view");
+
+                if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
+
+                const url = filteredLinks[0].href;
+                const html = await fetch(url).then(res => res.text());
+
+
+                const $ = cheerio.load(html)
+
+                const articleHtml = $("body").html() || ""
+
+                return <div dangerouslySetInnerHTML={{ __html: articleHtml }} />;
+            }}
+        />
+    )
+}

package/src/renditions/image/container.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { FC } from "react";
+import { FragmentsGetAllClient } from "../../generated/client-components";
+import { ImageRendition } from "./rendition";
+import { Skeleton } from "@c-rex/ui/skeleton";
+
+interface ImageContainerProps {
+    itemShortId: string;
+    imageRestrictions?: string[];
+    imageFormats?: string[];
+    emptyImageStyle?: string;
+    imageStyle?: string;
+}
+
+export const ImageRenditionContainer: FC<ImageContainerProps> = ({
+    itemShortId,
+    imageRestrictions,
+    emptyImageStyle,
+    imageStyle,
+    imageFormats = ["image/svg+xml", "image/gif", "image/png", "image/jpg"],
+}) => {
+    const newRestrictions = [
+        `informationUnits=${itemShortId}`,
+        //...imageFormats.map(format => `renditions.format=${format}`)
+    ];
+
+    return (
+        <FragmentsGetAllClient
+            queryParams={{
+                Fields: ["titles", "renditions"],
+                Embed: ["renditions"],
+                PageSize: 1,
+                Links: true,
+                Restrict: newRestrictions,
+            }}
+        >
+            {({ data, isLoading }) => (
+                isLoading ? (
+                    <Skeleton className="w-full h-full" />
+                ) : (
+                    <ImageRendition
+                        items={data?.items as any}
+                        formats={imageFormats}
+                        emptyImageStyle={emptyImageStyle}
+                        imageStyle={imageStyle}
+                    />
+                )
+            )}
+        </FragmentsGetAllClient>
+    )
+}

package/src/renditions/image/rendition.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { FC } from "react";
+import { ImageOff } from "lucide-react";
+import { DocumentModel, ExternalProductGraphicModel, FragmentModel, InformationUnitModel, PackageModel, RenditionModel, TopicModel } from "@c-rex/interfaces";
+import { cn } from "@c-rex/utils";
+interface ImageRenditionProps {
+    items: (
+        DocumentModel |
+        ExternalProductGraphicModel |
+        FragmentModel |
+        InformationUnitModel |
+        PackageModel |
+        TopicModel
+    )[];
+    emptyImageStyle?: string;
+    imageStyle?: string;
+    formats: string[];
+}
+
+export const ImageRendition: FC<ImageRenditionProps> = ({ items, formats, emptyImageStyle, imageStyle }) => {
+    if (!items || items.length === 0) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
+
+    const item = items[0];
+    if (!item || item == undefined) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
+
+    const wanted = formats.map((f) => f.toLowerCase());
+    let rendition = null
+    const renditions = items[0]?.renditions as RenditionModel[] || [];
+
+
+    for (const fmt of wanted) {
+
+        const found = renditions.find((r) => r.format?.toLowerCase() === fmt);
+
+        if (found) {
+            rendition = found;
+            break;
+        }
+    }
+
+    if (rendition == null) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
+
+    const src =
+        rendition.links?.find((l) => l.rel === "view")?.href ??
+        rendition.links?.find((l) => l.rel === "download")?.href ??
+        rendition.links?.find((l) => l.rel === "resource")?.href ??
+        rendition.source ??
+        "";
+
+    if (!src) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
+
+    const alt =
+        item.labels?.[0]?.value ??
+        item.titles?.[0]?.value ??
+        "Document image";
+
+    return (
+        <img src={src} alt={alt} loading="lazy" className={cn(imageStyle, "w-full")} />
+    );
+}

package/src/{dialog-filter.tsx → results/dialog-filter.tsx}

@@ -1,3 +1,5 @@
+"use client"
+
 import React, { FC, useEffect, useState } from "react"
 import { Button } from "@c-rex/ui/button"
 import {
@@ -17,9 +19,9 @@ import { useTranslations } from "next-intl"
 import { LanguageAndCountries } from "@c-rex/interfaces"
 import { WILD_CARD_OPTIONS, OPERATOR_OPTIONS } from "@c-rex/constants"
 import { Switch } from "@c-rex/ui/switch"
-import { useSearchSettingsStore } from "./stores/search-settings-store"
+import { useSearchSettingsStore } from "../stores/search-settings-store"
 import { OperatorType, WildCardType } from "@c-rex/types"
-import { useLanguageStore } from "./stores/language-store"
+import { useLanguageStore } from "../stores/language-store"
 
 interface DialogFilterProps {
     trigger: React.ReactNode;
@@ -32,30 +34,31 @@ interface Languages {
 
 export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     const t = useTranslations("filter");
-
-    const savedLike = useSearchSettingsStore((state) => state.like)
-    const savedOperator = useSearchSettingsStore((state) => state.operator)
-    const savedWildcard = useSearchSettingsStore((state) => state.wildcard)
-    const savedLanguages = useLanguageStore(state => state.contentLang);
+    const contentLang = useLanguageStore(state => state.contentLang);
+    const searchLanguages = useSearchSettingsStore(state => state.language);
     const availableLanguagesAndCountries = useLanguageStore(state => state.availableLanguages);
 
-    const [like, setLike] = useState<boolean>(savedLike);
-    const [operator, setOperator] = useState<string>(savedOperator);
-    const [wildcard, setWildcard] = useState<string>(savedWildcard);
+    const [like, setLike] = useState<boolean>(useSearchSettingsStore.getState().like);
+    const [operator, setOperator] = useState<string>(useSearchSettingsStore.getState().operator);
+    const [wildcard, setWildcard] = useState<string>(useSearchSettingsStore.getState().wildcard);
+    const [languages, setLanguages] = useState<Languages[]>([]);
 
-    const generateLanguagesList = (): Languages[] => {
-        return availableLanguagesAndCountries?.map((item: LanguageAndCountries) => {
-            const checked = savedLanguages.includes(item.value)
+    useEffect(() => {
+        const aux: Languages[] = availableLanguagesAndCountries.map((item: LanguageAndCountries) => {
+            const checked = searchLanguages.length === 0
+                ? item.value === contentLang
+                : searchLanguages.includes(item.value);
 
             return {
                 lang: item.lang,
                 value: item.value,
-                checked,
+                checked: checked,
             }
-        })
-    }
+        });
+
+        setLanguages(aux);
+    }, [availableLanguagesAndCountries, contentLang]);
 
-    const [languages, setLanguages] = useState<Languages[]>(generateLanguagesList());
     const [params, setParams] = useQueryStates({
         search: parseAsString,
         language: parseAsString,
@@ -99,10 +102,6 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
         });
     }
 
-    useEffect(() => {
-        setLanguages(generateLanguagesList())
-    }, [availableLanguagesAndCountries])
-
     return (
         <Dialog>
             <DialogTrigger asChild>
@@ -118,13 +117,13 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
                         {t("languages")}:
                     </Label>
                     <div className="flex items-center">
-                        {languages?.map((item: any, index: any) => {
+                        {languages?.map((item, index) => {
                             return (
                                 <div key={index} className="mr-4">
                                     <Checkbox
                                         id={`available-languages${item.lang}`}
                                         className="mr-2"
-                                        {...({ checked: item.checked })}
+                                        checked={item.checked}
                                         onCheckedChange={(checked: boolean) => onChangeCheckbox({
                                             ...item,
                                             checked: checked,

package/src/results/filter-navbar.tsx

@@ -0,0 +1,241 @@
+"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";
+
+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 [params, setParams] = useQueryStates({
+        language: parseAsString,
+        page: parseAsInteger,
+        wildcard: parseAsString,
+        operator: parseAsString,
+        packages: parseAsString,
+        filter: parseAsString,
+        like: parseAsBoolean,
+        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) {
+            const languages = params.language.split(",")
+            languages.forEach((item) => {
+                const aux = languages.filter(langItem => langItem !== item)
+                filters.push({
+                    key: "language",
+                    name: t(`languages`),
+                    value: item.toUpperCase(),
+                    removable: languages.length > 1,
+                    default: aux.join(",")
+                })
+            })
+        }
+
+        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.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", "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>
+    );
+};

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

@@ -0,0 +1,125 @@
+"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>
+    )
+    }
+    */
+
+    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>
+    );
+};