@c-rex/components 0.3.0-build.34 → 0.3.0-build.36

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.34",
+    "version":  "0.3.0-build.36",
     "files":  [
                   "src"
               ],
@@ -21,10 +21,6 @@
                                                     "types":  "./src/generated/suggestions.tsx",
                                                     "import":  "./src/generated/suggestions.tsx"
                                                 },
-                    "./breadcrumb":  {
-                                         "types":  "./src/breadcrumb.tsx",
-                                         "import":  "./src/breadcrumb.tsx"
-                                     },
                     "./navbar":  {
                                      "types":  "./src/navbar/navbar.tsx",
                                      "import":  "./src/navbar/navbar.tsx"
@@ -62,12 +58,12 @@
                                         "import":  "./src/info/info-card.tsx"
                                     },
                     "./check-article-lang":  {
-                                                 "types":  "./src/check-article-lang.tsx",
-                                                 "import":  "./src/check-article-lang.tsx"
+                                                 "types":  "./src/article/check-article-lang.tsx",
+                                                 "import":  "./src/article/check-article-lang.tsx"
                                              },
                     "./render-article":  {
-                                             "types":  "./src/render-article.tsx",
-                                             "import":  "./src/render-article.tsx"
+                                             "types":  "./src/article/render-article.tsx",
+                                             "import":  "./src/article/render-article.tsx"
                                          },
                     "./article-action-bar":  {
                                                  "types":  "./src/article/article-action-bar.tsx",
@@ -98,17 +94,13 @@
                                                     "import":  "./src/renditions/html-client.tsx"
                                                 },
                     "./image-rendition-container":  {
-                                                        "types":  "./src/renditions/container.ts",
-                                                        "import":  "./src/renditions/container.ts"
+                                                        "types":  "./src/renditions/image/container.tsx",
+                                                        "import":  "./src/renditions/image/container.tsx"
                                                     },
                     "./autocomplete":  {
                                            "types":  "./src/autocomplete.tsx",
                                            "import":  "./src/autocomplete.tsx"
                                        },
-                    "./result-container":  {
-                                               "types":  "./src/result-container.tsx",
-                                               "import":  "./src/result-container.tsx"
-                                           },
                     "./dialog-filter":  {
                                             "types":  "./src/results/dialog-filter.tsx",
                                             "import":  "./src/results/dialog-filter.tsx"
@@ -117,6 +109,10 @@
                                          "types":  "./src/results/pagination.tsx",
                                          "import":  "./src/results/pagination.tsx"
                                      },
+                    "./information-unit-search-results-card-list":  {
+                                                                        "types":  "./src/results/information-unit-search-results-card-list.tsx",
+                                                                        "import":  "./src/results/information-unit-search-results-card-list.tsx"
+                                                                    },
                     "./information-unit-search-results-cards":  {
                                                                     "types":  "./src/results/information-unit-search-results-cards.tsx",
                                                                     "import":  "./src/results/information-unit-search-results-cards.tsx"
@@ -141,10 +137,10 @@
                                               "types":  "./src/stores/highlight-store.ts",
                                               "import":  "./src/stores/highlight-store.ts"
                                           },
-                    "./favorites-store":  {
-                                              "types":  "./src/stores/favorites-store.ts",
-                                              "import":  "./src/stores/favorites-store.ts"
-                                          },
+                    "./favorites-context":  {
+                                                "types":  "./src/favorites/favorites-context.tsx",
+                                                "import":  "./src/favorites/favorites-context.tsx"
+                                            },
                     "./search-settings-store":  {
                                                     "types":  "./src/stores/search-settings-store.ts",
                                                     "import":  "./src/stores/search-settings-store.ts"
@@ -177,14 +173,6 @@
                                               "types":  "./src/renditions/image/rendition.tsx",
                                               "import":  "./src/renditions/image/rendition.tsx"
                                           },
