@c-rex/components 0.1.38 → 0.1.39

package/src/documents/result-list.tsx

@@ -1,127 +1,124 @@
-import { FC } from "react";
-import { CommonItemsModel } from "@c-rex/interfaces";
-import { FileStack } from "lucide-react";
-import { cn, getType, getTitle, getVersions, getLanguage, generateQueryParams } from "@c-rex/utils";
-import { Button } from "@c-rex/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { RESULT_TYPES } from "@c-rex/constants";
-import { FileDownloadDropdown } from "@c-rex/components/file-download";
-import { FavoriteButton } from "@c-rex/components/favorite-button";
-import { ImageRenditionContainer } from "../renditions/image/container";
-import { BookmarkButton } from "../favorites/bookmark-button";
-import { HtmlRendition } from "../renditions/html";
-import { QueryParams } from "@c-rex/types";
-
-interface Props {
-    items: CommonItemsModel[];
-    query?: string;
-    imageRestrictions?: string[];
-    showActions?: boolean;
-}
-
-
-export const DocumentsResultList: FC<Props> = ({
-    items,
-    query = "",
-    imageRestrictions = [],
-    showActions = true,
-}) => {
-    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 isDocument = itemType === RESULT_TYPES.DOCUMENT;
-                const multipleVersions = getVersions(item.versionOf);
-                const packageId = item.packages && item.packages.length > 0 ? item.packages[0]?.shortId : null;
-                const queryParams: QueryParams[] = []
-
-                if (packageId) {
-                    queryParams.push({
-                        key: "package",
-                        value: packageId,
-                    })
-                }
-
-                if (query.length > 0) {
-                    queryParams.push({
-                        key: "q",
-                        value: query,
-                    })
-                }
-
-                const params = generateQueryParams(queryParams)
-                const itemLink = `/documents/${item.shortId}` + (params.length > 0 ? `?${params}` : "")
-
-                return (
-                    <div
-                        key={item.shortId}
-                        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}`
-                        )}
-                    >
-                        <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">
-                                {item.revision} - {language}
-                            </span>
-
-                            <span className="text-lg font-medium">
-                                <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">
-                            <div className="flex gap-2">
-                                <FileDownloadDropdown renditions={item.renditions} />
-
-                                <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>
-                                )}
-
-                                {isDocument && (
-                                    <BookmarkButton
-                                        shortId={item.shortId!}
-                                        triggerVariant="ghost"
-                                    />
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-};
+import { FC } from "react";
+import { CommonItemsModel } from "@c-rex/interfaces";
+import { FileStack } from "lucide-react";
+import { cn, generateQueryParams } from "@c-rex/utils";
+import { Button } from "@c-rex/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { RESULT_TYPES } from "@c-rex/constants";
+import { FileDownloadDropdown } from "@c-rex/components/file-download";
+import { FavoriteButton } from "@c-rex/components/favorite-button";
+import { ImageRenditionContainer } from "../renditions/image/container";
+import { BookmarkButton } from "../favorites/bookmark-button";
+import { HtmlRendition } from "../renditions/html";
+import { QueryParams } from "@c-rex/types";
+import { getResultItemSummary } from "../results/summary";
+
+interface Props {
+    items: CommonItemsModel[];
+    query?: string;
+    imageRestrictions?: string[];
+    showActions?: boolean;
+}
+
+
+export const DocumentsResultList: FC<Props> = ({
+    items,
+    query = "",
+    imageRestrictions = [],
+    showActions = true,
+}) => {
+    return (
+        <div className="flex-1">
+            {items.map((item, index) => {
+                const { title, language, itemType, multipleVersions, packageId } = getResultItemSummary(item);
+                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
+                const queryParams: QueryParams[] = []
+
+                if (packageId) {
+                    queryParams.push({
+                        key: "package",
+                        value: packageId,
+                    })
+                }
+
+                if (query.length > 0) {
+                    queryParams.push({
+                        key: "q",
+                        value: query,
+                    })
+                }
+
+                const params = generateQueryParams(queryParams)
+                const itemLink = `/documents/${item.shortId}` + (params.length > 0 ? `?${params}` : "")
+
+                return (
+                    <div
+                        key={item.shortId}
+                        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}`
+                        )}
+                    >
+                        <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">
+                                {item.revision} - {language}
+                            </span>
+
+                            <span className="text-lg font-medium">
+                                <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">
+                            <div className="flex gap-2">
+                                <FileDownloadDropdown renditions={item.renditions} />
+
+                                <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>
+                                )}
+
+                                {isDocument && (
+                                    <BookmarkButton
+                                        shortId={item.shortId!}
+                                        triggerVariant="ghost"
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

package/src/favorites/bookmark-button.tsx

@@ -1,94 +1,97 @@
-"use client";
-
-import { ComponentProps, FC } from "react";
-import { Button } from "@c-rex/ui/button";
-import { Trash } from "lucide-react";
-import { cn } from "@c-rex/utils";
-import Link from "next/link";
-import { useFavoritesStore } from "../stores/favorites-store";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@c-rex/ui/dialog";
-import { useTranslations } from "next-intl";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableRow,
-} from "@c-rex/ui/table"
-import { FaRegBookmark } from "react-icons/fa6";
-
-const EMPTY_TOPICS: { id: string; label: string; color: string }[] = [];
-
-type BookmarkProps = {
-    shortId: string;
-    linkPattern?: string;
-    triggerVariant?: ComponentProps<typeof Button>["variant"];
-}
-
-export const BookmarkButton: FC<BookmarkProps> = ({
-    shortId,
-    linkPattern = `/topics/{id}/pages`,
-    triggerVariant = "outline"
-}) => {
-    const t = useTranslations("bookmarks");
-    const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
-    const markersList = useFavoritesStore((state) => state.documents[shortId]?.topics) ?? EMPTY_TOPICS;
-    return (
-        <Dialog>
-            <DialogTrigger asChild>
-                <Button variant={triggerVariant} size="icon" className="relative">
-                    <FaRegBookmark className="text-primary" />
-
-                    {markersList.length > 0 && (
-                        <span
-                            className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
-                        >
-                            {markersList.length}
-                        </span>
-                    )}
-                </Button>
-
-            </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>{t("title")}</DialogTitle>
-                    <DialogDescription>
-                        {t("description")}
-                    </DialogDescription>
-                </DialogHeader>
-                <Table>
-                    <TableBody>
-                        {markersList.length === 0 && (
-                            <TableRow>
-                                <TableCell colSpan={3} className="text-center">
-                                    {t("empty")}
-                                </TableCell>
-                            </TableRow>
-                        )}
-
-                        {markersList.map((item) => (
-                            <TableRow key={item.id} className="min-h-12">
-                                <TableCell>
-                                    <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
-                                </TableCell>
-                                <TableCell>
-                                    <Link href={linkPattern.replace("{id}", item.id)} className="hover:underline">
-                                        {item.label}
-                                    </Link>
-                                </TableCell>
-                                <TableCell>
-                                    <Button
-                                        variant="destructive"
-                                        size="icon"
-                                        onClick={() => removeFavoriteTopic(shortId, item.id)}
-                                    >
-                                        <Trash className="w-5 hover:text-red-600 cursor-pointer" />
-                                    </Button>
-                                </TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </DialogContent>
-        </Dialog>
-    )
-}
+"use client";
+
+import { ComponentProps, FC } from "react";
+import { Button } from "@c-rex/ui/button";
+import { Trash } from "lucide-react";
+import { cn } from "@c-rex/utils";
+import Link from "next/link";
+import { useFavoritesStore } from "../stores/favorites-store";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@c-rex/ui/dialog";
+import { useTranslations } from "next-intl";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+} from "@c-rex/ui/table"
+import { FaRegBookmark } from "react-icons/fa6";
+
+const EMPTY_TOPICS: { id: string; label: string; color: string }[] = [];
+
+type BookmarkProps = {
+    shortId: string;
+    linkPattern?: string;
+    triggerVariant?: ComponentProps<typeof Button>["variant"];
+}
+
+export const BookmarkButton: FC<BookmarkProps> = ({
+    shortId,
+    linkPattern = `/topics/{shortId}/pages`,
+    triggerVariant = "outline"
+}) => {
+    const t = useTranslations("bookmarks");
+    const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
+    const markersList = useFavoritesStore((state) => state.documents[shortId]?.topics) ?? EMPTY_TOPICS;
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <Button variant={triggerVariant} size="icon" className="relative">
+                    <FaRegBookmark className="text-primary" />
+
+                    {markersList.length > 0 && (
+                        <span
+                            className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
+                        >
+                            {markersList.length}
+                        </span>
+                    )}
+                </Button>
+
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{t("title")}</DialogTitle>
+                    <DialogDescription>
+                        {t("description")}
+                    </DialogDescription>
+                </DialogHeader>
+                <Table>
+                    <TableBody>
+                        {markersList.length === 0 && (
+                            <TableRow>
+                                <TableCell colSpan={3} className="text-center">
+                                    {t("empty")}
+                                </TableCell>
+                            </TableRow>
+                        )}
+
+                        {markersList.map((item) => (
+                            <TableRow key={item.id} className="min-h-12">
+                                <TableCell>
+                                    <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
+                                </TableCell>
+                                <TableCell>
+                                    <Link
+                                        href={linkPattern.replace("{shortId}", item.id).replace("{id}", item.id)}
+                                        className="hover:underline"
+                                    >
+                                        {item.label}
+                                    </Link>
+                                </TableCell>
+                                <TableCell>
+                                    <Button
+                                        variant="destructive"
+                                        size="icon"
+                                        onClick={() => removeFavoriteTopic(shortId, item.id)}
+                                    >
+                                        <Trash className="w-5 hover:text-red-600 cursor-pointer" />
+                                    </Button>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </DialogContent>
+        </Dialog>
+    )
+}