@c-rex/templates 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "src"
@@ -18,9 +18,13 @@
       "types": "./src/home/page.tsx",
       "import": "./src/home/page.tsx"
     },
-    "./info/page": {
-      "types": "./src/info/page.tsx",
-      "import": "./src/info/page.tsx"
+    "./articles/info/page": {
+      "types": "./src/articles/info/page.tsx",
+      "import": "./src/articles/info/page.tsx"
+    },
+    "./articles/documents/page": {
+      "types": "./src/articles/documents/page.tsx",
+      "import": "./src/articles/documents/page.tsx"
     },
     "./layout": {
       "types": "./src/layout.tsx",
@@ -28,7 +32,8 @@
     }
   },
   "scripts": {
-    "lint": "eslint . --max-warnings 0"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
     "@c-rex/eslint-config": "*",

package/src/articles/documents/page.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
+import { AppSidebar } from "@c-rex/components/sidebar";
+import { Breadcrumb } from "@c-rex/components/breadcrumb";
+import { loadArticleData } from "@c-rex/utils";
+
+export const DocumentsPageTemplate = async ({ params }: { params: { id: string } }) => {
+    const { documentURL, availableVersions: availableVersionsAux, title } = await loadArticleData(params.id)
+
+    const availableVersions = availableVersionsAux.map((item) => {
+        return {
+            link: `/documents/${item.shortId}`,
+            ...item,
+        }
+    })
+
+    return (
+        <SidebarProvider>
+            <title>{title}</title>
+            <AppSidebar
+                data={[]}
+                availableVersions={availableVersions}
+                className="top-20"
+                side="right"
+                variant="floating"
+                collapsible="icon"
+            />
+            <SidebarInset>
+                <div className="container flex flex-col">
+                    <header className="flex h-16 shrink-0 items-center justify-between">
+                        <div className="flex shrink-0 items-center">
+                            <Breadcrumb items={[
+                                {
+                                    link: "/",
+                                    label: title,
+                                    id: "title",
+                                    active: false,
+                                    children: [],
+                                }
+                            ]} />
+                        </div>
+                    </header>
+
+                    <div style={{ width: '100%', height: '90.6vh' }}>
+                        <iframe
+                            width="100%"
+                            height="100%"
+                            style={{ border: 'none' }}
+                            src={documentURL}
+                        />
+                    </div>
+                </div>
+            </SidebarInset>
+        </SidebarProvider>
+    );
+};

package/src/{info → articles/info}/page.tsx

@@ -1,28 +1,31 @@
-"use client";
-
-import React, { FC } from "react";
-import { TreeOfContent } from "@c-rex/interfaces";
+import React from "react";
 import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
 import { AppSidebar } from "@c-rex/components/sidebar";
 import { Breadcrumb } from "@c-rex/components/breadcrumb";
+import { loadArticleData } from "@c-rex/utils";
+
+export const InfoPageTemplate = async ({ params }: { params: { id: string } }) => {
+    const {
+        availableVersions: availableVersionsAux,
+        title,
+        treeOfContent,
+        breadcrumbItems,
+        htmlContent
+    } = await loadArticleData(params.id)
 
-interface InfoPageTemplateProps {
-    htmlContent: string;
-    breadcrumbItems: TreeOfContent[];
-    sidebarItems: TreeOfContent[];
-    availableVersions: any
-}
+    const availableVersions = availableVersionsAux.map((item) => {
+        return {
+            link: `/topics/${item.shortId}`,
+            ...item,
+        }
+    })
 
-export const InfoPageTemplate: FC<InfoPageTemplateProps> = ({
-    htmlContent,
-    breadcrumbItems,
-    sidebarItems,
-    availableVersions
-}) => {
     return (
         <SidebarProvider>
+            <title>{title}</title>
+
             <AppSidebar
-                data={sidebarItems}
+                data={treeOfContent}
                 availableVersions={availableVersions}
                 className="top-20"
                 side="right"

package/src/home/layout.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { informationUnits } from "@c-rex/interfaces";
+import { ConfigInterface, informationUnits } from "@c-rex/interfaces";
 import { InformationUnitsService, LanguageService } from "@c-rex/services";
-import { getConfigs } from "@c-rex/utils/next-cookies";
+import { getConfigs, getCookie } from "@c-rex/utils/next-cookies";
 import { HomePage } from "./page";
+import { SDK_CONFIG_KEY } from "@c-rex/constants";
 
 interface SearchParams {
     search?: string;
@@ -50,7 +51,7 @@ const loadData = async ({
         data = await service.getList({
             queries: searchValue.split(" ").join(","),
             page: pageAux,
-            fields: [],
+            fields: ["renditions", "class", "languages", "labels"],
             languages: selectedLanguages
         });
     }
@@ -68,10 +69,17 @@ const loadData = async ({
 
 export const HomeLayout = async ({ searchParams }: HomeProps) => {
     const { data, filters: { selectedLanguages, availableLanguages } } = await loadData(searchParams);
+    const jsonConfigs = await getCookie(SDK_CONFIG_KEY);
+    if (!jsonConfigs) {
+        return null;
+    }
+
+    const configs: ConfigInterface = JSON.parse(jsonConfigs);
 
     return (
         <HomePage
             data={data}
+            configs={configs}
             selectedLanguages={selectedLanguages}
             availableLanguages={availableLanguages}
         />

package/src/home/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { FC } from "react";
-import { informationUnits } from "@c-rex/interfaces";
+import { ConfigInterface, informationUnits } from "@c-rex/interfaces";
 import { call } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { AutoComplete } from "@c-rex/components/autocomplete";
@@ -11,18 +11,19 @@ import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
 import { DialogFilter } from "@c-rex/components/dialog-filter";
 import { getCookie } from "@c-rex/utils/next-cookies";
 import { CONTENT_LANG_KEY } from "@c-rex/constants";
-import { SearchProvider } from "@c-rex/contexts/search";
 
 interface HomePageProps {
     data: informationUnits;
     selectedLanguages: string[];
     availableLanguages: any;
+    configs: ConfigInterface
 }
 
 export const HomePage: FC<HomePageProps> = ({
     data,
     selectedLanguages,
     availableLanguages,
+    configs
 }) => {
     const t = useTranslations();
     const [params, setParams] = useQueryStates({
@@ -58,32 +59,30 @@ export const HomePage: FC<HomePageProps> = ({
     };
 
     return (
-        <SearchProvider>
-            <div className="container">
-                <div className="grid grid-cols-12 gap-4 py-6">
-                    <div className="col-span-12 sm:col-span-9 md:col-span-10">
-                        <AutoComplete
-                            initialValue={search}
-                            onSearch={onSearch}
-                            onSelect={onSelect}
-                        />
-                    </div>
-                    <div className="col-span-12 sm:col-span-3 md:col-span-2">
-                        <div className="flex justify-end">
-                            <DialogFilter
+        <div className="container">
+            <div className="grid grid-cols-12 gap-4 py-6">
+                <div className="col-span-12 sm:col-span-9 md:col-span-10">
+                    <AutoComplete
+                        initialValue={search}
+                        onSearch={onSearch}
+                        onSelect={onSelect}
+                    />
+                </div>
+                <div className="col-span-12 sm:col-span-3 md:col-span-2">
+                    <div className="flex justify-end">
+                        <DialogFilter
 
-                                startSelectedLanguages={selectedLanguages}
-                                availableLanguages={availableLanguages}
-                                trigger={(
-                                    <Button variant="default">{t("filters")}</Button>
-                                )}
-                            />
-                        </div>
+                            startSelectedLanguages={selectedLanguages}
+                            availableLanguages={availableLanguages}
+                            trigger={(
+                                <Button variant="default">{t("filters")}</Button>
+                            )}
+                        />
                     </div>
                 </div>
-
-                <ResultList items={data.items} />
             </div>
-        </SearchProvider>
+
+            <ResultList items={data.items} configs={configs} />
+        </div>
     );
 };