-                    "./server-image-rendition":  {
-                                                     "types":  "./src/renditions/image/server-image-rendition.tsx",
-                                                     "import":  "./src/renditions/image/server-image-rendition.tsx"
-                                                 },
-                    "./article-skeleton":  {
-                                               "types":  "./src/article/article-skeleton.tsx",
-                                               "import":  "./src/article/article-skeleton.tsx"
-                                           },
                     "./documents-result-list":  {
                                                     "types":  "./src/documents/result-list.tsx",
                                                     "import":  "./src/documents/result-list.tsx"
@@ -201,14 +189,6 @@
                                        "types":  "./src/carousel/carousel.tsx",
                                        "import":  "./src/carousel/carousel.tsx"
                                    },
-                    "./restriction-menu":  {
-                                               "types":  "./src/restriction-menu/restriction-menu.tsx",
-                                               "import":  "./src/restriction-menu/restriction-menu.tsx"
-                                           },
-                    "./restriction-menu-container":  {
-                                                         "types":  "./src/restriction-menu/restriction-menu-container.tsx",
-                                                         "import":  "./src/restriction-menu/restriction-menu-container.tsx"
-                                                     },
                     "./restriction-menu-item":  {
                                                     "types":  "./src/restriction-menu/restriction-menu-item.tsx",
                                                     "import":  "./src/restriction-menu/restriction-menu-item.tsx"
@@ -217,6 +197,10 @@
                                            "types":  "./src/search-input.tsx",
                                            "import":  "./src/search-input.tsx"
                                        },
+                    "./content-unavailable":  {
+                                                  "types":  "./src/content-unavailable.tsx",
+                                                  "import":  "./src/content-unavailable.tsx"
+                                              },
                     "./footer":  {
                                      "types":  "./src/footer/footer.tsx",
                                      "import":  "./src/footer/footer.tsx"
@@ -240,7 +224,15 @@
                     "./taxonomy-restriction-menu":  {
                                                         "types":  "./src/restriction-menu/taxonomy-restriction-menu.tsx",
                                                         "import":  "./src/restriction-menu/taxonomy-restriction-menu.tsx"
-                                                    }
+                                                    },
+                    "./restriction-selection-command-menu":  {
+                                                                 "types":  "./src/restriction-menu/restriction-selection-command-menu.tsx",
+                                                                 "import":  "./src/restriction-menu/restriction-selection-command-menu.tsx"
+                                                             },
+                    "./taxonomy-restriction-command-menu":  {
+                                                                "types":  "./src/restriction-menu/taxonomy-restriction-command-menu.tsx",
+                                                                "import":  "./src/restriction-menu/taxonomy-restriction-command-menu.tsx"
+                                                            }
                 },
     "scripts":  {
                     "storybook":  "storybook dev -p 6006",

package/src/article/article-action-bar.tsx

@@ -10,6 +10,7 @@ import { cn } from "@c-rex/utils";
 import { useTranslations } from "next-intl";
 import { FavoriteButton } from "../favorites/favorite-button";
 import { ResultTypes } from "@c-rex/types";
+import { ShareButton } from "../share-button";
 type Props = {
     id: string;
     articleType: ResultTypes;
@@ -31,7 +32,7 @@ export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel })
     }, [open]);
 
     return (
-        <div className="w-9 flex gap-2 transition-all duration-300 flex-row z-20 items-end md:flex-col md:rounded-2xl md:sticky md:top-24 md:self-start">
+        <div className="w-9 flex gap-2 transition-all duration-300 z-20 items-end flex-col sticky top-40 md:top-24 self-start">
 
             <SidebarTrigger side="right" />
 
@@ -41,6 +42,8 @@ export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel })
                 label={favoriteLabel}
             />
 
+            <ShareButton />
+
             <Button
                 variant="ghost"
                 size="icon"

package/src/{check-article-lang.tsx → article/check-article-lang.tsx}

@@ -5,7 +5,7 @@ import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { AvailableVersionsInterface } from "@c-rex/interfaces";
 import { toast } from "sonner"
 import { useTranslations } from "next-intl"
