@c-rex/components 0.1.21 → 0.1.23

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>
+    );
+};

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

@@ -0,0 +1,164 @@
+import { FilterItem, Tags } from "@c-rex/interfaces";
+import { EN_LANG } from "@c-rex/constants";
+
+export const updateFilterParam = (key: string, item: FilterItem, filter: string | null): Record<string, string | null> => {
+
+    if (key === "packages") {
+        return { packages: item.shortId }
+    }
+
+    const value = `${key}.shortId=${item.shortId}`
+    let aux = value
+
+    if (filter != null) {
+        const splittedParam = filter.split(",")
+        const finalValue = [...splittedParam]
+
+        const hasParams = filter.includes(key)
+
+        if (hasParams) {
+            let mainIndex = -1
+
+            splittedParam.forEach((el, index) => {
+                if (el.includes(key)) {
+                    mainIndex = index
+                }
+            })
+            finalValue[mainIndex] = value
+        } else {
+            finalValue.push(value)
+        }
+
+        aux = finalValue.join(",")
+    }
+
+    return { filter: aux }
+};
+
+export const removeFilterItem = (key: string, item: FilterItem, filter: string | null): Record<string, string | null> => {
+    if (key === "packages") {
+        return { packages: null }
+    }
+
+    if (filter !== null) {
+        const value = `${key}.shortId=${item.shortId}`
+        const newValue = filter.split(",").filter(item => item !== value).join(",")
+        return { filter: newValue.length === 0 ? null : newValue }
+    }
+
+    return {}
+}
+
+export const clearData = (tags: Tags): Record<string, FilterItem[]> => {
+    const contentLang = EN_LANG.toLowerCase()
+    const splittedContentLang = contentLang.split("-")[0];
+    const filteredTags: Record<string, FilterItem[]> = {}
+
+    for (const [key, value] of Object.entries(tags)) {
+        if (!value || !value.items || value.items.length === 0) {
+            continue;
+        }
+
+        const aux = value.items.map(item => {
+            if (item?.shortId === undefined) return null
+            if (Number(item.hits) === 0) return null
+            if (item?.labels === undefined || item?.labels.length === 0) {
+                /*
+                logger.log({
+                    level: "warning",
+                    message: `No labels on item with id ${item.shortId} from category ${key}`
+                })
+                */
+
+                return null;
+            }
+
+            let label = ""
+
+            for (const labelItem of item.labels) {
+                if (labelItem.language === undefined) {
+                    /*
+                    logger.log({
+                        level: "info",
+                        message: `No language on label ${labelItem.value} from category ${key}`
+                    })
+                    */
+                    label = labelItem.value
+                    break;
+                }
+
+                if (labelItem.language.toLowerCase() === contentLang || labelItem.language.toLowerCase() === splittedContentLang) {
+                    label = labelItem.value
+                    break;
+                }
+
+                label = labelItem.value
+
+                // todo: fallback in english
+            }
+
+            return {
+                hits: item.hits,
+                total: item.total,
+                label: label,
+                active: false,
+                shortId: item.shortId,
+            }
+        }).filter((item) => item !== null)
+
+        if (aux.length === 0) {
+            continue;
+        }
+
+        filteredTags[key] = aux;
+    }
+
+    return filteredTags;
+}
+
+export const memoizeFilteredTags = (tags: Tags | undefined, filter: string | null, packages: string | null) => {
+
+    if (!tags) return {};
+
+    const newTags: Record<string, FilterItem[]> = clearData(tags);
+
+    if (filter !== null) {
+        const splittedParam = filter.split(",")
+
+        splittedParam.forEach((item) => {
+            const aux = item.split(".shortId=")
+            const name = aux[0] as string
+            const shortId = aux[1] as string
+
+            if (!Object.keys(newTags).includes(name)) {
+                newTags[name] = []
+            }
+
+            newTags[name]?.forEach((el) => {
+                if (el.shortId == shortId) {
+                    el.active = true
+                } else {
+                    el.active = false
+                }
+            })
+        })
+    } else {
+        Object.keys(newTags).forEach((key) => {
+            newTags[key]?.forEach((el) => {
+                el.active = false
+            })
+        })
+    }
+
+    if (packages !== null && newTags["packages"]) {
+        newTags["packages"].forEach((el) => {
+            if (el.shortId == packages) {
+                el.active = true
+            } else {
+                el.active = false
+            }
+        })
+    }
+
+    return newTags
+}

