@c-rex/components 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "files": [
     "src"
   ],
@@ -9,33 +9,45 @@
   },
   "sideEffects": false,
   "exports": {
-    "./autocomplete": {
-      "types": "./src/autocomplete.tsx",
-      "import": "./src/autocomplete.tsx"
+    "./server-components": {
+      "types": "./src/generated/server-components.tsx",
+      "import": "./src/generated/server-components.tsx"
     },
-    "./blog-card": {
-      "types": "./src/blog-card.tsx",
-      "import": "./src/blog-card.tsx"
+    "./client-components": {
+      "types": "./src/generated/client-components.tsx",
+      "import": "./src/generated/client-components.tsx"
     },
-    "./blur-image": {
-      "types": "./src/blur-image.tsx",
-      "import": "./src/blur-image.tsx"
+    "./suggestion-components": {
+      "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"
+    },
+    "./page-wrapper": {
+      "types": "./src/page-wrapper.tsx",
+      "import": "./src/page-wrapper.tsx"
+    },
     "./settings-menu": {
       "types": "./src/navbar/settings.tsx",
       "import": "./src/navbar/settings.tsx"
     },
+    "./favorite-button": {
+      "types": "./src/favorites/favorite-button.tsx",
+      "import": "./src/favorites/favorite-button.tsx"
+    },
     "./flag": {
       "types": "./src/flag.tsx",
       "import": "./src/flag.tsx"
     },
-    "./pagination": {
-      "types": "./src/pagination.tsx",
-      "import": "./src/pagination.tsx"
+    "./loading": {
+      "types": "./src/loading.tsx",
+      "import": "./src/loading.tsx"
     },
     "./info-table": {
       "types": "./src/info/info-table.tsx",
@@ -45,69 +57,61 @@
       "types": "./src/info/info-card.tsx",
       "import": "./src/info/info-card.tsx"
     },
-    "./empty": {
-      "types": "./src/empty.tsx",
-      "import": "./src/empty.tsx"
-    },
-    "./navbar": {
-      "types": "./src/navbar/navbar.tsx",
-      "import": "./src/navbar/navbar.tsx"
+    "./check-article-lang": {
+      "types": "./src/check-article-lang.tsx",
+      "import": "./src/check-article-lang.tsx"
     },
-    "./providers/search-state-wrapper": {
-      "types": "./src/providers/search-state-wrapper.tsx",
-      "import": "./src/providers/search-state-wrapper.tsx"
+    "./render-article": {
+      "types": "./src/render-article.tsx",
+      "import": "./src/render-article.tsx"
     },
-    "./result-list": {
-      "types": "./src/result-list.tsx",
-      "import": "./src/result-list.tsx"
+    "./html-rendition": {
+      "types": "./src/renditions/html.tsx",
+      "import": "./src/renditions/html.tsx"
     },
-    "./result-view/blog": {
-      "types": "./src/result-view/blog.tsx",
-      "import": "./src/result-view/blog.tsx"
+    "./image-rendition-container": {
+      "types": "./src/renditions/container.ts",
+      "import": "./src/renditions/container.ts"
     },
-    "./result-view/table": {
-      "types": "./src/result-view/table.tsx",
-      "import": "./src/result-view/table.tsx"
+    "./autocomplete": {
+      "types": "./src/autocomplete.tsx",
+      "import": "./src/autocomplete.tsx"
     },
-    "./dropdown-menu": {
-      "types": "./src/result-view/dropdown-menu.tsx",
-      "import": "./src/result-view/dropdown-menu.tsx"
+    "./result-container": {
+      "types": "./src/result-container.tsx",
+      "import": "./src/result-container.tsx"
     },
-    "./left-sidebar": {
-      "types": "./src/left-sidebar.tsx",
-      "import": "./src/left-sidebar.tsx"
+    "./table": {
+      "types": "./src/results/table.tsx",
+      "import": "./src/results/table.tsx"
     },
-    "./right-sidebar": {
-      "types": "./src/right-sidebar.tsx",
-      "import": "./src/right-sidebar.tsx"
+    "./table-with-images": {
+      "types": "./src/results/table-with-images.tsx",
+      "import": "./src/results/table-with-images.tsx"
     },
     "./dialog-filter": {
-      "types": "./src/dialog-filter.tsx",
-      "import": "./src/dialog-filter.tsx"
+      "types": "./src/results/dialog-filter.tsx",
+      "import": "./src/results/dialog-filter.tsx"
     },
-    "./check-article-lang": {
-      "types": "./src/check-article-lang.tsx",
-      "import": "./src/check-article-lang.tsx"
-    },
-    "./render-article": {
-      "types": "./src/render-article.tsx",
-      "import": "./src/render-article.tsx"
+    "./pagination": {
+      "types": "./src/results/pagination.tsx",
+      "import": "./src/results/pagination.tsx"
     },
-    "./page-wrapper": {
-      "types": "./src/page-wrapper.tsx",
-      "import": "./src/page-wrapper.tsx"
+    "./cards": {
+      "types": "./src/results/cards.tsx",
+      "import": "./src/results/cards.tsx"
     },
-    "./search-modal": {
-      "types": "./src/search-modal.tsx",
-      "import": "./src/search-modal.tsx"
+    "./empty": {
+      "types": "./src/results/empty.tsx",
+      "import": "./src/results/empty.tsx"
     },
-    "./loading": {
-      "types": "./src/loading.tsx",
-      "import": "./src/loading.tsx"
+    "./filter-sidebar": {
+      "types": "./src/results/filter-sidebar/index.tsx",
+      "import": "./src/results/filter-sidebar/index.tsx"
     },
-    "./favorite-button": {
-      "types": "./src/favorite-button.tsx",
-      "import": "./src/favorite-button.tsx"
+    "./filter-navbar": {
+      "types": "./src/results/filter-navbar.tsx",
+      "import": "./src/results/filter-navbar.tsx"
     },
     "./language-store": {
       "types": "./src/stores/language-store.ts",
@@ -120,6 +124,18 @@
     "./favorites-store": {
       "types": "./src/stores/favorites-store.ts",
       "import": "./src/stores/favorites-store.ts"
+    },
+    "./article-content": {
+      "types": "./src/article/article-content.tsx",
+      "import": "./src/article/article-content.tsx"
+    },
+    "./tree-of-content": {
+      "types": "./src/directoryNodes/tree-of-content.tsx",
+      "import": "./src/directoryNodes/tree-of-content.tsx"
+    },
+    "./share-button": {
+      "types": "./src/share-button.tsx",
+      "import": "./src/share-button.tsx"
     }
   },
   "scripts": {

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

@@ -0,0 +1,89 @@
+"use client";
+import { FC, useEffect, useRef, useState } from "react";
+import { useHighlightStore } from "../stores/highlight-store";
+import { Button } from "@c-rex/ui/button";
+import { ArrowBigLeft, ArrowBigRight, FileSearchIcon, PanelRight, Search, X } from "lucide-react";
+import { useQueryState } from "nuqs";
+import { useHighlight } from "@c-rex/contexts/highlight-provider";
+import { useMultiSidebar } from "@c-rex/ui/sidebar";
+import { cn } from "@c-rex/utils";
+import { useTranslations } from "next-intl";
+
+export const ArticleActionBar: FC = () => {
+    const t = useTranslations();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const { next, prev } = useHighlight();
+    const [open, setOpen] = useState(false);
+    const enableHighlight = useHighlightStore((state) => state.enable);
+    const toggleHighlight = useHighlightStore((state) => state.toggleHighlight);
+    const { rightSidebar } = useMultiSidebar()
+    const [query, setQuery] = useQueryState("q");
+
+    useEffect(() => {
+        if (open && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [open]);
+
+    return (
+        <>
+            <div className="w-full sm:w-auto justify-between bg-primary text-primary-foreground rounded-full shadow-lg flex sticky bottom-4 p-2 float-right gap-2 transition-all duration-300">
+                {enableHighlight && (
+
+                    <>
+                        <div className="flex items-center">
+                            <input
+                                type="text"
+                                value={query as string || ""}
+                                ref={inputRef}
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter") {
+                                        next();
+                                    }
+                                    if (e.key === "Escape") {
+                                        setOpen(false);
+                                    }
+                                }}
+                                onChange={(e) => setQuery(e.target.value || null)}
+                                placeholder={t("search")}
+                                className={cn(
+                                    "border border-gray-300 left-12 transition-all duration-300 rounded-full h-9 bg-secondary text-secondary-foreground focus:outline-none focus:ring-2 focus:ring-blue-500",
+                                    open ? "w-48 opacity-100 px-2 mr-2" : "w-0 opacity-0 px-0"
+                                )}
+                            />
+
+                            <Button
+                                variant="ghost" size="icon" rounded="full" onClick={() => setOpen(!open)}
+                            >
+                                {open ? <X className="w-5 h-5" /> : <Search className="w-5 h-5" />}
+                            </Button>
+
+                        </div>
+
+                        <Button variant="ghost" size="icon" rounded="full" onClick={prev}>
+                            <ArrowBigLeft />
+                        </Button>
+                        <Button variant="ghost" size="icon" rounded="full" onClick={next}>
+
+                            <ArrowBigRight />
+                        </Button>
+                    </>
+                )}
+
+                <Button variant="ghost" size="icon" rounded="full" onClick={() => toggleHighlight(!enableHighlight)} className="group">
+                    {enableHighlight ?
+                        <FileSearchIcon /> :
+                        <div className="relative inline-block">
+                            <FileSearchIcon />
+                            <span className="absolute inset-0 w-[2px] bg-primary-foreground rotate-45 translate-x-2 group-hover:bg-accent-foreground" />
+                        </div>
+                    }
+                </Button>
+
+                <Button variant="ghost" size="icon" rounded="full" onClick={rightSidebar.toggleSidebar}>
+                    <PanelRight />
+                </Button>
+            </div>
+        </>
+    )
+}

package/src/article/article-content.tsx

@@ -0,0 +1,55 @@
+import { FC } from "react";
+import { RenditionModel } from "@c-rex/interfaces";
+import { RenderArticle } from "../render-article";
+import { ArticleActionBar } from "./article-action-bar";
+import * as cheerio from "cheerio"
+
+interface Props {
+    renditions: RenditionModel[] | null | undefined;
+}
+
+export const ArticleContent: FC<Props> = async ({ renditions }) => {
+    const empty = (
+        <div>No HTML Rendition Available</div>
+    )
+
+    if (renditions == null || renditions.length == 0) return empty;
+
+    const filteredRenditions = renditions.filter((item) => item.format == "application/xhtml+xml");
+
+    if (filteredRenditions.length == 0 || filteredRenditions[0] == undefined || filteredRenditions[0].links == undefined) return empty;
+
+    const filteredLinks = filteredRenditions[0].links.filter((item) => item.rel == "view");
+
+    if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
+
+    const url = filteredLinks[0].href;
+    const html = await fetch(url, {
+        method: "GET",
+        headers: {
+            Accept: "application/xhtml+xml",
+        },
+    }).then(res => res.text());
+
+    const $ = cheerio.load(html)
+
+    const metaTags = $("meta").map((_, el) => {
+        const name = $(el).attr("name")
+        const content = $(el).attr("content")
+        return name && content ? { name, content } : null
+    }).get().filter(Boolean)
+
+    const articleHtml = $("main").html() || ""
+
+    return (
+        <>
+            {metaTags.map((tag, index) => (
+                <meta key={index} name={tag.name} content={tag.content} />
+            ))}
+            <div className="pr-4 relative">
+                <RenderArticle htmlContent={articleHtml} contentLang="" />
+            </div>
+            <ArticleActionBar />
+        </>
+    )
+}

package/src/autocomplete.tsx

@@ -1,55 +1,68 @@
 "use client"
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Input } from "@c-rex/ui/input";
-import { call, generateQueryParams } from "@c-rex/utils";
 import { useTranslations } from "next-intl";
-import { useAppConfig } from "@c-rex/contexts/config-provider";
-import { QueryParams } from "@c-rex/types";
+import { SuggestionQueryParams } from "@c-rex/interfaces";
+
 import { useSearchSettingsStore } from "./stores/search-settings-store";
 import { useLanguageStore } from "./stores/language-store";
-
-type Props = {
-    initialValue: string;
-    embedded: boolean
-    searchByPackage: boolean
+import { useRouter } from 'next/navigation';
+import { suggestionRequest } from "./generated/create-suggestions-request";
+
+export type AutoCompleteProps = {
+    initialValue?: string;
+    embedded?: boolean;
+    endpoint: string;
+    queryParams?: SuggestionQueryParams
+    onSelectParams?: { key: string, value: string }[];
 };
 
-export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props) => {
+export const AutoComplete = ({
+    initialValue = "",
+    embedded = true,
+    endpoint,
+    queryParams,
+    onSelectParams,
+}: AutoCompleteProps) => {
     const t = useTranslations();
     const containerRef = useRef<HTMLDivElement>(null);
-    const contentLang = useLanguageStore.getState().contentLang;
-
-    const { articleLang, packageID } = useAppConfig()
-
+    const router = useRouter();
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState(initialValue);
     const [loading, setLoading] = useState(false);
     const [suggestions, setSuggestions] = useState<string[]>([]);
 
-    const onSearch = (value: string): Promise<string[]> => {
-        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: articleLang || contentLang });
-    }
-
-    const onSelect = (value: string) => {
-        const params: QueryParams[] = [
-            { key: "search", value: value },
-            { key: "page", value: "1" },
-            { key: "operator", value: useSearchSettingsStore.getState().operator },
+    const fetchSuggestions = useCallback(async (prefix: string): Promise<string[]> => {
+        const results = await suggestionRequest({ endpoint, prefix, queryParams });
 
-            { key: "language", value: useLanguageStore.getState().contentLang },
+        return results.data;
+    }, [endpoint, queryParams]);
 
-            { key: "wildcard", value: useSearchSettingsStore.getState().wildcard },
-            { key: "like", value: useSearchSettingsStore.getState().like.toString() },
-        ]
-
-        if (searchByPackage && packageID !== null) {
-            params.push({ key: "packages", value: packageID })
-        }
-
-        const aux = generateQueryParams(params)
+    const handleSelect = (value: string) => {
+        setQuery(value);
+        setOpen(false);
+        onSelect(value);
+    };
 
-        window.location.href = `${window.location.origin}/?${aux}`
+    const onSelect = (value: string) => {
+        const params = new URLSearchParams();
+        const searchSettings = useSearchSettingsStore.getState();
+        const languageSettings = useLanguageStore.getState();
+
+        params.set('search', value);
+        params.set("page", "1")
+        params.set("operator", searchSettings.operator)
+        params.set("language",
+            searchSettings.language.length > 0 ? searchSettings.language.join(",") : languageSettings.contentLang)
+        params.set("wildcard", searchSettings.wildcard)
+        params.set("like", searchSettings.like.toString())
+
+        onSelectParams?.forEach(param => {
+            params.set(param.key, param.value);
+        });
+
+        router.push(`/?${params.toString()}`);
     };
 
     useEffect(() => {
@@ -73,18 +86,15 @@ export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props)
         }
 
         const debounceFetch = setTimeout(() => {
-            setLoading(true)
-            onSearch(query).then(suggestions => {
-                setSuggestions(suggestions)
-                setLoading(false)
-            }).catch(() => {
-                setLoading(false)
-                setSuggestions([])
-            });
+            setLoading(true);
+            fetchSuggestions(query)
+                .then(setSuggestions)
+                .catch(() => setSuggestions([]))
+                .finally(() => setLoading(false));
         }, 300);
 
         return () => clearTimeout(debounceFetch);
-    }, [query]);
+    }, [query, fetchSuggestions]);
 
     return (
         <div className="relative flex-1" ref={containerRef}>
@@ -100,8 +110,7 @@ export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props)
                 onKeyDown={(e) => {
                     if (e.key === "Enter") {
                         e.preventDefault();
-                        onSelect(query);
-                        setOpen(false)
+                        handleSelect(query);
                     }
                 }}
             />
@@ -122,11 +131,7 @@ export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props)
                                         <li
                                             key={index}
                                             className="px-4 py-2 hover:bg-accent cursor-pointer text-sm"
-                                            onClick={() => {
-                                                setQuery(option);
-                                                setOpen(false);
-                                                onSelect(`"${option}"`);
-                                            }}
+                                            onClick={() => handleSelect(`"${option}"`)}
                                         >
                                             {option}
                                         </li>

package/src/breadcrumb.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, Fragment, ReactNode } from "react";
 import {
     Breadcrumb as BreadcrumbComponent,
@@ -74,7 +76,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
                                 {items.slice(0, -1).map((item, index) => (
                                     <Link
                                         key={index}
-                                        href={item.link}
+                                        href={item.link!}
                                         className="py-1 text-sm"
                                     >
                                         {item.label}

package/src/directoryNodes/tree-of-content.tsx

@@ -0,0 +1,49 @@
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+} from "@c-rex/ui/sidebar";
+import { DirectoryNodeModel } from "@c-rex/interfaces";
+import { generateTreeOfContent } from "@c-rex/utils/directoryNodes";
+
+interface SidebarProps {
+    directoryNodes: DirectoryNodeModel[];
+}
+
+export async function TreeOfContent({ directoryNodes }: SidebarProps) {
+    const tree = await generateTreeOfContent(directoryNodes);
+
+    return (
+        <SidebarMenu>
+            {tree.map((item) => (
+                <SidebarMenuItem key={item.id}>
+                    <SidebarMenuButton asChild isActive={item.active}>
+                        <a href={item.link} title={item.label}>
+                            {item.label}
+                        </a>
+                    </SidebarMenuButton>
+
+                    {item.children?.length ? (
+                        <SidebarMenuSub>
+                            {item.children.map((item) => (
+                                <SidebarMenuSubItem key={item.label}>
+                                    <SidebarMenuSubButton
+                                        asChild
+                                        isActive={item.active}
+                                    >
+                                        <a href={item.link} title={item.label}>
+                                            {item.label}
+                                        </a>
+                                    </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                            ))}
+                        </SidebarMenuSub>
+                    ) : null}
+                </SidebarMenuItem>
+            ))}
+        </SidebarMenu>
+    );
+}

package/src/{bookmark-button.tsx → favorites/bookmark-button.tsx}

@@ -1,11 +1,11 @@
 "use client";
 
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useEffect, useState } 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 { Favorite } from "@c-rex/types";
+import { useFavoritesStore } from "../stores/favorites-store";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@c-rex/ui/dialog";
 import {
     Table,
@@ -15,7 +15,16 @@ import {
 } from "@c-rex/ui/table"
 import { FaRegBookmark } from "react-icons/fa6";
 
-export const BookmarkButton: FC<{ markersList: Favorite[], trigger?: ReactNode }> = ({ markersList, trigger }) => {
+export const BookmarkButton: FC<{ shortId: string, trigger?: ReactNode }> = ({ shortId, trigger }) => {
+    const [markersList, setMarkersList] = useState<Array<{ id: string; label: string; color: string }>>([]);
+
+    useEffect(() => {
+        setMarkersList(useFavoritesStore.getState().documents[shortId]?.topics || []);
+    }, [shortId]);
+
+    useEffect(() => {
+        console.log(shortId, markersList);
+    }, [markersList]);
 
     return (
         <Dialog>

package/src/{favorite-button.tsx → favorites/favorite-button.tsx}

@@ -3,7 +3,7 @@
 import { FC, useEffect, useState } from "react";
 import { Button } from "@c-rex/ui/button";
 import { FaStar, FaRegStar } from "react-icons/fa";
-import { useFavoritesStore } from "./stores/favorites-store";
+import { useFavoritesStore } from "../stores/favorites-store";
 import { MARKER_COLORS, RESULT_TYPES } from "@c-rex/constants";
 import { ResultTypes } from "@c-rex/types";