@vertesia/ui 0.24.0-dev.202601221707

package/src/features/facets/utils/VTypeFacet.tsx

@@ -0,0 +1,81 @@
+import { FacetBucket } from "@vertesia/common";
+import { FilterGroup } from "@vertesia/ui/core";
+import { TypeRegistry } from "@vertesia/ui/session";
+
+interface VTypeFacetProps {
+    buckets: FacetBucket[];
+    typeRegistry?: TypeRegistry;
+    type?: 'select';
+    multiple?: boolean;
+}
+
+export function VTypeFacet({ buckets, typeRegistry, type = 'select', multiple = false }: VTypeFacetProps) {
+    // Create a map for quick lookups of type names and counts
+    const typeDataMap = new Map();
+    if (!typeRegistry) {
+        console.warn("Type names cannot be resolved");
+    }
+    buckets.forEach((bucket) => {
+        let name;
+        let typeId = bucket._id;
+
+        if (bucket._id == null) {
+            typeId = "Document";
+            name = "Document";
+        } else {
+            name = typeRegistry?.getTypeName(bucket._id);
+            if (!name) {
+                console.warn("Content Object Type not found", bucket._id);
+                name = bucket._id;
+            }
+        }
+
+        typeDataMap.set(typeId, {
+            name,
+            count: bucket.count
+        });
+    });
+
+    const options = buckets.map((bucket) => {
+        const actualId = bucket._id;
+        const displayKey = actualId || "Document";
+        const typeData = typeDataMap.get(displayKey);
+        
+        return {
+            value: actualId,
+            label: typeData ? `${typeData.name} (${typeData.count})` : `Unknown (${bucket.count})`
+        };
+    });
+
+    const customFilterGroups: FilterGroup = {
+        name: 'types',
+        placeholder: 'Types',
+        type: type,
+        multiple: multiple,
+        options: options,
+        labelRenderer: (typeId: string) => {
+            const typeData = typeDataMap.get(typeId);
+            if (!typeData) {
+                console.warn(`Type data not found for ${typeId}`);
+                return typeId;
+            }
+
+            return (
+                <div className="w-full flex items-center">
+                    <span className="text-sm truncate">{typeData.name}</span>
+                    <span className="ml-2 text-xs">({typeData.count})</span>
+                </div>
+            );
+        },
+        filterBy: (optionValue: string, searchText: string) => {
+            const typeData = typeDataMap.get(optionValue);
+            if (!typeData) {
+                console.warn(`Type name not found for ${optionValue}`);
+                return false;
+            }
+            return typeData.name.toLowerCase().includes(searchText.toLowerCase());
+        }
+    };
+
+    return customFilterGroups;
+}

package/src/features/facets/utils/VUserFacet.tsx

@@ -0,0 +1,50 @@
+import { FacetBucket } from '@vertesia/common';
+import { FilterGroup } from '@vertesia/ui/core';
+import { UserInfo } from '../../user/UserInfo';
+
+interface UserFacetProps {
+    buckets: FacetBucket[];
+    name: string;
+    placeholder?: string;
+}
+
+export function createUserFilterGroup({ buckets, name, placeholder }: UserFacetProps): FilterGroup {
+    const options = buckets.map((bucket) => {
+        return {
+            value: bucket._id,
+            label: `(${bucket.count})`
+        };
+    });
+
+    const filterGroup: FilterGroup = {
+        name: name,
+        placeholder: placeholder || `${name.charAt(0).toUpperCase() + name.slice(1)}`,
+        options: options,
+        labelRenderer: (userRef: string) => {
+            const isUnknownUser = userRef === 'Unknown User' || !userRef;
+
+            if (isUnknownUser) {
+                // Find the count for this user from buckets
+                const bucket = buckets.find(b => b._id === userRef);
+                return `Unknown User (${bucket?.count || 0})`;
+            }
+
+            // For known users, render UserInfo with count
+            const bucket = buckets.find(b => b._id === userRef);
+            return (
+                <div className="flex items-center w-full gap-2">
+                    <div className="flex-1 min-w-0 flex items-center truncate">
+                        <UserInfo userRef={userRef} showTitle={true} size="sm" />
+                    </div>
+                    <span className="text-muted-foreground flex-shrink-0">({bucket?.count || 0})</span>
+                </div>
+            );
+        },
+    };
+
+    return filterGroup;
+}
+
+export function VUserFacet({ buckets, name, placeholder }: UserFacetProps) {
+    return createUserFilterGroup({ buckets, name, placeholder });
+}

package/src/features/facets/utils/utils.tsx

@@ -0,0 +1,9 @@
+import { FacetBucket, FacetNameBucket } from '@vertesia/common';
+
+export function facetOptionLabel(bucket: FacetBucket) {
+    return `${bucket._id} (${bucket.count})`;
+}
+
+export function facetOptionNameLabel(bucket: FacetNameBucket) {
+    return `${bucket.name} (${bucket.count})`;
+}

package/src/features/index.ts

@@ -0,0 +1,11 @@
+export * from "./activity-doc/index.js";
+export * from "./agent";
+export * from "./errors/index.js";
+export * from "./facets/index.js";
+export * from "./layout/index.js";
+export * from "./magic-pdf/index.js";
+export * from "./pdf-viewer/index.js";
+export * from "./permissions/index.js";
+export * from "./store/index.js";
+export * from "./user/index.js";
+export * from "./utils/index.js";

