@c-rex/components 0.1.28 → 0.1.30

package/src/results/generic/table-result-list.tsx

@@ -1,35 +1,28 @@
 import { FC } from "react";
-import {
-    DocumentModel,
-    ExternalProductGraphicModel,
-    FragmentModel,
-    InformationUnitModel,
-    PackageModel,
-    TopicModel
-} from "@c-rex/interfaces";
-import { cn, getLanguage, getTitle, getType, getVersions } from "@c-rex/utils";
+import { CommonItemsModel } from "@c-rex/interfaces";
+import { cn, generateQueryParams, getLanguage, getTitle, getType } from "@c-rex/utils";
 import { Flag } from "@c-rex/components/flag";
 import { Badge } from "@c-rex/ui/badge";
-import { RESULT_TYPES } from "@c-rex/constants";
 import Link from "next/link";
 import { FileDownloadDropdown } from "@c-rex/components/file-download";
 import { getTranslations } from "next-intl/server";
+import { QueryParams } from "@c-rex/types";
 
 interface Props {
-    items: (
-        DocumentModel |
-        ExternalProductGraphicModel |
-        FragmentModel |
-        InformationUnitModel |
-        PackageModel |
-        TopicModel
-    )[];
-    query: string;
-    linkPath: string;
+    items: CommonItemsModel[];
+    linkPattern: string;
+    addPackageId: boolean
     showFilesColumn?: boolean;
+    query?: string
 }
 