-import { useSearchSettingsStore } from "./stores/search-settings-store";
+import { useSearchSettingsStore } from "../stores/search-settings-store";
 
 interface Props {
     availableVersions: AvailableVersionsInterface[]

package/src/article/render-article-highlight.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect } from "react";
+import { useQueryState } from "nuqs";
+import { useHighlight } from "@c-rex/contexts/highlight-provider";
+import { useHighlightStore } from "../stores/highlight-store";
+
+const EXCLUDED_TAGS = new Set(["MARK", "SCRIPT", "STYLE", "NOSCRIPT", "TEXTAREA"]);
+
+export const extractHighlightTerms = (query: string | null): string[] => {
+    if (!query) return [];
+
+    return query
+        .split(/[+ ]/)
+        .map((term) => term.trim())
+        .filter(Boolean);
+};
+
+const applyHighlightToElement = (container: HTMLElement, terms: string[]) => {
+    if (terms.length === 0) return;
+
+    const escapedTerms = terms.map((term) =>
+        term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+    );
+    const regex = new RegExp(`(${escapedTerms.join("|")})`, "gi");
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+    const textNodes: Text[] = [];
+
+    let currentNode = walker.nextNode();
+    while (currentNode) {
+        const parent = currentNode.parentElement;
+        const textContent = currentNode.textContent ?? "";
+
+        if (
+            parent &&
+            !EXCLUDED_TAGS.has(parent.tagName) &&
+            textContent.trim().length > 0
+        ) {
+            const hasMatch = regex.test(textContent);
+            regex.lastIndex = 0;
+
+            if (hasMatch) {
+                textNodes.push(currentNode as Text);
+            }
+        }
+
+        currentNode = walker.nextNode();
+    }
+
+    textNodes.forEach((textNode) => {
+        const textContent = textNode.textContent ?? "";
+        const parts = textContent.split(regex);
+
+        if (parts.length <= 1) return;
+
+        const fragment = document.createDocumentFragment();
+
+        parts.forEach((part) => {
+            if (!part) return;
+
+            const isMatch = regex.test(part);
+            regex.lastIndex = 0;
+
+            if (isMatch) {
+                const mark = document.createElement("mark");
+                mark.className = "bg-yellow-200";
+                mark.textContent = part;
+                fragment.appendChild(mark);
+                return;
+            }
+
+            fragment.appendChild(document.createTextNode(part));
+        });
+
+        textNode.parentNode?.replaceChild(fragment, textNode);
+    });
+};
+
+type RenderArticleHighlightProps = {
+    containerId: string
+    htmlContent: string
+};
+
+export const RenderArticleHighlight = ({
+    containerId,
+    htmlContent,
+}: RenderArticleHighlightProps) => {
+    const [query] = useQueryState("q");
+    const enableHighlight = useHighlightStore((state) => state.enable);
+    const { registerContainer, refreshMarks } = useHighlight();
+
+    useEffect(() => {
+        const container = document.getElementById(containerId) as HTMLElement | null;
+        if (!container) return;
+
+        registerContainer(container);
+        container.innerHTML = htmlContent;
+
+        if (enableHighlight) {
+            const terms = extractHighlightTerms(query);
+            applyHighlightToElement(container, terms);
+        }
+
+        refreshMarks();
+    }, [containerId, enableHighlight, htmlContent, query, refreshMarks, registerContainer]);
+
+    return null;
+};

package/src/article/render-article.tsx

@@ -0,0 +1,28 @@
+import { useId } from "react";
+import styles from "./render-article.module.css";
+import { RenderArticleHighlight } from "./render-article-highlight";
+
+type Props = {
+    htmlContent: string;
+    contentLang?: string;
+};
+
+export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
+    const containerId = useId().replace(/:/g, "");
+
+    return (
+        <>
+            <main
+                id={containerId}
+                data-content-scope="dita"
+                lang={contentLang}
+                className={`ids-content ids-content--dita-ot ${styles.idsContent}`}
+                dangerouslySetInnerHTML={{ __html: htmlContent }}
+            />
+            <RenderArticleHighlight
+                containerId={containerId}
+                htmlContent={htmlContent}
+            />
+        </>
+    );
+};

package/src/autocomplete.tsx