package/src/{pagination.tsx → results/pagination.tsx}

@@ -1,4 +1,6 @@
-import React, { FC } from "react";
+"use client"
+
+import { FC } from "react";
 import {
     Pagination as PaginationUI,
     PaginationContent,
@@ -8,13 +10,13 @@ import {
     PaginationPrevious,
 } from "@c-rex/ui/pagination"
 import { parseAsInteger, useQueryState } from "nuqs";
+import { ResultContainerPageInfoModel } from "@c-rex/interfaces";
 
 interface PaginationProps {
-    totalPages: number;
-    currentPage: number;
+    pageInfo: ResultContainerPageInfoModel;
 }
 
-export const Pagination: FC<PaginationProps> = ({ totalPages, currentPage }) => {
+export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
     const disabledClass = "opacity-50 pointer-events-none";
 
     const [_, setPage] = useQueryState('page',
@@ -34,16 +36,16 @@ export const Pagination: FC<PaginationProps> = ({ totalPages, currentPage }) =>
                 <PaginationItem>
                     <PaginationPrevious
                         href="#"
-                        className={currentPage === 1 ? disabledClass : ""}
-                        onClick={() => onChangePage(currentPage - 1)}
+                        className={pageInfo.pageNumber === 1 ? disabledClass : ""}
+                        onClick={() => onChangePage(pageInfo.pageNumber! - 1)}
                     />
                 </PaginationItem>
 
-                {Array.from({ length: totalPages }, (_, index) => index + 1).map((page) => (
+                {Array.from({ length: pageInfo.pageCount || 1 }, (_, index) => index + 1).map((page) => (
                     <PaginationItem key={page}>
                         <PaginationLink
                             href="#"
-                            isActive={page === currentPage}
+                            isActive={page === pageInfo.pageNumber}
                             onClick={() => onChangePage(page)}
                         >
                             {page}
@@ -59,8 +61,8 @@ export const Pagination: FC<PaginationProps> = ({ totalPages, currentPage }) =>
                 <PaginationItem>
                     <PaginationNext
                         href="#"
-                        onClick={() => onChangePage(currentPage + 1)}
-                        className={currentPage === totalPages ? disabledClass : ""}
+                        onClick={() => onChangePage(pageInfo.pageNumber! + 1)}
+                        className={pageInfo.pageNumber === pageInfo.pageCount ? disabledClass : ""}
                     />
                 </PaginationItem>
             </PaginationContent>

package/src/results/result-container.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from "react";
+import {
+    DocumentModel,
+    ResultContainerModel,
+    ExternalProductGraphicModel,
+    FragmentModel,
+    InformationUnitModel,
+    PackageModel,
+    TopicModel
+} from "@c-rex/interfaces";
+import { Empty } from "./empty";
+
+type ResultData = ResultContainerModel<
+    DocumentModel |
+    ExternalProductGraphicModel |
+    FragmentModel |
+    InformationUnitModel |
+    PackageModel |
+    TopicModel
+>;
+
+const vertical = "vertical";
+const horizontal = "horizontal";
+
+interface ResultContainerProps {
+    data?: ResultData;
+    error?: { message: string; name: string };
+    layout?: typeof vertical | typeof horizontal;
+
+    FilterComponent?: FC<any>;
+    ResultsComponent: FC<any>;
+    PaginationComponent: FC<any>;
+    [key: string]: unknown;
+}
+
+export const ResultContainer: FC<ResultContainerProps> = ({
+    data,
+    error,
+    layout = horizontal,
+    FilterComponent,
+    ResultsComponent,
+    PaginationComponent,
+    ...props
+}) => {
+    if (error) {
+        return <div>Error: {error.message}</div>;
+    }
+
+    if (!data || data.items.length === 0) {
+        return <Empty />;
+    }
+
+    return (
+        <div className="flex flex-row gap-6 pb-6">
+
+            {(data.tags && FilterComponent) && (
+                <FilterComponent
+                    tags={data.tags}
+                    totalItemCount={data.pageInfo.totalItemCount!}
+                    {...props}
+                />
+            )}
+            <div className="flex-1">
+                <ResultsComponent items={data.items} {...props} />
+
+                <PaginationComponent pageInfo={data.pageInfo} {...props} />
+            </div>
+        </div>
+    );
+};

package/src/{stories/blog-view.stories.tsx → results/stories/cards.stories.tsx}

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import BlogView from '../result-view/blog';
+import BlogView from '../cards';
 
 const meta: Meta<typeof BlogView> = {
     title: 'Components/ResultView/Blog',

package/src/{stories/table-view.stories.tsx → results/stories/table.stories.tsx}

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import TableView from '../result-view/table';
+import TableView from '../table';
 
 const meta: Meta<typeof TableView> = {
     title: 'Components/ResultView/Table',

package/src/results/table-with-images.tsx

@@ -0,0 +1,140 @@
+import { FC } from "react";
+import {
+    DocumentModel,
+    ExternalProductGraphicModel,
+    FragmentModel,
+    InformationUnitModel,
+    PackageModel,
+    TopicModel
+} from "@c-rex/interfaces";
+import { FileStack } from "lucide-react";
+import { OpenOrDownloadFileDropdown } from "../renditions/file-download";
+import { cn, getType, getTitle, getLanguage } from "@c-rex/utils";
+import { Button } from "@c-rex/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { Favorite, ResultTypes } from "@c-rex/types";
+import { getVersions } from "./utils";
+import { RESULT_TYPES } from "@c-rex/constants";
+import { FavoriteButton } from "../favorites/favorite-button";
+import { ImageRenditionContainer } from "../renditions/image/container";
+import { BookmarkButton } from "../favorites/bookmark-button";
+import { HtmlRendition } from "../renditions/html";
+
+interface TableWithImageProps {
+    items: (
+        DocumentModel |
+        ExternalProductGraphicModel |
+        FragmentModel |
+        InformationUnitModel |
+        PackageModel |
+        TopicModel
+    )[];
+    query?: string;
+    markersList?: Favorite[];
+    disabledResults?: ResultTypes[];
+    imageRestrictions?: string[];
+}
+
+
+export const TableWithImage: FC<TableWithImageProps> = ({ items, query = "", disabledResults = [], imageRestrictions = [] }) => {
+    return (
+        <div className="flex-1">
+            {items.map((item, index) => {
+                const title = getTitle(item.titles, item.labels);
+                const language = getLanguage(item.languages);
+                const itemType = getType(item.class);
+                const disabled = disabledResults.includes(itemType);
+                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
+                const multipleVersions = getVersions(item.versionOf);
+                const packageId = item.packages && item.packages.length > 0 ? item.packages[0]?.shortId : null;
+
+                let itemLink = `/topics/${item.shortId}/content`
+                if (isDocument) {
+                    itemLink = `/documents/${item.shortId}/details`
+                }
+                itemLink += `?q=${query}`
+
+                if (packageId) {
+                    itemLink += `&package=${packageId}`
+                }
+
+
+                return (
+                    <div
+                        key={index}
+                        className={cn(
+                            "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded",
+                            index == items.length - 1 ? "" : "mb-4",
+                            `c-rex-result-item c-rex-result-${itemType}`,
+                            disabled && "c-rex-result-item-disabled",
+                        )}
+                    >
+                        <div className="h-16 w-16 flex items-start">
+                            <ImageRenditionContainer
+                                itemShortId={item.shortId!}
+                                imageRestrictions={imageRestrictions}
+                                emptyImageStyle="h-16 w-16"
+                            />
+                        </div>
+
+                        <div className="flex-1 p-2 flex flex-col">
+                            <span className="text-sm text-muted-foreground">
+                                {language} - {item.shortId}
+                            </span>
+
+                            <span className="text-lg font-medium">
+                                {disabled ? (
+                                    title
+                                ) : (
+                                    <a className="hover:underline" href={itemLink}>{title}</a>
+                                )}
+                            </span>
+
+                            <span className="text-sm">
+                                {itemType}
+                            </span>
+                            <span className="text-sm">
+                                <HtmlRendition shortId={item.shortId!} />
+                            </span>
+                        </div>
+
+                        <div className="flex flex-col p-2 ml-auto justify-center">
+                            <span className="text-end text-sm text-muted-foreground mb-2">
+                                {item.revision}
+                            </span>
+                            <div className="flex gap-2">
+                                <OpenOrDownloadFileDropdown renditions={item.renditions} />
+
+                                {isDocument && (
+                                    <BookmarkButton
+                                        shortId={item.shortId!}
+
+                                    />
+                                )}
+
+                                <FavoriteButton
+                                    id={item.shortId!}
+                                    type={itemType}
+                                    label={title}
+                                />
+
+                                {multipleVersions.length > 1 && (
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button variant="ghost" size="icon">
+                                                <FileStack />
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            Available in: {multipleVersions.join(", ")}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

package/src/{result-view → results}/table.tsx

@@ -5,7 +5,7 @@ import { CloudDownload, Eye } from "lucide-react";
 import { FaFilePdf } from "react-icons/fa6";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@c-rex/ui/dropdown-menu";
 import { cn } from "@c-rex/utils";
-import { Flag } from "../flag";
+import { Flag } from "../icons/flag-icon";
 import { Badge } from "@c-rex/ui/badge";
 import { useQueryState } from "nuqs";
 
@@ -13,7 +13,6 @@ interface TableViewProps {
     items: informationUnitsResponseItem[];
 }
 
-
 const IconsToFileExtension: Record<string, React.ReactNode> = {
     "application/pdf": <FaFilePdf className="h-6 w-6" />,
 };

package/src/results/utils.ts

@@ -0,0 +1,67 @@
+import { LiteralModel, ObjectRefModel, RenditionModel } from "@c-rex/interfaces";
+import { DocumentsType } from "@c-rex/types";
+
+export const getFileRenditions = ({ renditions }: { renditions: RenditionModel[] }): DocumentsType => {
+    if (renditions == undefined || renditions.length == 0) {
+        return {} as DocumentsType;
+    }
+
+    const filteredRenditions = renditions.filter(
+        (item) => item.format != "application/xhtml+xml" && item.format != "application/json" && item.format != "application/llm+xml"
+    );
+
+    if (filteredRenditions.length == 0 || filteredRenditions[0] == undefined) {
+        return {} as DocumentsType;
+    }
+
+    const result: {
+        [key: string]: {
+            view: string;
+            download: string;
+        }
+    } = {}
+
+    filteredRenditions.forEach((item) => {
+        const key = item.format!
+
+        if (result[key] == undefined) {
+            result[key] = {
+                view: "",
+                download: ""
+            }
+        }
+        const download = item.links?.filter((link) => link.rel == "download")[0]?.href
+        const view = item.links?.filter((link) => link.rel == "view")[0]?.href
+
+        if (download != null && download != undefined) {
+            result[key].download = download
+        }
+
+        if (view != null && view != undefined) {
+            result[key].view = view
+        }
+    })
+
+    return result
+}
+
+
+export const getDescription = (descriptions?: LiteralModel[] | null, abstracts?: LiteralModel[] | null): string => {
+    const desc = descriptions?.[0]?.value || abstracts?.[0]?.value;
+    return desc || "";
+};
+
+export const getClassLabel = (classObj?: { labels?: LiteralModel[] | null }): string => {
+    return classObj?.labels?.[0]?.value || "Document";
+};
+
+export const getVersions = (versionOf?: ObjectRefModel) => {
+    let versionList: string[] = []
+    if (versionOf && versionOf.labels) {
+        const aux = versionOf.labels.map(item => item.language!)
+        versionList = aux.filter((value) => value !== undefined);
+    }
+    return versionList;
+};
+
+