-export const GenericTableResultList: FC<Props> = async ({ items, query, linkPath, showFilesColumn = true }) => {
+export const GenericTableResultList: FC<Props> = async ({
+    items,
+    linkPattern,
+    addPackageId,
+    query,
+    showFilesColumn = true,
+}) => {
     const t = await getTranslations("results");
 
     return (
@@ -48,15 +41,25 @@ export const GenericTableResultList: FC<Props> = async ({ items, query, linkPath
                 const itemType = getType(item.class);
                 const language = getLanguage(item.languages);
                 const packageId = item.packages && item.packages.length > 0 ? item.packages[0]?.shortId : null;
+                const queryParams: QueryParams[] = []
 
-                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
-                const multipleVersions = getVersions(item.versionOf);
-
-                let itemLink = `${linkPath}/${item.shortId}?q=${query}`
+                if (addPackageId && packageId) {
+                    queryParams.push({
+                        key: "package",
+                        value: packageId,
+                    })
+                }
 
-                if (packageId) {
-                    itemLink += `&package=${packageId}`
+                if (query != undefined) {
+                    queryParams.push({
+                        key: "q",
+                        value: query,
+                    })
                 }
+
+                const params = generateQueryParams(queryParams)
+                const link = linkPattern.replace("{id}", item.shortId!) + (params.length > 0 ? `?${params}` : "")
+
                 return (
                     <div
                         className={cn(
@@ -66,7 +69,7 @@ export const GenericTableResultList: FC<Props> = async ({ items, query, linkPath
                         key={index}
                     >
                         <div className="flex-1 p-2">
-                            <Link href={itemLink} className="hover:underline">{title}</Link>
+                            <Link href={link} className="hover:underline">{title}</Link>
                         </div>
 
                         <div className="w-1/5 md:w-1/5 flex justify-center p-2">

package/src/results/stories/cards.stories.tsx

@@ -9,11 +9,10 @@ const meta: Meta<typeof BlogView> = {
     },
     tags: ['autodocs'],
 };
-
 export default meta;
 type Story = StoryObj<typeof BlogView>;
 
-const mockItems = [
+const items = [
     {
         id: '1',
         shortId: 'doc-1',
@@ -24,7 +23,8 @@ const mockItems = [
         languages: ['pt-BR'],
         type: 'document',
         renditions: [],
-        directoryNodes: []
+        directoryNodes: [],
+        disabled: false,
     },
     {
         id: '2',
@@ -35,7 +35,8 @@ const mockItems = [
         languages: ['en-US'],
         type: 'document',
         renditions: [],
-        directoryNodes: []
+        directoryNodes: [],
+        disabled: false,
     },
     {
         id: '3',
@@ -47,12 +48,19 @@ const mockItems = [
         languages: ['fr-FR'],
         type: 'document',
         renditions: [],
-        directoryNodes: []
+        directoryNodes: [],
+        disabled: true,
     }
 ];
 
-export const Default: Story = {
+export const Basic: Story = {
     args: {
-        items: mockItems as any
-    }
+        items,
+    },
+};
+
+export const WithDisabled: Story = {
+    args: {
+        items: items.map((item, i) => ({ ...item, disabled: i === 2 })),
+    },
 };

package/src/results/stories/dialog-filter.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogFilter } from '../dialog-filter';
+import { Button } from '@c-rex/ui/button';
+
+const meta: Meta<typeof DialogFilter> = {
+    title: 'Components/Results/DialogFilter',
+    component: DialogFilter,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof DialogFilter>;
+
+export const Basic: Story = {
+    args: {
+        trigger: <Button>Open Filter</Button>,
+    },
+};

package/src/results/stories/empty.stories.tsx

@@ -10,5 +10,16 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+
+export const Basic: Story = {};
+
+export const CustomMessage: Story = {
+    render: () => (
+        <div style={{ maxWidth: 400 }}>
+            <Empty />
+            <div style={{ marginTop: 16, color: '#888' }}>
+                Nenhum resultado encontrado para sua busca personalizada.
+            </div>
+        </div>
+    ),
 };

package/src/results/stories/filter-navbar.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FilterNavbar } from '../filter-navbar';
+
+const meta: Meta<typeof FilterNavbar> = {
+    title: 'Components/Results/FilterNavbar',
+    component: FilterNavbar,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof FilterNavbar>;
+
+export const Basic: Story = {
+    args: {
+        tags: {},
+    },
+};

package/src/results/stories/filter-sidebar.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FilterSidebar } from './index';
+
+const meta: Meta<typeof FilterSidebar> = {
+    title: 'Components/Results/FilterSidebar',
+    component: FilterSidebar,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof FilterSidebar>;
+
+export const Basic: Story = {
+    args: {
+        tags: {},
+        totalItemCount: 0,
+    },
+};

package/src/results/stories/pagination.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from '../pagination';
+
+const meta: Meta<typeof Pagination> = {
+    title: 'Components/Results/Pagination',
+    component: Pagination,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+export const Basic: Story = {
+    args: {
+        pageInfo: {
+            pageNumber: 1,
+            pageSize: 10,
+            totalPages: 5,
+            totalItems: 50,
+        },
+    },
+};

package/src/results/stories/table-with-images.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TableWithImage } from '../table-with-images';
+
+const meta: Meta<typeof TableWithImage> = {
+    title: 'Components/Results/TableWithImage',
+    component: TableWithImage,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof TableWithImage>;
+
+export const Basic: Story = {
+    args: {
+        items: [],
+    },
+};

package/src/results/stories/table.stories.tsx

@@ -13,17 +13,26 @@ const meta: Meta<typeof TableView> = {
 export default meta;
 type Story = StoryObj<typeof TableView>;
 
-const mockItems = [
+const items = [
     {
         id: '1',
         labels: [
             { value: 'Installation Guide', language: 'en-US' },
-            { value: 'Guide d\'installation', language: 'fr-FR' }
+            { value: "Guide d'installation", language: 'fr-FR' }
         ],
         languages: ['fr-FR'],
         type: 'document',
         renditions: [],
-        directoryNodes: []
+        directoryNodes: [],
+        disabled: false,
+        link: '/docs/1',
+        language: 'fr-FR',
+        files: {
+            'application/pdf': {
+                view: '/docs/1/view',
+                download: '/docs/1/download',
+            },
+        },
     },
     {
         id: '2',
@@ -34,7 +43,11 @@ const mockItems = [
         languages: ['es-ES'],
         type: 'document',
         renditions: [],
-        directoryNodes: []
+        directoryNodes: [],
+        disabled: false,
+        link: '/docs/2',
+        language: 'es-ES',
+        files: {},
     },
     {
         id: '3',
@@ -44,12 +57,22 @@ const mockItems = [
         languages: ['en-US'],
         type: 'document',
         renditions: [],
-        directoryNodes: []
-    }
+        directoryNodes: [],
+        disabled: true,
+        link: '/docs/3',
+        language: 'en-US',
+        files: {},
+    },
 ];
 
-export const Default: Story = {
+export const Basic: Story = {
+    args: {
+        items,
+    },
+};
+
+export const WithFilesAndDisabled: Story = {
     args: {
-        items: mockItems as any
-    }
+        items,
+    },
 };

package/src/results/table-with-images.tsx

@@ -1,12 +1,5 @@
 import { FC } from "react";
-import {
-    DocumentModel,
-    ExternalProductGraphicModel,
-    FragmentModel,
-    InformationUnitModel,
-    PackageModel,
-    TopicModel
-} from "@c-rex/interfaces";
+import { CommonItemsModel } from "@c-rex/interfaces";
 import { FileStack } from "lucide-react";
 import { FileDownloadDropdown } from "../renditions/file-download";
 import { cn, getType, getTitle, getVersions } from "@c-rex/utils";
@@ -20,14 +13,7 @@ import { BookmarkButton } from "../favorites/bookmark-button";
 import { HtmlRendition } from "../renditions/html";
 
 interface TableWithImageProps {
-    items: (
-        DocumentModel |
-        ExternalProductGraphicModel |
-        FragmentModel |
-        InformationUnitModel |
-        PackageModel |
-        TopicModel
-    )[];
+    items: CommonItemsModel[];
     query?: string;
     markersList?: Favorite[];
     disabledResults?: ResultTypes[];

package/src/search-input.tsx

@@ -1,24 +1,48 @@
 "use client"
 
-import React, { FC, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { FileCheck, FileX, Search } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
 import { cn } from "@c-rex/utils";
-import { InformationUnitsSuggestions } from "./generated/suggestions";
+import * as AutocompleteOptions from "./generated/suggestions";
 import { useQueryState } from "nuqs";
 
 type PlacedOn = "NAVBAR" | "BODY"
 type Props = {
-    showInput: boolean
     showPkgFilter: boolean
     placedOn?: PlacedOn
+    onSelectPath: string;
+    autocompleteType: keyof typeof AutocompleteOptions;
+    //these two props are only used when showPkgFilter is false and has some values to override the default behavior
+    alternativeAutocompleteType?: keyof typeof AutocompleteOptions;
+    alternativeOnSelectPath?: string;
 }
 
-export const SearchInput: FC<Props> = ({ showInput, showPkgFilter, placedOn = "NAVBAR" }) => {
+
+
+export const SearchInput: FC<Props> = ({
+    showPkgFilter,
+    autocompleteType,
+    onSelectPath,
+    placedOn = "NAVBAR",
+    alternativeAutocompleteType,
+    alternativeOnSelectPath
+}) => {
     const [pkg, setPkg] = useQueryState("package");
     const [checked, setChecked] = useState<boolean>(true);
+    const [autocompleteComponentName, setAutocompleteComponentName] = useState<keyof typeof AutocompleteOptions>(autocompleteType);
+
+    const AutocompleteComponent = AutocompleteOptions[autocompleteComponentName] as FC<any>;
+
+
+    useEffect(() => {
+        if (checked) {
+            setAutocompleteComponentName(autocompleteType);
+        } else if (alternativeAutocompleteType) {
+            setAutocompleteComponentName(alternativeAutocompleteType);
+        }
+    }, [checked]);
 
-    if (!showInput) return null
 
     return (
         <div className={cn(
@@ -27,15 +51,12 @@ export const SearchInput: FC<Props> = ({ showInput, showPkgFilter, placedOn = "N
         )}>
             <Search className="shrink-0 opacity-50" />
 
-            {/*
-                Add scope=pkgID if checked is true
-                */}
-            <InformationUnitsSuggestions
+            {/* Add scope=pkgID if checked is true */}
+            <AutocompleteComponent
                 onSelectParams={
-                    (pkg && checked) ? [{ key: "packages", value: pkg }] : []
-
+                    (pkg && checked && showPkgFilter) ? [{ key: "packages", value: pkg }] : []
                 }
-                onSelectPath="/information-units"
+                onSelectPath={checked ? onSelectPath : alternativeOnSelectPath}
                 embedded
             />
 

package/src/stores/language-store.ts

@@ -1,26 +1,43 @@
 import { LanguageAndCountries } from "@c-rex/interfaces";
 import { create } from "zustand";
+import { persist, createJSONStorage, StateStorage } from "zustand/middleware";
+
+const cookieStorage: StateStorage = {
+    getItem: (name: string): string | null => {
+        if (typeof document === "undefined") return null;
+        const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
+        return match ? decodeURIComponent(match[2] as string) : null;
+    },
+    setItem: (name: string, value: string): void => {
+        if (typeof document === "undefined") return;
+        const maxAge = 60 * 60 * 24 * 365; // 1 year
+        document.cookie = `${name}=${encodeURIComponent(value)};path=/;max-age=${maxAge};SameSite=Lax`;
+    },
+    removeItem: (name: string): void => {
+        if (typeof document === "undefined") return;
+        document.cookie = `${name}=;path=/;max-age=0`;
+    },
+};
 
 type LanguageStoreType = {
-    contentLang: string;
     uiLang: string;
     availableLanguages: LanguageAndCountries[];
-    setContentLang: (v: string) => void;
     setUiLang: (v: string) => void;
     setAvailableLanguages: (list: LanguageAndCountries[]) => void;
 };
 
-export const useLanguageStore = create<LanguageStoreType>((set) => ({
-    contentLang: "",
-    uiLang: "",
-    availableLanguages: [],
-    setContentLang: (v) => {
-        set({ contentLang: v });
-    },
-    setUiLang: (v) => {
-        set({ uiLang: v });
-    },
-    setAvailableLanguages: (list) => {
-        set({ availableLanguages: list });
-    },
-}));
+export const useLanguageStore = create<LanguageStoreType>()(
+    persist((set) => ({
+        uiLang: "",
+        availableLanguages: [],
+        setUiLang: (v) => {
+            set({ uiLang: v });
+        },
+        setAvailableLanguages: (list) => {
+            set({ availableLanguages: list });
+        },
+    }), {
+        name: "c-rex-language-store",
+        storage: createJSONStorage(() => cookieStorage),
+    })
+);

package/src/stores/search-settings-store.ts

@@ -1,23 +1,64 @@
+import { EN_LANG, OPERATOR_OPTIONS, WILD_CARD_OPTIONS } from "@c-rex/constants";
 import { OperatorType, WildCardType } from "@c-rex/types";
 import { create } from "zustand";
-import { persist } from "zustand/middleware";
+import { persist, createJSONStorage, StateStorage } from "zustand/middleware";
 
-type SearchSettingsStore = {
-    language: string[],
+const cookieStorage: StateStorage = {
+    getItem: (name: string): string | null => {
+        if (typeof document === "undefined") return null;
+        const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
+        return match ? decodeURIComponent(match[2] as string) : null;
+    },
+    setItem: (name: string, value: string): void => {
+        if (typeof document === "undefined") return;
+        const maxAge = 60 * 60 * 24 * 365; // 1 year
+        document.cookie = `${name}=${encodeURIComponent(value)};path=/;max-age=${maxAge};SameSite=Lax`;
+    },
+    removeItem: (name: string): void => {
+        if (typeof document === "undefined") return;
+        document.cookie = `${name}=;path=/;max-age=0`;
+    },
+};
+
+export type SearchSettingsState = {
+    language: string,
     wildcard: WildCardType,
     operator: OperatorType,
     like: boolean,
-    updatePreferences: (settings: Partial<Omit<SearchSettingsStore, "updatePreferences">>) => void,
+}
+
+export type SearchSettingsStore = SearchSettingsState & {
+    updatePreferences: (settings: Partial<SearchSettingsState>) => void,
+}
+
+export const defaultSearchSettings: SearchSettingsState = {
+    language: EN_LANG,
+    wildcard: WILD_CARD_OPTIONS.BOTH,
+    operator: OPERATOR_OPTIONS.OR,
+    like: false,
+}
+
+/**
+ * Helper function to read search settings from cookie on the server.
+ * Use this in Server Components with Next.js cookies() function.
+ * @param cookieValue - The raw cookie value from cookies().get("c-rex-search-settings")?.value
+ */
+export function getSearchSettingsFromCookie(cookieValue: string | undefined): SearchSettingsState {
+    if (!cookieValue) return defaultSearchSettings;
+    try {
+        const parsed = JSON.parse(cookieValue);
+        return { ...defaultSearchSettings, ...parsed.state };
+    } catch {
+        return defaultSearchSettings;
+    }
 }
 
 export const useSearchSettingsStore = create<SearchSettingsStore>()(
     persist((set) => ({
-        language: [],
-        wildcard: "BOTH",
-        operator: "OR",
-        like: false,
+        ...defaultSearchSettings,
         updatePreferences: (settings) => set((state) => ({ ...state, ...settings })),
     }), {
         name: "c-rex-search-settings",
+        storage: createJSONStorage(() => cookieStorage),
     })
 );

package/src/stories/autocomplete.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AutoComplete } from '../autocomplete';
+
+const meta: Meta<typeof AutoComplete> = {
+    title: 'Components/AutoComplete',
+    component: AutoComplete,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof AutoComplete>;
+
+export const Basic: Story = {
+    args: {
+        endpoint: '/api/suggestions',
+        onSelectPath: '/',
+    },
+};