package/src/features/layout/GenericPageNavHeader.tsx

@@ -0,0 +1,122 @@
+import clsx from 'clsx';
+import { JSX, ReactNode } from 'react';
+
+import { ChevronRight, Info } from 'lucide-react';
+import { VTooltip, Breadcrumbs } from '@vertesia/ui/core';
+import { capitalize } from 'lodash-es';
+import { useNavigate } from '@vertesia/ui/router';
+
+interface GenericPageNavHeaderProps {
+    title: string | JSX.Element;
+    description?: string | JSX.Element;
+    actions?: ReactNode | ReactNode[];
+    breadcrumbs?: JSX.Element[]
+    isCompact?: boolean
+    children?: ReactNode
+    className?: string
+    useDynamicBreadcrumbs?: boolean;
+}
+
+export function GenericPageNavHeader({ className, children, title, description, actions, breadcrumbs, isCompact = false, useDynamicBreadcrumbs = true }: GenericPageNavHeaderProps) {
+    const navigate = useNavigate();
+
+    function formatTitle(title: string): string {
+        return title
+            .replace(/[-_]/g, ' ')
+            .split(' ')
+            .map(word => capitalize(word))
+            .join(' ');
+    }
+
+    const buildBreadcrumbLabel = (entry: any): string => {
+        const href = entry?.href || '';
+        if (!href) return 'Page';
+        
+        const cleanHref = href.split('#')[0].split('?')[0];
+        const pathSegments: string[] = (cleanHref as string).split('/').filter((segment: string) => segment.length > 0);
+        
+        if (pathSegments.length === 3) {
+            if (entry.title !== document.title && entry.title) {
+                return entry.title;
+            }
+            const secondSegment = pathSegments[1];
+            return `${formatTitle(secondSegment)} Detail (...${pathSegments[2].slice(-6)})`;
+        } else if (pathSegments.length >= 2) {
+            return formatTitle(pathSegments[pathSegments.length - 1]);
+        } else if (pathSegments.length === 1) {
+            return formatTitle(pathSegments[0]);
+        }
+        
+        return 'Page';
+    }
+
+    // Build breadcrumb items from history chain and current breadcrumbs
+    const buildBreadcrumbItems = (): Array<{ label: string, href?: string, onClick?: () => void }> => {
+        const items: Array<{ label: string, href?: string, onClick?: () => void, clearHistory?: boolean }> = [];
+
+        // Add items from history chain
+        if (useDynamicBreadcrumbs && typeof window !== 'undefined' && window.history.state?.historyChain) {
+            const historyChain = window.history.state.historyChain;
+            historyChain.forEach((entry: any, index: number) => {
+                const stepsBack = historyChain.length - index;
+                items.push({
+                    label: buildBreadcrumbLabel(entry),
+                    href: entry.href,
+                    onClick: () => navigate(entry.href, { stepsBack: stepsBack })
+                });
+            });
+        }
+
+        // Add current page breadcrumbs
+        if (breadcrumbs && breadcrumbs.length > 0) {
+            breadcrumbs.forEach((breadcrumb: any) => {
+                // Extract text content from React element
+                const label = typeof breadcrumb?.props?.children === 'string'
+                    ? breadcrumb.props.children
+                    : 'Page';
+
+                items.push(( breadcrumb?.props?.href ) ? {
+                    href: breadcrumb?.props?.href,
+                    label: label,
+                    onClick: () => navigate(breadcrumb.props.href, { replace: breadcrumb.props.clearBreadcrumbs }),
+                } : {
+                    label: label
+                });
+            });
+        }
+
+        return items;
+    };
+
+    const breadcrumbItems = buildBreadcrumbItems();
+
+    return (
+        <div className={clsx(isCompact ? 'pb-0' : 'pb-2', 'p-4 flex flex-col', className)}>
+            <div className='flex items-start gap-4'>
+                <div className="w-full flex place-content-between h-auto min-h-8 flex-col items-start">
+                    <nav className="flex-1 flex justify-start text-xs">
+                        {breadcrumbItems.length > 0 && (
+                            <Breadcrumbs
+                                path={breadcrumbItems}
+                                separator={<ChevronRight className="w-3.5 h-3.5" />}
+                                maxItems={4}
+                            />
+                        )}
+                    </nav>
+                    <div className='flex gap-2 items-center'>
+                        <h1 className="text-xl font-semibold break-all">{title}</h1>
+                        {
+                            description &&
+                            <VTooltip
+                                description={description}>
+                                <Info className="size-4 text-muted" />
+                            </VTooltip>
+                        }
+                    </div>
+                </div>
+                <div className="flex gap-x-2 shrink-0">{actions}</div>
+            </div>
+            {children && <div className="w-full flex items-center">{children}</div>}
+        </div>
+    )
+}

package/src/features/layout/NotFoundView.tsx

@@ -0,0 +1,11 @@
+
+interface NotFoundViewProps {
+}
+export function NotFoundView({ }: NotFoundViewProps) {
+    return (
+        <div className="text-center pt-32">
+            <h1 className="text-3xl font-bold text-red-500">404</h1>
+            <p className="text-2xl">Page Not Found</p>
+        </div>
+    )
+}

package/src/features/layout/index.ts

@@ -0,0 +1,2 @@
+export * from "./GenericPageNavHeader";
+export * from "./NotFoundView";