@@ -209,7 +209,7 @@ export const AutoComplete = ({
                             <InputGroupButton
                                 size="icon-xs"
                                 variant="ghost"
-                                aria-label="Clear search"
+                                aria-label={t("clearSearch")}
                                 onClick={clearSearch}
                             >
                                 <X className="size-3" />
@@ -246,7 +246,7 @@ export const AutoComplete = ({
                                     ))}
                                 </>
                             ) : (
-                                <li className="px-4 py-2">No suggestions.</li>
+                                <li className="px-4 py-2">{t("noSuggestions")}</li>
                             )}
                         </>
                     )}

package/src/carousel/carousel.tsx

@@ -298,6 +298,7 @@ export const Carousel: FC<Props> = ({
                 <div ref={containerRef} className={cn("w-full flex items-center")}>
                     {(arrows && data && data.length > 0) && <CarouselPrev />}
                     <div className={cn("flex-1 overflow-hidden relative flex items-center")}>
+                        {/*TODO: update loading position*/}
                         {loadByPages && loading && data && data.length > 0 && (
                             <div className="absolute right-3 top-3 z-20 rounded-full bg-background/95 p-2 text-muted-foreground shadow-sm">
                                 <LoaderCircle className="h-3.5 w-3.5 animate-spin" />
@@ -327,7 +328,10 @@ export const Carousel: FC<Props> = ({
                                 data.map((item: CommonItemsModel, index: number) => (
                                     <div
                                         key={item.shortId}
-                                        className={`flex-shrink-0 flex-grow-0 flex justify-center`}
+                                        className={cn(
+                                            'flex-shrink-0 flex-grow-0 flex justify-center',
+                                            loading && "opacity-40"
+                                        )}
                                         style={{ width: `${100 / slidesToShow}%` }}
                                     >
                                         <RenderComponent
@@ -454,7 +458,6 @@ const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
                     );
                 })}
             </ol>
-            {pagedMode && loading && <LoaderCircle className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
         </div>
     );
 };

package/src/carousel/information-unit-carousel-item.tsx

@@ -65,7 +65,7 @@ export const InformationUnitCarouselItem: FC<Props> = ({
                 <Tooltip>
                     <TooltipTrigger asChild>
                         <div className="h-44 overflow-hidden">
-                            <span className="line-clamp-5 text-lg font-semibold group-hover:underline">
+                            <span className="line-clamp-5 text-lg font-semibold group-hover:underline max-w-full overflow-ellipsis [overflow-wrap:anywhere] hyphens-auto">
                                 {title}
                             </span>
                         </div>

package/src/content-unavailable.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps, FC } from "react";
+import { PageWrapper } from "@c-rex/components/page-wrapper";
+import { getTranslations } from "next-intl/server";
+
+
+type Props = Omit<ComponentProps<typeof PageWrapper>, "children">;
+
+export const ContentUnavailable: FC<Props> = async ({ ...props }) => {
+    const t = await getTranslations();
+
+    return (
+        <PageWrapper {...props}>
+            <div className="flex flex-1 justify-center items-center p-4">
+                <div className="rounded-md border p-4 text-sm text-muted-foreground">
+                    {t("contentTemporarilyUnavailableRetry")}
+                </div>
+            </div>
+        </PageWrapper>
+    )
+}

package/src/directoryNodes/directory-tree-context.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { createContext, useContext, useEffect, useMemo, useState, type FC, type PropsWithChildren } from "react";
+import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import type { TreeOfContent } from "@c-rex/interfaces";
 import {
@@ -232,6 +233,7 @@ type DirectoryTreeSidebarMenuProps = {
 export const DirectoryTreeSidebarMenu: FC<DirectoryTreeSidebarMenuProps> = ({
     onNavigateNode,
 }) => {
+    const t = useTranslations();
     const { tree, isLoading, expandActivePathOnLoad } = useDirectoryTree();
     const [expandedNodeIds, setExpandedNodeIds] = useState<Set<string>>(new Set());
 
@@ -266,7 +268,8 @@ export const DirectoryTreeSidebarMenu: FC<DirectoryTreeSidebarMenuProps> = ({
                 <Skeleton className="w-auto h-10 mb-2 ml-8" />
                 <Skeleton className="w-auto h-10 mb-2 ml-8" />
                 <Skeleton className="w-auto h-10 mb-2" />
-                <div className="px-2 pt-1 text-xs text-muted-foreground">Inhaltsverzeichnis wird geladen...</div>
+                {/*TODO: need this?*/}
+                <div className="px-2 pt-1 text-xs text-muted-foreground">{t("loadingTableOfContents")}</div>
             </div>
         );
     }
@@ -302,7 +305,7 @@ export const DirectoryTreeSidebarMenu: FC<DirectoryTreeSidebarMenuProps> = ({
                 {node.children?.length ? (
                     <button
                         type="button"
-                        aria-label={expandedNodeIds.has(node.id) ? "Collapse section" : "Expand section"}
+                        aria-label={expandedNodeIds.has(node.id) ? t("collapseSection") : t("expandSection")}
                         className="h-8 w-8 inline-flex items-center justify-center text-muted-foreground hover:text-foreground"
                         onClick={() => toggleNode(node.id)}
                     >
@@ -335,11 +338,13 @@ type DirectoryTreeBreadcrumbProps = {
 
 export const DirectoryTreeBreadcrumb: FC<DirectoryTreeBreadcrumbProps> = ({
     lang,
-    homeLabel = "Home",
+    homeLabel,
     onNavigateHome,
     onNavigateNodeId,
 }) => {
+    const t = useTranslations();
     const { tree, isLoading } = useDirectoryTree();
+    const resolvedHomeLabel = homeLabel ?? t("home");
     const router = useRouter();
     const items = generateBreadcrumbItems(tree);
 
@@ -362,7 +367,7 @@ export const DirectoryTreeBreadcrumb: FC<DirectoryTreeBreadcrumbProps> = ({
             <BreadcrumbList>
                 <BreadcrumbItem>
                     <button type="button" onClick={navigateHome}>
-                        {homeLabel}
+                        {resolvedHomeLabel}
                     </button>
                 </BreadcrumbItem>
                 <BreadcrumbSeparator />

package/src/documents/description-preview.tsx

@@ -2,8 +2,10 @@
 
 import { FC, useEffect, useState } from "react";
 import { FragmentsGetByIdClient } from "../generated/client-components";
+import { Skeleton } from "@c-rex/ui/skeleton";
 import { ExpandableSummary } from "./expandable-summary";
 import type { RenditionModel } from "@c-rex/interfaces";
+import { useTranslations } from "next-intl";
 
 interface Props {
     fragmentShortId?: string;
@@ -48,6 +50,7 @@ const DocumentDescriptionPreviewContent: FC<{
     isLoading,
     hasError,
 }) => {
+    const t = useTranslations();
     const [text, setText] = useState<string | null>(null);
     const [loadingText, setLoadingText] = useState(false);
 
@@ -84,15 +87,20 @@ const DocumentDescriptionPreviewContent: FC<{
     }, [title, viewHref]);
 
     if (hasError) {
-        return <span className="text-muted-foreground">No rendition available</span>;
+        return <span className="text-muted-foreground">{t("noRenditionAvailable")}</span>;
     }
 
     if (isLoading || loadingText) {
-        return <span className="text-muted-foreground">Loading rendition...</span>;
+        return (
+            <div className="flex flex-col gap-1 pt-1">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-5/6" />
+            </div>
+        );
     }
 
     if (!text) {
-        return <span className="text-muted-foreground">No rendition available</span>;
+        return <span className="text-muted-foreground">{t("noRenditionAvailable")}</span>;
     }
 
     return <ExpandableSummary text={text} />;
@@ -102,8 +110,10 @@ export const DocumentDescriptionPreview: FC<Props> = ({
     fragmentShortId,
     title,
 }) => {
+    const t = useTranslations();
+
     if (!fragmentShortId) {
-        return <span className="text-muted-foreground">No rendition available</span>;
+        return <span className="text-muted-foreground">{t("noRenditionAvailable")}</span>;
     }
 
     return (