@c-rex/components 0.1.38 → 0.1.39

package/src/icons/loading.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from "react";
-
-type LoadingProps = {
-    opacity?: boolean;
-}
-export const Loading: FC<LoadingProps> = ({ opacity = false }) => {
-    return (
-        <div className={`fixed inset-0 z-[100000] w-full h-full flex justify-center items-center bg-white ${opacity ? "opacity-50" : ""}`}>
-            <div className="animate-spin rounded-full h-12 w-12 border-2 border-gray-300 border-t-gray-950"></div>
-        </div>
-    );
+import React, { FC } from "react";
+
+type LoadingProps = {
+    opacity?: boolean;
+}
+export const Loading: FC<LoadingProps> = ({ opacity = false }) => {
+    return (
+        <div className={`fixed inset-0 z-[100000] w-full h-full flex justify-center items-center bg-white ${opacity ? "opacity-50" : ""}`}>
+            <div className="animate-spin rounded-full h-12 w-12 border-2 border-gray-300 border-t-gray-950"></div>
+        </div>
+    );
 };

package/src/icons/social-icon.tsx

@@ -0,0 +1,24 @@
+import * as FaIcons from "react-icons/fa6";
+
+type SocialIconProps = {
+    label: string;
+    className?: string;
+};
+
+const supportedIcons: Partial<Record<string, keyof typeof FaIcons>> = {
+    xing: "FaSquareXing",
+    linkedin: "FaLinkedin",
+    twitter: "FaSquareXTwitter",
+    instagram: "FaInstagram",
+    youtube: "FaYoutube",
+    facebook: "FaSquareFacebook",
+};
+
+export const SocialIcon = ({ label, className }: SocialIconProps) => {
+    const iconName = supportedIcons[label.toLowerCase()];
+    const Icon = iconName ? FaIcons[iconName] : null;
+
+    if (!Icon) return <>{label}</>;
+
+    return <Icon className={className} aria-hidden="true" />;
+};

package/src/info/info-card.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+
+type InfoCardItem = {
+    label: string;
+    value?: string | null;
+    link?: string | null;
+};
+
+type InfoCardProps = {
+    title: string;
+    items: InfoCardItem[];
+};
+
+export const InfoCard = ({ title, items }: InfoCardProps) => {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="text-lg">{title}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                {items.map((item) => {
+                    const content = (
+                        <>
+                            <div className="line-clamp-2 text-sm font-medium">{item.label}</div>
+                            {item.value ? <div className="text-xs text-muted-foreground">{item.value}</div> : null}
+                        </>
+                    );
+
+                    if (item.link) {
+                        return (
+                            <Link key={`${item.link}-${item.label}`} href={item.link} className="block rounded-md hover:opacity-90">
+                                {content}
+                            </Link>
+                        );
+                    }
+
+                    return <div key={item.label}>{content}</div>;
+                })}
+            </CardContent>
+        </Card>
+    );
+};

package/src/info/{info-table.tsx → information-unit-metadata-grid.tsx}

