@c-rex/templates 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@c-rex/templates",
-    "version": "0.1.13",
+    "version": "0.1.15",
     "type": "module",
     "files": [
         "src"
@@ -56,7 +56,8 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-i18next": "^15.5.1",
-        "sonner": "^2.0.5"
+        "sonner": "^2.0.5",
+        "zustand": "^5.0.8"
     },
     "peerDependencies": {
         "react": "^18.3.1",

package/src/articles/documents/layout.tsx

@@ -40,7 +40,8 @@ export const DocumentsLayout = async ({ params }: Props) => {
         document,
         article,
         rootNode,
-        availableVersions,
+        articleAvailableVersions,
+        documentAvailableVersions,
         attachments,
         articleInfo,
         documentInfo
@@ -54,7 +55,8 @@ export const DocumentsLayout = async ({ params }: Props) => {
                 document={document}
                 article={article}
                 rootNode={rootNode}
-                availableVersions={availableVersions}
+                articleAvailableVersions={articleAvailableVersions}
+                documentAvailableVersions={documentAvailableVersions}
                 attachments={attachments!}
                 articleInfo={articleInfo!}
                 documentInfo={documentInfo!}

package/src/articles/documents/page.tsx

@@ -4,21 +4,22 @@ import React, { FC, useEffect, useState } from "react";
 import { ArticleWrapper } from "../wrapper";
 import { CollectionResult, TreeOfContent } from "@c-rex/interfaces";
 import { createAvailableVersionList, generateTreeOfContent } from "@c-rex/utils";
-import { DOCUMENTS_TYPE_AND_LINK } from "@c-rex/constants";
+import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { HighlightProvider } from "@c-rex/contexts/highlight-provider";
 
 export const DocumentsPage: FC<Omit<CollectionResult, "metaTags">> = ({
     articleHtml,
     document,
     article,
     rootNode,
-    availableVersions,
+    articleAvailableVersions,
+    documentAvailableVersions,
     attachments,
     articleInfo,
     documentInfo
 }) => {
     const { setPackageID } = useAppConfig();
-    const availableVersionsSidebar = createAvailableVersionList(availableVersions, article.languages[0]!, DOCUMENTS_TYPE_AND_LINK);
     const breadcrumbItems = [{
         link: "/",
         label: rootNode?.informationUnits[0]?.labels[0]?.value as string,
@@ -47,17 +48,25 @@ export const DocumentsPage: FC<Omit<CollectionResult, "metaTags">> = ({
     }, []);
 
     return (
-        <ArticleWrapper
-            htmlContent={articleHtml}
-            documentLang={document.languages[0]!}
-            articleLang={article.languages[0]!}
-            availableVersions={availableVersionsSidebar}
-            loading={loading}
-            documents={attachments!}
-            articleInfo={articleInfo!}
-            documentInfo={documentInfo!}
-            breadcrumbItems={breadcrumbItems}
-            treeOfContent={tree}
-        />
+        <HighlightProvider>
+            <ArticleWrapper
+                htmlContent={articleHtml}
+                documentLang={document.languages[0]!}
+                articleLang={article.languages[0]!}
+                articleAvailableVersions={
+                    createAvailableVersionList(articleAvailableVersions, article.languages[0]!, TOPICS_TYPE_AND_LINK)
+                }
+                documentAvailableVersions={
+                    createAvailableVersionList(documentAvailableVersions, document.languages[0]!, DOCUMENTS_TYPE_AND_LINK)
+                }
+
+                loading={loading}
+                documents={attachments!}
+                articleInfo={articleInfo!}
+                documentInfo={documentInfo!}
+                breadcrumbItems={breadcrumbItems}
+                treeOfContent={tree}
+            />
+        </HighlightProvider>
     );
 };

package/src/articles/topics/layout.tsx

@@ -38,7 +38,8 @@ export const TopicsLayout = async ({ params }: { params: { id: string } }) => {
         document,
         article,
         rootNode,
-        availableVersions,
+        articleAvailableVersions,
+        documentAvailableVersions,
         attachments,
         articleInfo,
         documentInfo
@@ -52,7 +53,8 @@ export const TopicsLayout = async ({ params }: { params: { id: string } }) => {
                 document={document}
                 article={article}
                 rootNode={rootNode}
-                availableVersions={availableVersions}
+                articleAvailableVersions={articleAvailableVersions}
+                documentAvailableVersions={documentAvailableVersions}
                 attachments={attachments!}
                 articleInfo={articleInfo!}
                 documentInfo={documentInfo!}

package/src/articles/topics/page.tsx

@@ -4,14 +4,16 @@ import React, { FC, useEffect, useState } from "react";
 import { ArticleWrapper } from "../wrapper";
 import { CollectionResult, TreeOfContent } from "@c-rex/interfaces";
 import { createAvailableVersionList, generateBreadcrumbItems, generateTreeOfContent } from "@c-rex/utils";
-import { TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
+import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { HighlightProvider } from "@c-rex/contexts/highlight-provider";
 
 export const TopicsPage: FC<Omit<CollectionResult, "metaTags">> = ({
     articleHtml,
     document,
     article,
-    availableVersions,
+    articleAvailableVersions,
+    documentAvailableVersions,
     attachments,
     articleInfo,
     documentInfo
@@ -19,7 +21,6 @@ export const TopicsPage: FC<Omit<CollectionResult, "metaTags">> = ({
     const { setPackageID } = useAppConfig();
     const [loading, setLoading] = useState<boolean>(true);
     const [tree, setTreeOfContent] = useState<TreeOfContent[]>([]);
-    const availableVersionsSidebar = createAvailableVersionList(availableVersions, article.languages[0]!, TOPICS_TYPE_AND_LINK);
     const [breadcrumbItems, setBreadcrumbItems] = useState<TreeOfContent[]>([]);
 
     useEffect(() => {
@@ -39,17 +40,24 @@ export const TopicsPage: FC<Omit<CollectionResult, "metaTags">> = ({
     }, []);
 
     return (
-        <ArticleWrapper
-            htmlContent={articleHtml}
-            documentLang={document.languages[0]!}
-            articleLang={article.languages[0]!}
-            availableVersions={availableVersionsSidebar}
-            loading={loading}
-            documents={attachments!}
-            articleInfo={articleInfo!}
-            documentInfo={documentInfo!}
-            breadcrumbItems={breadcrumbItems}
-            treeOfContent={tree}
-        />
+        <HighlightProvider>
+            <ArticleWrapper
+                htmlContent={articleHtml}
+                documentLang={document.languages[0]!}
+                articleLang={article.languages[0]!}
+                articleAvailableVersions={
+                    createAvailableVersionList(articleAvailableVersions, article.languages[0]!, TOPICS_TYPE_AND_LINK)
+                }
+                documentAvailableVersions={
+                    createAvailableVersionList(documentAvailableVersions, document.languages[0]!, DOCUMENTS_TYPE_AND_LINK)
+                }
+                loading={loading}
+                documents={attachments!}
+                articleInfo={articleInfo!}
+                documentInfo={documentInfo!}
+                breadcrumbItems={breadcrumbItems}
+                treeOfContent={tree}
+            />
+        </HighlightProvider>
     );
 };

package/src/articles/wrapper.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { SidebarTrigger } from "@c-rex/ui/sidebar";
 import { LeftSidebar } from "@c-rex/components/left-sidebar";
 import { RightSidebar } from "@c-rex/components/right-sidebar";
@@ -9,12 +9,23 @@ import { RenderArticle } from "@c-rex/components/render-article";
 import { articleInfoItemType, DocumentsType } from "@c-rex/types";
 import { AvailableVersionsInterface, TreeOfContent } from "@c-rex/interfaces";
 import { Separator } from "@c-rex/ui/separator";
+import { ArrowBigLeft, PanelRight, ArrowBigRight, StarIcon, Search, X, Pen, PenOff } from "lucide-react";
 import { SearchInput } from "../../../components/src/navbar/search-input";
+import { useMultiSidebar } from "@c-rex/ui/sidebar";
+import { Button } from "@c-rex/ui/button";
+import { useQueryState } from "nuqs";
+import { cn } from "@c-rex/utils";
+import { useHighlight } from "@c-rex/contexts/highlight-provider";
+import { useHighlightStore } from "@c-rex/components/highlight-store";
+import { useTranslations } from "next-intl";
+
 
 type Props = {
     documentLang: string,
     articleLang: string,
-    availableVersions: AvailableVersionsInterface[],
+    articleAvailableVersions: AvailableVersionsInterface[],
+    documentAvailableVersions: AvailableVersionsInterface[],
+
     htmlContent: string,
 
     articleInfo: articleInfoItemType[],
@@ -31,53 +42,114 @@ export const ArticleWrapper = ({
     documents,
     documentLang,
     articleLang,
-    availableVersions,
+    articleAvailableVersions,
+    documentAvailableVersions,
     loading,
     treeOfContent,
     documentInfo,
     articleInfo,
     breadcrumbItems,
 }: Props) => {
+    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="flex w-full overflow-hidden">
+        <div className="flex w-full">
             <LeftSidebar
                 lang={documentLang}
                 data={treeOfContent}
                 loading={loading}
                 side="left"
             />
-            <div className="flex-1 overflow-auto">
-                <div className=" p-4">
-
-                    <header className="flex h-12 gap-2 items-center justify-between">
-                        <div className="flex items-center gap-2">
-                            <SidebarTrigger side="left" />
-                            <Separator
-                                orientation="vertical"
-                                className="data-[orientation=vertical]:h-4 hidden sm:block"
-                            />
-                            <Breadcrumb items={breadcrumbItems} loading={loading} lang={documentLang} />
-                        </div>
-                        <SearchInput showInput={true} showPkgFilter={true} placedOn="BODY" />
-                    </header>
-
-                    <RenderArticle htmlContent={htmlContent} contentLang={articleLang} />
+            <div className="flex-1 p-4">
+                <header className="flex h-12 gap-2 items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        <SidebarTrigger side="left" />
+                        <Separator
+                            orientation="vertical"
+                            className="data-[orientation=vertical]:h-4 hidden sm:block"
+                        />
+                        <Breadcrumb items={breadcrumbItems} loading={loading} lang={documentLang} />
+                    </div>
+                    <SearchInput showInput={true} showPkgFilter={true} placedOn="BODY" />
+                </header>
 
-                </div>
-                <SidebarTrigger
-                    side="right"
-                    variant="default"
-                    size="default"
-                    className="fixed h-9 w-9 right-8 bottom-8 rounded-full drop-shadow-lg lg:hidden"
-                />
+                <RenderArticle htmlContent={htmlContent} contentLang={articleLang} />
+
+                <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">
+
+                    <div className="flex items-center">
+                        <input
+                            type="text"
+                            value={query as string || ""}
+                            ref={inputRef}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                    next();
+                                }
+                            }}
+
+                            onChange={(e) => setQuery(e.target.value || null)}
 
+                            placeholder={t("search")}
+                            className={cn(
+                                "border border-gray-300 rounded 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 className="h-5 w-5" />
+                    </Button>
+                    <Button variant="ghost" size="icon" rounded="full" onClick={next}>
+                        <ArrowBigRight className="h-5 w-5" />
+                    </Button>
+
+                    <Button variant="ghost" size="icon" rounded="full" onClick={rightSidebar.toggleSidebar}>
+                        <StarIcon className="h-5 w-5" />
+                    </Button>
+
+                    <Button variant="ghost" size="icon" rounded="full" onClick={() => toggleHighlight(!enableHighlight)}>
+                        {enableHighlight ?
+                            <PenOff className="h-5 w-5" /> :
+                            <Pen className="h-5 w-5" />
+                        }
+                    </Button>
+
+                    <Button variant="ghost" size="icon" rounded="full" onClick={rightSidebar.toggleSidebar}>
+                        <PanelRight className="h-5 w-5" />
+                    </Button>
+
+                </div>
             </div>
             <RightSidebar
                 side="right"
                 articleInfo={articleInfo}
                 documentInfo={documentInfo}
                 files={documents}
-                availableVersions={availableVersions}
+                articleAvailableVersions={articleAvailableVersions}
+                documentAvailableVersions={documentAvailableVersions}
             />
         </div>
     );

package/src/collectors/BaseArticleCollector.ts

@@ -1,5 +1,5 @@
 import { DirectoryNodesService, InformationUnitsService } from "@c-rex/services";
-import { CollectionContext, CollectionResult, DirectoryNodes, informationUnitsItems } from "@c-rex/interfaces";
+import { CollectionContext, CollectionResult, DirectoryNodes, informationUnitsItems, informationUnitsResponseItem } from "@c-rex/interfaces";
 import * as cheerio from "cheerio"
 import { articleInfoItemType, metaTags } from "@c-rex/types";
 
@@ -72,8 +72,13 @@ export abstract class BaseArticleCollector {
 
         if (this.collectVersions) {
             tasks.push({
-                name: 'versions',
-                task: () => this.getVersions(context)
+                name: 'articleVersions',
+                task: () => this.getArticleVersions(context)
+            });
+
+            tasks.push({
+                name: 'documentVersions',
+                task: () => this.getDocumentVersions(context)
             });
         }
 
@@ -120,13 +125,6 @@ export abstract class BaseArticleCollector {
         });
     }
 
-    protected async getVersions(context: CollectionContext) {
-        return await this.informationService.getList({
-            restrict: [`versionOf.shortId=${context.informationUnitsItem.versionOf.shortId}`],
-            fields: ["renditions", "class", "languages", "labels"],
-        });
-    }
-
     protected async getDocument(context: CollectionContext) {
         if (context.rootNode.informationUnits[0]) {
             const infoId = context.rootNode.informationUnits[0].shortId;
@@ -166,6 +164,14 @@ export abstract class BaseArticleCollector {
         throw new Error("getHtmlContent must be implemented by subclass");
     }
 
+    protected async getArticleVersions(context: CollectionContext): Promise<informationUnitsResponseItem[]> {
+        throw new Error("getArticleVersions must be implemented by subclass");
+    }
+
+    protected async getDocumentVersions(context: CollectionContext): Promise<informationUnitsResponseItem[]> {
+        throw new Error("getDocumentVersions must be implemented by subclass");
+    }
+
     protected splitHtmlContentAndTags(html: string): { metaTags: metaTags, articleHtml: string } {
         const $ = cheerio.load(html)
 
@@ -191,7 +197,8 @@ export abstract class BaseArticleCollector {
             document: data.document,
             article: context.informationUnitsItem,
             rootNode: context.rootNode,
-            availableVersions: data.versions?.items || [],
+            articleAvailableVersions: data.articleVersions || [],
+            documentAvailableVersions: data.documentVersions || [],
         }
 
         if (this.collectArticleInfo) {

package/src/collectors/DocumentArticleCollector.ts

@@ -1,5 +1,5 @@
 import { BaseArticleCollector } from './BaseArticleCollector';
-import { CollectionContext } from "@c-rex/interfaces";
+import { CollectionContext, informationUnitsResponseItem } from "@c-rex/interfaces";
 import { RenditionsService } from "@c-rex/services";
 import { DocumentsType } from '@c-rex/types';
 import { getFileRenditions } from '@c-rex/utils';
@@ -33,6 +33,35 @@ export class DocumentArticleCollector extends BaseArticleCollector {
         });
     }
 
+    protected async getDocumentVersions(context: CollectionContext): Promise<informationUnitsResponseItem[]> {
+        const versions = await this.informationService.getList({
+            restrict: [`versionOf.shortId=${context.informationUnitsItem.versionOf.shortId}`],
+            fields: ["renditions", "class", "languages", "labels"],
+        })
+
+        return versions.items;
+    }
+
+    protected async getArticleVersions(context: CollectionContext): Promise<informationUnitsResponseItem[]> {
+        if (!context.rootNode.childNodes[0]) {
+            return [];
+        }
+        const directoryId = context.rootNode.childNodes[0].shortId;
+        const response = await this.directoryNodeService.getItem(directoryId);
+
+        const infoId = response.informationUnits[0]?.shortId as string
+        const childInformationUnit = await this.informationService.getItem({
+            id: infoId
+        });
+
+        const versions = await this.informationService.getList({
+            restrict: [`versionOf.shortId=${childInformationUnit.versionOf.shortId}`],
+            fields: ["renditions", "class", "languages", "labels"],
+        })
+
+        return versions.items;
+    }
+
     private async getAttachments(context: CollectionContext): Promise<DocumentsType> {
         const rootNodeInfoID = context.rootNode.informationUnits[0]?.shortId as string
         const childInformationUnit = await this.informationService.getItem({

package/src/collectors/TopicArticleCollector.ts

@@ -1,5 +1,5 @@
 import { BaseArticleCollector } from './BaseArticleCollector';
-import { CollectionContext } from "@c-rex/interfaces";
+import { CollectionContext, informationUnitsResponseItem } from "@c-rex/interfaces";
 import { RenditionsService } from "@c-rex/services";
 import { DocumentsType } from '@c-rex/types';
 import { getFileRenditions } from '@c-rex/utils';
@@ -18,12 +18,34 @@ export class TopicArticleCollector extends BaseArticleCollector {
     }
 
     protected async getHtmlContent(context: CollectionContext): Promise<string> {
-        // Topic-specific HTML source
         return await this.renditionService.getHTMLRendition({
             renditions: context.informationUnitsItem.renditions
         });
     }
 
+    protected async getDocumentVersions(context: CollectionContext): Promise<informationUnitsResponseItem[]> {
+        const rootNodeInfoID = context.rootNode.informationUnits[0]?.shortId as string
+        const childInformationUnit = await this.informationService.getItem({
+            id: rootNodeInfoID
+        });
+
+        const versions = await this.informationService.getList({
+            restrict: [`versionOf.shortId=${childInformationUnit.versionOf.shortId}`],
+            fields: ["renditions", "class", "languages", "labels"],
+        })
+
+        return versions.items;
+    }
+
+    protected async getArticleVersions(context: CollectionContext): Promise<informationUnitsResponseItem[]> {
+        const versions = await this.informationService.getList({
+            restrict: [`versionOf.shortId=${context.informationUnitsItem.versionOf.shortId}`],
+            fields: ["renditions", "class", "languages", "labels"],
+        })
+
+        return versions.items;
+    }
+
     private async getAttachments(context: CollectionContext): Promise<DocumentsType> {
         const rootNodeInfoID = context.rootNode.informationUnits[0]?.shortId as string
         const childInformationUnit = await this.informationService.getItem({

package/src/home/layout.tsx

@@ -1,6 +1,6 @@
 import { HomePage } from "./page";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
-import { WildCardType } from "@c-rex/types";
+import { OperatorType, WildCardType } from "@c-rex/types";
 import { InformationUnitsService } from "@c-rex/services";
 import { informationUnitsResponse } from "@c-rex/interfaces";
 import { SearchProvider } from "@c-rex/contexts/search";
@@ -48,7 +48,7 @@ export const HomeLayout = async ({ searchParams }: HomeProps) => {
             languages: language.split(","),
             wildcard: wildcard as WildCardType,
             restrict: restrict,
-            operator: operator,
+            operator: operator as OperatorType,
             like: Boolean(like === "true"),
             filters: filters,
             tags: config.search.tags,

package/src/home/page.tsx

@@ -38,7 +38,6 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
     const { setLoading } = useSearchContext();
     const device = useBreakpoint();
     const isMobile = device === DEVICE_OPTIONS.MOBILE;
-    const [disabled, setDisabled] = useState<boolean>(false)
     const [open, setOpen] = useState<boolean>(false)
     const [params, setParams] = useQueryStates({
         language: parseAsString,
@@ -83,6 +82,12 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
                     }
                 })
             })
+        } else {
+            Object.keys(newTags).forEach((key) => {
+                newTags[key].forEach((el: any) => {
+                    el.active = false
+                })
+            })
         }
 
         if (params.packages !== null && newTags["packages"]) {
@@ -99,7 +104,7 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
     }, [data, params]);
 
     const filters = useMemo(() => {
-        if (!tags) return [];
+        if (!tags || params.search.length === 0) return [];
 
         const filters: filterModel[] = [{
             key: "operator",
@@ -181,13 +186,6 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
         return filters
     }, [tags, params]);
 
-    useEffect(() => {
-        if (params.search.length == 0) {
-            setDisabled(true)
-            return
-        }
-    }, [data, params])
-
     useEffect(() => setLoading(false), [data])
 
     const updateFilterParam = (key: string, item: any) => {
@@ -258,7 +256,7 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
                 </div>
                 <DialogFilter
                     trigger={(
-                        <Button variant="default" disabled={disabled}>
+                        <Button variant="default">
                             <span className="hidden sm:inline">
                                 {t("searchSettings")}
                             </span>

package/src/collectors/BlogArticleCollector.ts

@@ -1,45 +0,0 @@
-import { BaseArticleCollector } from './BaseArticleCollector';
-import { CollectionContext, CollectionResult } from "@c-rex/interfaces";
-import { RenditionsService } from "@c-rex/services";
-
-export class BlogArticleCollector extends BaseArticleCollector {
-    private renditionService = new RenditionsService();
-
-    protected configureTasks(): void {
-        this.withVersions()
-            .withHtmlContent()
-            .withCustomTask('metadata', this.getBlogMetadata.bind(this))
-            .withCustomTask('tags', this.getBlogTags.bind(this));
-    }
-
-    protected async getHtmlContent(context: CollectionContext): Promise<string> {
-        return await this.renditionService.getHTMLRendition({
-            renditions: context.informationUnitsItem.renditions
-        });
-    }
-
-    // Blog-specific methods
-    private async getBlogMetadata(context: CollectionContext) {
-        // Blog-specific metadata logic
-        return {
-            author: context.informationUnitsItem.authors?.[0],
-            publishDate: context.informationUnitsItem.publishDate,
-            categories: context.informationUnitsItem.categories
-        };
-    }
-
-    private async getBlogTags(context: CollectionContext) {
-        // Blog-specific tags logic
-        return context.informationUnitsItem.tags || [];
-    }
-
-    protected buildResult(context: CollectionContext, data: Record<string, any>): CollectionResult {
-        return {
-            ...super.buildResult(context, data),
-            metadata: data.metadata,
-            tags: data.tags,
-            // Blog não precisa de document
-            document: undefined
-        };
-    }
-}