@c-rex/components 0.1.37 → 0.1.39

package/src/results/{table.tsx → information-unit-search-results-table.tsx}

@@ -1,104 +1,104 @@
-import { FC } from "react";
-import { informationUnitsResponseItem } from "@c-rex/interfaces";
-import { useTranslations } from "next-intl";
-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 "../icons/flag-icon";
-import { Badge } from "@c-rex/ui/badge";
-import { useQueryState } from "nuqs";
-
-interface TableViewProps {
-    items: informationUnitsResponseItem[];
-}
-
-const IconsToFileExtension: Record<string, React.ReactNode> = {
-    "application/pdf": <FaFilePdf className="h-6 w-6" />,
-};
-
-const TableView: FC<TableViewProps> = ({ items }) => {
-    const t = useTranslations("results")
-    const [query] = useQueryState("search");
-
-
-    return (
-        <div className="rounded-md border mb-6 last:border-b-0">
-            <div className="font-bold text-sm p-2 border-b items-center flex-wrap hidden md:flex">
-                <div className="w-1/2 md:w-2/5 p-2">{t("title")}</div>
-                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("language")}</div>
-                <div className="w-1/2 md:w-1/5 p-2">{t("type")}</div>
-                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("files")}</div>
-            </div>
-
-            {items.map((item) => (
-                <div
-                    className={cn(
-                        "min-h-12 c-rex-result-item flex flex-wrap items-center",
-                        `c-rex-result-${item.type.toLowerCase()}`,
-                        item.disabled && "c-rex-result-item-disabled",
-                        "border-b"
-                    )}
-                    key={item.shortId}
-                >
-                    <div className="w-4/5 md:w-2/5 p-2">
-                        {item.disabled ? (item.title) : (<a href={`${item.link}?q=${query}`}>{item.title}</a>)}
-                    </div>
-
-                    <div className="w-1/5 md:w-1/5 flex justify-center p-2">
-                        <span className="w-8 inline-block">
-                            {item.language.split("-").length > 1 && (
-                                <Flag countryCode={item.language.split("-")[1] as string} />
-                            )}
-                        </span>
-                    </div>
-
-                    <div className="w-4/5 md:w-1/5 p-2">
-                        <Badge variant="secondary">
-                            {item.type}
-                        </Badge>
-                    </div>
-
-                    <div className="w-1/5 flex justify-center p-2">
-                        {(item.disabled || (Object.keys(item.files).length === 0)) ? (
-                            null // remove null rendering
-                        ) : (
-                            <>
-                                {Object.keys(item.files).map((fileKey) => {
-
-                                    if (!item.files[fileKey]) {
-                                        return null
-                                    }
-
-                                    return (
-                                        <DropdownMenu key={fileKey}>
-                                            <DropdownMenuTrigger className="mx-2">
-                                                {IconsToFileExtension[fileKey]}
-                                            </DropdownMenuTrigger>
-                                            <DropdownMenuContent>
-                                                <DropdownMenuItem>
-                                                    <a href={item.files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <Eye className="mr-2" /> Open {/*TODO: use i18n functions*/}
-                                                    </a>
-                                                </DropdownMenuItem>
-                                                <DropdownMenuItem>
-                                                    <a href={item.files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <CloudDownload className="mr-2" /> Download {/*TODO: use i18n functions*/}
-                                                    </a>
-                                                </DropdownMenuItem>
-                                            </DropdownMenuContent>
-                                        </DropdownMenu>
-                                    )
-                                })}
-                            </>
-                        )}
-
-                    </div>
-
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export default TableView;
+import { FC } from "react";
+import { informationUnitsResponseItem } from "@c-rex/interfaces";
+import { useTranslations } from "next-intl";
+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 "../icons/flag-icon";
+import { Badge } from "@c-rex/ui/badge";
+import { useQueryState } from "nuqs";
+
+interface InformationUnitSearchResultsTableProps {
+    items: informationUnitsResponseItem[];
+}
+
+const IconsToFileExtension: Record<string, React.ReactNode> = {
+    "application/pdf": <FaFilePdf className="h-6 w-6" />,
+};
+
+const InformationUnitSearchResultsTable: FC<InformationUnitSearchResultsTableProps> = ({ items }) => {
+    const t = useTranslations("results")
+    const [query] = useQueryState("search");
+
+
+    return (
+        <div className="rounded-md border mb-6 last:border-b-0">
+            <div className="font-bold text-sm p-2 border-b items-center flex-wrap hidden md:flex">
+                <div className="w-1/2 md:w-2/5 p-2">{t("title")}</div>
+                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("language")}</div>
+                <div className="w-1/2 md:w-1/5 p-2">{t("type")}</div>
+                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("files")}</div>
+            </div>
+
+            {items.map((item) => (
+                <div
+                    className={cn(
+                        "min-h-12 c-rex-result-item flex flex-wrap items-center",
+                        `c-rex-result-${item.type.toLowerCase()}`,
+                        item.disabled && "c-rex-result-item-disabled",
+                        "border-b"
+                    )}
+                    key={item.shortId}
+                >
+                    <div className="w-4/5 md:w-2/5 p-2">
+                        {item.disabled ? (item.title) : (<a href={`${item.link}?q=${query}`}>{item.title}</a>)}
+                    </div>
+
+                    <div className="w-1/5 md:w-1/5 flex justify-center p-2">
+                        <span className="w-8 inline-block">
+                            {item.language.split("-").length > 1 && (
+                                <Flag countryCode={item.language.split("-")[1] as string} />
+                            )}
+                        </span>
+                    </div>
+
+                    <div className="w-4/5 md:w-1/5 p-2">
+                        <Badge variant="secondary">
+                            {item.type}
+                        </Badge>
+                    </div>
+
+                    <div className="w-1/5 flex justify-center p-2">
+                        {(item.disabled || (Object.keys(item.files).length === 0)) ? (
+                            null // remove null rendering
+                        ) : (
+                            <>
+                                {Object.keys(item.files).map((fileKey) => {
+
+                                    if (!item.files[fileKey]) {
+                                        return null
+                                    }
+
+                                    return (
+                                        <DropdownMenu key={fileKey}>
+                                            <DropdownMenuTrigger className="mx-2">
+                                                {IconsToFileExtension[fileKey]}
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent>
+                                                <DropdownMenuItem>
+                                                    <a href={item.files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
+                                                        <Eye className="mr-2" /> Open {/*TODO: use i18n functions*/}
+                                                    </a>
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem>
+                                                    <a href={item.files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
+                                                        <CloudDownload className="mr-2" /> Download {/*TODO: use i18n functions*/}
+                                                    </a>
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    )
+                                })}
+                            </>
+                        )}
+
+                    </div>
+
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default InformationUnitSearchResultsTable;

package/src/results/pagination.tsx

@@ -1,81 +1,81 @@
-"use client"
-
-import { FC, MouseEvent } from "react";
-import {
-    Pagination as PaginationUI,
-    PaginationContent,
-    PaginationItem,
-    PaginationLink,
-    PaginationNext,
-    PaginationPrevious,
-} from "@c-rex/ui/pagination"
-import { parseAsInteger, useQueryState } from "nuqs";
-import { ResultContainerPageInfoModel } from "@c-rex/interfaces";
-
-interface PaginationProps {
-    pageInfo: ResultContainerPageInfoModel;
-}
-
-export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
-    const disabledClass = "opacity-50 pointer-events-none";
-
-    const [, setPage] = useQueryState('page',
-        parseAsInteger.withOptions({
-            history: 'push',
-            shallow: false,
-        })
-    )
-
-    const onChangePage = (event: MouseEvent<HTMLAnchorElement>, pageNumber: number) => {
-        event.preventDefault();
-
-        if (
-            pageNumber < 1
-            || (pageInfo.pageCount !== undefined && pageNumber > pageInfo.pageCount)
-            || pageNumber === pageInfo.pageNumber
-        ) {
-            return;
-        }
-
-        void setPage(pageNumber);
-    }
-
-    return (
-        <PaginationUI className="py-4">
-            <PaginationContent>
-                <PaginationItem>
-                    <PaginationPrevious
-                        href="#"
-                        className={pageInfo.pageNumber === 1 ? disabledClass : ""}
-                        onClick={(event) => onChangePage(event, pageInfo.pageNumber! - 1)}
-                    />
-                </PaginationItem>
-
-                {Array.from({ length: pageInfo.pageCount || 1 }, (_, index) => index + 1).map((page) => (
-                    <PaginationItem key={page}>
-                        <PaginationLink
-                            href="#"
-                            isActive={page === pageInfo.pageNumber}
-                            onClick={(event) => onChangePage(event, page)}
-                        >
-                            {page}
-                        </PaginationLink>
-                    </PaginationItem>
-                ))}
-
-                {/*
-                <PaginationItem>
-                    <PaginationEllipsis />
-                </PaginationItem>
-                    */}
-                <PaginationItem>
-                    <PaginationNext
-                        href="#"
-                        onClick={(event) => onChangePage(event, pageInfo.pageNumber! + 1)}
-                        className={pageInfo.pageNumber === pageInfo.pageCount ? disabledClass : ""}
-                    />
-                </PaginationItem>
-            </PaginationContent>
-        </PaginationUI>
-    )
-}
+"use client"
+
+import { FC, MouseEvent } from "react";
+import {
+    Pagination as PaginationUI,
+    PaginationContent,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from "@c-rex/ui/pagination"
+import { parseAsInteger, useQueryState } from "nuqs";
+import { ResultContainerPageInfoModel } from "@c-rex/interfaces";
+
+interface PaginationProps {
+    pageInfo: ResultContainerPageInfoModel;
+}
+
+export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
+    const disabledClass = "opacity-50 pointer-events-none";
+
+    const [, setPage] = useQueryState('page',
+        parseAsInteger.withOptions({
+            history: 'push',
+            shallow: false,
+        })
+    )
+
+    const onChangePage = (event: MouseEvent<HTMLAnchorElement>, pageNumber: number) => {
+        event.preventDefault();
+
+        if (
+            pageNumber < 1
+            || (pageInfo.pageCount !== undefined && pageNumber > pageInfo.pageCount)
+            || pageNumber === pageInfo.pageNumber
+        ) {
+            return;
+        }
+
+        void setPage(pageNumber);
+    }
+
+    return (
+        <PaginationUI className="py-4">
+            <PaginationContent>
+                <PaginationItem>
+                    <PaginationPrevious
+                        href="#"
+                        className={pageInfo.pageNumber === 1 ? disabledClass : ""}
+                        onClick={(event) => onChangePage(event, pageInfo.pageNumber! - 1)}
+                    />
+                </PaginationItem>
+
+                {Array.from({ length: pageInfo.pageCount || 1 }, (_, index) => index + 1).map((page) => (
+                    <PaginationItem key={page}>
+                        <PaginationLink
+                            href="#"
+                            isActive={page === pageInfo.pageNumber}
+                            onClick={(event) => onChangePage(event, page)}
+                        >
+                            {page}
+                        </PaginationLink>
+                    </PaginationItem>
+                ))}
+
+                {/*
+                <PaginationItem>
+                    <PaginationEllipsis />
+                </PaginationItem>
+                    */}
+                <PaginationItem>
+                    <PaginationNext
+                        href="#"
+                        onClick={(event) => onChangePage(event, pageInfo.pageNumber! + 1)}
+                        className={pageInfo.pageNumber === pageInfo.pageCount ? disabledClass : ""}
+                    />
+                </PaginationItem>
+            </PaginationContent>
+        </PaginationUI>
+    )
+}

package/src/results/summary.ts

@@ -0,0 +1,30 @@
+import { CommonItemsModel } from "@c-rex/interfaces";
+import { ResultTypes } from "@c-rex/types";
+import { extractCountryCodeFromLanguage, getLanguage, getTitle, getType, getVersions } from "@c-rex/utils";
+
+export type ResultItemSummary = {
+    title: string;
+    itemType: ResultTypes;
+    language: string;
+    countryCode: string;
+    multipleVersions: string[];
+    packageId: string | null;
+};
+
+export const getResultItemSummary = (item: CommonItemsModel): ResultItemSummary => {
+    const title = getTitle(item.titles, item.labels);
+    const itemType = (getType(item.class) || "TOPIC") as ResultTypes;
+    const language = getLanguage(item.languages);
+    const countryCode = extractCountryCodeFromLanguage(language);
+    const multipleVersions = getVersions(item.versionOf);
+    const packageId = item.packages && item.packages.length > 0 ? item.packages[0]?.shortId || null : null;
+
+    return {
+        title,
+        itemType,
+        language,
+        countryCode,
+        multipleVersions,
+        packageId,
+    };
+};

package/src/results/utils.ts

@@ -1,47 +1,54 @@
-import { 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
-}
-
+import { RenditionModel } from "@c-rex/interfaces";
+import { DocumentsType } from "@c-rex/types";
+
+type Props = {
+    renditions: RenditionModel[];
+    ignoreFormat?: string[];
+}
+export const getFileRenditions = ({
+    renditions,
+    ignoreFormat = ["application/xhtml+xml", "application/json", "application/llm+xml", "text/html"]
+}: Props): DocumentsType => {
+    if (renditions == undefined || renditions.length == 0) {
+        return {} as DocumentsType;
+    }
+
+    const filteredRenditions = renditions.filter(
+        (item) => !ignoreFormat.includes(item.format!)
+    );
+
+    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
+}
+

package/src/search-input.tsx

@@ -1,71 +1,71 @@
-"use client"
-
-import { FC, useEffect, useState } from "react";
-import { FileCheck, FileX, Search } from "lucide-react";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
-import * as AutocompleteOptions from "./generated/suggestions";
-import { useQueryState } from "nuqs";
-
-type PlacedOn = "NAVBAR" | "BODY"
-type Props = {
-    showPkgFilter: boolean
-    placedOn?: PlacedOn
-    onSelectPath: string;
-    autocompleteType: keyof typeof AutocompleteOptions;
-    //these two props are only used when showPkgFilter is false and has some values to override the default behavior
-    alternativeAutocompleteType?: keyof typeof AutocompleteOptions;
-    alternativeOnSelectPath?: string;
-}
-
-export const SearchInput: FC<Props> = ({
-    showPkgFilter,
-    autocompleteType,
-    onSelectPath,
-    alternativeAutocompleteType,
-    alternativeOnSelectPath
-}) => {
-    const [pkg] = useQueryState("package");
-    const [checked, setChecked] = useState<boolean>(true);
-    const [autocompleteComponentName, setAutocompleteComponentName] = useState<keyof typeof AutocompleteOptions>(autocompleteType);
-
-    const AutocompleteComponent = AutocompleteOptions[autocompleteComponentName] as FC<any>;
-
-
-    useEffect(() => {
-        if (checked) {
-            setAutocompleteComponentName(autocompleteType);
-        } else if (alternativeAutocompleteType) {
-            setAutocompleteComponentName(alternativeAutocompleteType);
-        }
-    }, [checked]);
-
-
-    return (
-        <>
-            <Search className="shrink-0 opacity-50" />
-
-
-            <AutocompleteComponent
-                onSelectParams={
-                    (pkg && checked && showPkgFilter) ? [{ key: "packages", value: pkg }] : []
-                }
-                onSelectPath={checked ? onSelectPath : alternativeOnSelectPath}
-                embedded
-            />
-
-            {showPkgFilter && <>
-                <TooltipProvider>
-                    <Tooltip delayDuration={100}>
-                        <TooltipTrigger onClick={() => setChecked(!checked)}>
-                            {checked ? <FileCheck className="opacity-50" /> : <FileX className="opacity-50" />}
-                        </TooltipTrigger>
-
-                        <TooltipContent>
-                            If checked will search only in this document
-                        </TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
-            </>}
-        </>
-    );
+"use client"
+
+import { FC, useEffect, useState } from "react";
+import { FileCheck, FileX, Search } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
+import * as AutocompleteOptions from "./generated/suggestions";
+import { useQueryState } from "nuqs";
+
+type PlacedOn = "NAVBAR" | "BODY"
+type Props = {
+    showPkgFilter: boolean
+    placedOn?: PlacedOn
+    onSelectPath: string;
+    autocompleteType: keyof typeof AutocompleteOptions;
+    //these two props are only used when showPkgFilter is false and has some values to override the default behavior
+    alternativeAutocompleteType?: keyof typeof AutocompleteOptions;
+    alternativeOnSelectPath?: string;
+}
+
+export const SearchInput: FC<Props> = ({
+    showPkgFilter,
+    autocompleteType,
+    onSelectPath,
+    alternativeAutocompleteType,
+    alternativeOnSelectPath
+}) => {
+    const [pkg] = useQueryState("package");
+    const [checked, setChecked] = useState<boolean>(true);
+    const [autocompleteComponentName, setAutocompleteComponentName] = useState<keyof typeof AutocompleteOptions>(autocompleteType);
+
+    const AutocompleteComponent = AutocompleteOptions[autocompleteComponentName] as FC<any>;
+
+
+    useEffect(() => {
+        if (checked) {
+            setAutocompleteComponentName(autocompleteType);
+        } else if (alternativeAutocompleteType) {
+            setAutocompleteComponentName(alternativeAutocompleteType);
+        }
+    }, [checked]);
+
+
+    return (
+        <>
+            <Search className="shrink-0 opacity-50" />
+
+
+            <AutocompleteComponent
+                onSelectParams={
+                    (pkg && checked && showPkgFilter) ? [{ key: "packages", value: pkg }] : []
+                }
+                onSelectPath={checked ? onSelectPath : alternativeOnSelectPath}
+                embedded
+            />
+
+            {showPkgFilter && <>
+                <TooltipProvider>
+                    <Tooltip delayDuration={100}>
+                        <TooltipTrigger onClick={() => setChecked(!checked)}>
+                            {checked ? <FileCheck className="opacity-50" /> : <FileX className="opacity-50" />}
+                        </TooltipTrigger>
+
+                        <TooltipContent>
+                            If checked will search only in this document
+                        </TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+            </>}
+        </>
+    );
 };