@@ -1,168 +1,157 @@
-import React, { FC } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableRow,
-} from "@c-rex/ui/table"
-
-import { renderValue } from "./shared";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@c-rex/ui/dropdown-menu";
-import { CloudDownload, Eye } from "lucide-react";
-import { InformationUnitModel } from "@c-rex/interfaces";
-import { Flag } from "../icons/flag-icon";
-import { Button } from "@c-rex/ui/button";
-import { FileIcon } from "../icons/file-icon";
-import { BookmarkButton } from "../favorites/bookmark-button";
-import { informationUnitsGetAllServer } from "@c-rex/services/server-requests";
-import { getTranslations } from "next-intl/server";
-import { EN_LANG } from "@c-rex/constants";
-import { getFileRenditions } from "../results/utils";
-import Link from "next/link";
-import { processDataToLabelValuePairs } from "@c-rex/utils";
-import { AvailableVersionsInterface } from "@c-rex/interfaces";
-import { SetAvailableVersions } from "./set-available-versions";
-
-type Props = {
-    title: string;
-    linkPattern: string;
-    data: InformationUnitModel;
-    excludeKeys?: string[];
-    showBookmarkButton?: boolean;
-    saveVersionsInContext?: boolean;
-}
-
-export const InfoTable: FC<Props> = async ({
-    title,
-    data,
-    linkPattern,
-    showBookmarkButton = false,
-    saveVersionsInContext = false
-}) => {
-    const versionBaseShortId = data.versionOf?.shortId ?? null;
-    const [t, informationUnits] = await Promise.all([
-        getTranslations(),
-        versionBaseShortId
-            ? informationUnitsGetAllServer({
-                Restrict: [`versionOf.shortId=${versionBaseShortId}`],
-                Fields: ["renditions", "class", "languages", "labels"],
-            })
-            : Promise.resolve({ items: [] }),
-    ])
-    const files = getFileRenditions({ renditions: data.renditions! });
-    const versionsByShortId = new Map<string, { shortId: string; language: string }>();
-
-    if (data.shortId && data.languages?.[0]) {
-        versionsByShortId.set(data.shortId, {
-            shortId: data.shortId,
-            language: data.languages[0],
-        });
-    }
-
-    informationUnits.items.forEach((item) => {
-        if (!item.shortId || !item.languages?.[0]) return;
-        versionsByShortId.set(item.shortId, {
-            shortId: item.shortId,
-            language: item.languages[0],
-        });
-    });
-
-    const availableVersions = Array.from(versionsByShortId.values())
-        .map((item) => ({
-            shortId: item.shortId,
-            active: item.shortId === data.shortId,
-            lang: item.language,
-            country: item.language.split("-")[1] ?? item.language,
-            link: linkPattern.replace("{shortId}", item.shortId),
-        }))
-        .sort((a, b) => a.lang.localeCompare(b.lang)) as AvailableVersionsInterface[];
-
-    return (
-        <Card className="p-0 !pt-4">
-            <CardHeader>
-                <CardTitle className="text-lg flex justify-between items-end">
-                    {title}
-                    {showBookmarkButton && <BookmarkButton shortId={data.shortId!} />}
-                </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3 !p-0">
-                {saveVersionsInContext && <SetAvailableVersions versions={availableVersions} />}
-                <Table>
-                    <TableBody>
-                        {processDataToLabelValuePairs(data).map((item) => (
-                            <TableRow key={item.label} className="min-h-12">
-                                <TableCell className="font-medium w-28 pl-4">
-                                    <h4 className="text-sm font-medium capitalize">{t(item.label)}</h4>
-                                </TableCell>
-                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
-                                    {renderValue(item, EN_LANG)}
-                                </TableCell>
-                            </TableRow>
-                        ))}
-
-                        <TableRow className="min-h-12">
-                            <TableCell className="font-medium w-28 pl-4">
-                                <h4 className="text-sm font-medium">{t("availableIn")}</h4>
-                            </TableCell>
-                            <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
-                                {availableVersions.map((item) => {
-                                    return (
-                                        <span className="w-8 block border" key={item.shortId}>
-                                            <Link href={item.link} title={item.lang}>
-                                                <Flag countryCode={item.country} />
-                                            </Link>
-                                        </span>
-                                    )
-                                })}
-                            </TableCell>
-                        </TableRow>
-
-                        {Object.keys(files).length > 0 && (
-                            <TableRow className="min-h-12">
-                                <TableCell className="font-medium w-28 pl-4">
-                                    <h4 className="text-sm font-medium">{t("files")}</h4>
-                                </TableCell>
-                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
-
-                                    {Object.keys(files).map((fileKey) => {
-                                        if (!files[fileKey]) return null
-
-                                        return (
-                                            <DropdownMenu key={fileKey}>
-                                                <DropdownMenuTrigger className="mr-2" asChild >
-                                                    <Button variant="outline" size="icon" >
-                                                        <FileIcon extension={fileKey} />
-                                                    </Button>
-                                                </DropdownMenuTrigger>
-                                                <DropdownMenuContent>
-                                                    <DropdownMenuItem>
-                                                        <a href={files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
-                                                            <Eye className="mr-2" /> Open
-                                                        </a>
-                                                    </DropdownMenuItem>
-                                                    <DropdownMenuItem>
-                                                        <a href={files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
-                                                            <CloudDownload className="mr-2" /> Download
-                                                        </a>
-                                                    </DropdownMenuItem>
-
-                                                </DropdownMenuContent>
-                                            </DropdownMenu>
-                                        )
-                                    })}
-
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </CardContent>
-        </Card >
-    );
-}
+import React, { FC } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+} from "@c-rex/ui/table"
+
+import { renderMetadataDisplayValues } from "./shared";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@c-rex/ui/dropdown-menu";
+import { CloudDownload, Eye } from "lucide-react";
+import { InformationUnitModel } from "@c-rex/interfaces";
+import { Flag } from "../icons/flag-icon";
+import { Button } from "@c-rex/ui/button";
+import { FileIcon } from "../icons/file-icon";
+import { BookmarkButton } from "../favorites/bookmark-button";
+import { getLocale, getTranslations } from "next-intl/server";
+import { getFileRenditions } from "../results/utils";
+import Link from "next/link";
+import { extractCountryCodeFromLanguage } from "@c-rex/utils";
+import {
+    getAvailableLanguagesByVersionOf,
+    getMetadataDisplayRows,
+    resolveMetadataDisplayProperties,
+} from "@c-rex/services/read-models";
+
+type Props = {
+    title: string;
+    linkPattern: string;
+    data: InformationUnitModel;
+    metadataIncludeProperties?: Array<keyof InformationUnitModel>;
+    metadataExcludeProperties?: Array<keyof InformationUnitModel>;
+    showBookmarkButton?: boolean;
+    showFileRenditions?: boolean;
+}
+
+export const InformationUnitMetadataGrid: FC<Props> = async ({
+    title,
+    data,
+    linkPattern,
+    metadataIncludeProperties,
+    metadataExcludeProperties,
+    showBookmarkButton = false,
+    showFileRenditions = true,
+}) => {
+    const [t, locale] = await Promise.all([
+        getTranslations(),
+        getLocale(),
+    ]);
+    const files = showFileRenditions ? getFileRenditions({ renditions: data.renditions! }) : {};
+
+    const availableVersions = await getAvailableLanguagesByVersionOf(data.versionOf?.shortId);
+    const displayVersions = availableVersions.filter((item) => item.shortId !== data.shortId);
+    const metadataRows = await getMetadataDisplayRows(data, {
+        uiLanguage: locale,
+        includeProperties: resolveMetadataDisplayProperties({
+            includeProperties: metadataIncludeProperties,
+            excludeProperties: metadataExcludeProperties,
+        }),
+    });
+    const resolveDetailsPath = (shortId: string): string =>
+        linkPattern.replace("{shortId}", shortId);
+
+    return (
+        <Card className="p-0 !pt-4">
+            <CardHeader>
+                <CardTitle className="text-lg flex justify-between items-end">
+                    {title}
+
+                    {showBookmarkButton && <BookmarkButton shortId={data.shortId!} />}
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 !p-0">
+                <Table>
+                    <TableBody>
+                        {metadataRows.map((row) => (
+                            <TableRow key={`${row.key}:${row.label}`} className="min-h-12">
+                                <TableCell className="font-medium w-28 pl-4">
+                                    <h4 className="text-sm font-medium capitalize">
+                                        {row.labelSource === "translationKey" ? t(row.label) : row.label}
+                                    </h4>
+                                </TableCell>
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+                                    {renderMetadataDisplayValues(row, locale)}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+
+                        {displayVersions.length > 0 && (
+                            <TableRow className="min-h-12">
+                                <TableCell className="font-medium w-28 pl-4">
+                                    <h4 className="text-sm font-medium">{t("availableIn")}</h4>
+                                </TableCell>
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+                                    {displayVersions.map((item) => {
+                                        const country = extractCountryCodeFromLanguage(item.language);
+                                        return (
+                                            <span className="w-8 block border" key={item.shortId}>
+                                                <Link href={resolveDetailsPath(item.shortId)} title={item.language}>
+                                                    <Flag countryCode={country} />
+                                                </Link>
+                                            </span>
+                                        );
+                                    })}
+                                </TableCell>
+                            </TableRow>
+                        )}
+
+                        {Object.keys(files).length > 0 && (
+                            <TableRow className="min-h-12">
+                                <TableCell className="font-medium w-28 pl-4">
+                                    <h4 className="text-sm font-medium">{t("files")}</h4>
+                                </TableCell>
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+
+                                    {Object.keys(files).map((fileKey) => {
+                                        if (!files[fileKey]) return null
+
+                                        return (
+                                            <DropdownMenu key={fileKey}>
+                                                <DropdownMenuTrigger className="mr-2" asChild >
+                                                    <Button variant="outline" size="icon" >
+                                                        <FileIcon extension={fileKey} />
+                                                    </Button>
+                                                </DropdownMenuTrigger>
+                                                <DropdownMenuContent>
+                                                    <DropdownMenuItem>
+                                                        <a href={files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
+                                                            <Eye className="mr-2" /> Open
+                                                        </a>
+                                                    </DropdownMenuItem>
+                                                    <DropdownMenuItem>
+                                                        <a href={files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
+                                                            <CloudDownload className="mr-2" /> Download
+                                                        </a>
+                                                    </DropdownMenuItem>
+
+                                                </DropdownMenuContent>
+                                            </DropdownMenu>
+                                        )
+                                    })}
+
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </CardContent>
+        </Card >
+    );
+}

package/src/info/shared.tsx

@@ -1,25 +1,49 @@
-import { ReactNode } from "react";
-import { articleInfoItemType } from "@c-rex/types";
-import { formatDateToLocale, isDate, isLanguage } from "@c-rex/utils";
-import { Flag } from "../icons/flag-icon";
-
-
-export const renderValue = (item: articleInfoItemType, uiLang: string): ReactNode => {
-    if (isDate(item.value)) return formatDateToLocale(item.value, uiLang);
-
-    if (isLanguage(item.label)) {
-        const countryCode = item.value.split("-")[1] || item.value;
-        return (
-            <span className="w-8 block">
-                <Flag countryCode={countryCode} />
-            </span>
-        );
-    }
-
-    return item.value;
-}
-
-export const filteredItems = (items: articleInfoItemType[]): articleInfoItemType[] => {
-    const hasTitle = items.some(item => item.label === "titles");
-    return items.filter(item => (hasTitle ? !(item.label == "labels") : true));
-}
+import { ReactNode } from "react";
+import { articleInfoItemType } from "@c-rex/types";
+import { extractCountryCodeFromLanguage, formatDateToLocale, isDate, isLanguage } from "@c-rex/utils";
+import { Flag } from "../icons/flag-icon";
+
+type MetadataDisplayRow = {
+    values: string[];
+    valueType?: string;
+};
+
+export const renderValue = (item: articleInfoItemType, uiLang: string): ReactNode => {
+    if (isDate(item.value)) return formatDateToLocale(item.value, uiLang);
+
+    if (isLanguage(item.label)) {
+        const countryCode = item.value.split("-")[1] || item.value;
+        return (
+            <span className="w-8 block">
+                <Flag countryCode={countryCode} />
+            </span>
+        );
+    }
+
+    return item.value;
+}
+
+export const renderMetadataDisplayValues = (row: MetadataDisplayRow, uiLang: string): ReactNode => {
+    if (row.valueType === "language") {
+        return (
+            <span className="flex items-center gap-2">
+                {row.values.map((language) => (
+                    <span className="w-8 block" key={language} title={language}>
+                        <Flag countryCode={extractCountryCodeFromLanguage(language)} />
+                    </span>
+                ))}
+            </span>
+        );
+    }
+
+    if (row.values.length === 1 && isDate(row.values[0])) {
+        return formatDateToLocale(row.values[0], uiLang);
+    }
+
+    return row.values.join(", ");
+};
+
+export const filteredItems = (items: articleInfoItemType[]): articleInfoItemType[] => {
+    const hasTitle = items.some(item => item.label === "titles");
+    return items.filter(item => (hasTitle ? !(item.label == "labels") : true));
+}