@vertesia/ui 0.24.0-dev.202601221707

package/src/features/utils/rendition.ts

@@ -0,0 +1,97 @@
+import { isImage, isPdf, isVideo } from "./mimeType.js";
+import { VertesiaClient } from "@vertesia/client";
+import { ContentObjectItem, ImageRenditionFormat } from "@vertesia/common";
+
+//TODO we must use a setting in Env.
+const env = import.meta.env;
+
+const RENDITION_OPTIONS = {
+  max_hw: env?.VITE_RENDITION_HW || 256,
+  format: ImageRenditionFormat.jpeg,
+  generate_if_missing: true,
+};
+
+const RENDITION_ID = "vertesia.content_store.renditionId";
+
+export async function retrieveRendition(
+  client: VertesiaClient,
+  doc: ContentObjectItem,
+  setRenditionUrl: (url: string) => void,
+  setRenditionAlt: (alt: string) => void,
+  setRenditionStatus: (status: string) => void,
+) {
+  if (
+    !doc?.content?.type ||
+    !(
+      isImage(doc.content.type) ||
+      isVideo(doc.content.type) ||
+      isPdf(doc.content.type)
+    )
+  ) {
+    setRenditionStatus("No preview available");
+    return;
+  }
+
+  setRenditionStatus("Preparing preview...");
+  const currentTime = new Date().getTime() / 1000;
+
+  const savedId = localStorage.getItem(
+    `${RENDITION_ID}_${doc.id}_${RENDITION_OPTIONS.max_hw}`,
+  );
+  const elapsedTime = localStorage.getItem(
+    `${RENDITION_ID}_${doc.id}_${RENDITION_OPTIONS.max_hw}_time`,
+  );
+
+  if (
+    savedId?.length &&
+    elapsedTime &&
+    Math.abs(currentTime - parseInt(elapsedTime)) <= 900
+  ) {
+    setRenditionUrl(savedId);
+    setRenditionAlt(`${doc.name} Rendition`);
+    setRenditionStatus("ready");
+    return savedId;
+  }
+
+  setRenditionStatus("Preparing preview...");
+  client.objects.getRendition(doc.id, RENDITION_OPTIONS).then((response) => {
+    if (response.status === "generating") {
+      setRenditionStatus("Preparing preview...");
+      setRenditionUrl("");
+      setRenditionAlt("");
+      setTimeout(() => retrieveRendition(client, doc, setRenditionUrl, setRenditionAlt, setRenditionStatus), 60000);
+    } else if (response.status === "failed") {
+      setRenditionStatus("No preview available");
+      setRenditionUrl("");
+      setRenditionAlt("");
+      return;
+    } else {
+      if (!response?.renditions?.length) {
+        setRenditionStatus("No preview available");
+        setRenditionUrl("");
+        setRenditionAlt("");
+        return;
+      }
+      const rendition = response.renditions[0];
+
+      localStorage.setItem(
+        `${RENDITION_ID}_${doc.id}_${RENDITION_OPTIONS.max_hw}`,
+        rendition,
+      );
+      localStorage.setItem(
+        `${RENDITION_ID}_${doc.id}_${RENDITION_OPTIONS.max_hw}_time`,
+        (new Date().getTime() / 1000).toString(),
+      );
+      setRenditionUrl(rendition);
+      setRenditionAlt(`${doc.name} Rendition`);
+      setRenditionStatus("ready");
+      console.log(`Rendition for document ${doc.id} retrieved successfully: ${rendition}`);
+    }
+  }).catch((error) => {
+
+    setRenditionStatus("No preview available");
+    console.warn("Failed to retrieve rendition:", error);
+    setRenditionUrl("");
+    setRenditionAlt("");
+  });
+}

package/src/features/utils/text.ts

@@ -0,0 +1,10 @@
+export function shortId(id: string, length: number = 7) {
+    if (!id) {
+        return "";
+    }
+    return "~" + id.slice(-length);
+}
+
+export function shortenString(str: string, length: number) {
+    return str.length > length ? str.substring(0, length) + '...' : str;
+}

package/src/features/utils/workflowStatus.ts

@@ -0,0 +1,44 @@
+import { WorkflowExecutionStatus } from "@vertesia/common";
+
+/**
+ * Get the semantic color class for a workflow execution status.
+ */
+export function getWorkflowStatusColor(status?: WorkflowExecutionStatus): string {
+    switch (status) {
+        case WorkflowExecutionStatus.RUNNING:
+            return "text-info";
+        case WorkflowExecutionStatus.COMPLETED:
+            return "text-success";
+        case WorkflowExecutionStatus.FAILED:
+            return "text-destructive";
+        case WorkflowExecutionStatus.TERMINATED:
+        case WorkflowExecutionStatus.CANCELED:
+            return "text-attention";
+        default:
+            return "text-muted";
+    }
+}
+
+/**
+ * Get a human-readable name for a workflow execution status.
+ */
+export function getWorkflowStatusName(status?: WorkflowExecutionStatus): string {
+    switch (status) {
+        case WorkflowExecutionStatus.RUNNING:
+            return "Running";
+        case WorkflowExecutionStatus.COMPLETED:
+            return "Completed";
+        case WorkflowExecutionStatus.FAILED:
+            return "Failed";
+        case WorkflowExecutionStatus.CONTINUED_AS_NEW:
+            return "Continued As New";
+        case WorkflowExecutionStatus.TERMINATED:
+            return "Terminated";
+        case WorkflowExecutionStatus.TIMED_OUT:
+            return "Timed Out";
+        case WorkflowExecutionStatus.CANCELED:
+            return "Canceled";
+        default:
+            return "Unknown";
+    }
+}

package/src/layout/AppLayout.tsx

@@ -0,0 +1,132 @@
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
+import { X } from 'lucide-react'
+import clsx from 'clsx'
+import { Fragment, useEffect, useState } from 'react'
+// import { FullHeightLayout } from './FullHeightLayout.js'
+import { Navbar } from './Navbar.js'
+import { Sidebar } from './Sidebar.js'
+import { SidebarContext } from './SidebarContext.js'
+
+interface AppLayoutProps {
+    title?: string;
+    children: React.ReactNode | React.ReactNode[]
+    logo?: React.ReactNode
+    navbar?: React.ReactNode | React.ReactNode[]
+    sidebar?: React.ReactNode | React.ReactNode[]
+    mainNav?: React.ReactNode
+    className?: string // will be forwarded to the main page element
+    sidebarClassName?: string // will be forwarded to the sidebar element
+}
+export function AppLayout({ sidebarClassName, className, title, children, logo, navbar, sidebar, mainNav }: AppLayoutProps) {
+
+    if (localStorage.getItem('desktopSidebarOpen') === null) {
+        localStorage.setItem('desktopSidebarOpen', 'true');
+    }
+
+    const [sidebarOpen, setSidebarOpen] = useState(false)
+    const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(localStorage.getItem('desktopSidebarOpen') === 'true')
+    const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth >= 1024)
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsLargeScreen(window.innerWidth >= 1024)
+        }
+
+        window.addEventListener('resize', handleResize)
+        return () => window.removeEventListener('resize', handleResize)
+    }, [])
+
+    const sidebarContextValue = {
+        isOpen: isLargeScreen ? desktopSidebarOpen : sidebarOpen,
+        toggleDesktop: (value?: boolean) => {
+            if (value === undefined) {
+                setDesktopSidebarOpen(!desktopSidebarOpen)
+            } else {
+                setDesktopSidebarOpen(value)
+            }
+            localStorage.setItem('desktopSidebarOpen', JSON.stringify(!desktopSidebarOpen))
+        },
+        toggleMobile: (value?: boolean) => {
+            if (value === undefined) {
+                setSidebarOpen(!sidebarOpen)
+            } else {
+                setSidebarOpen(value)
+            }
+        },
+    }
+
+    return (
+        <>
+            <div className='flex flex-col h-screen overflow-y-hidden'>
+
+                <SidebarContext.Provider value={sidebarContextValue}>
+                    <div className='w-full'>
+                        {mainNav}
+                    </div>
+
+                    <div className='flex h-full overflow-y-auto w-full'>
+
+                        <Transition show={sidebarOpen} as={Fragment}>
+                            <Dialog as="div" className="relative z-50 lg:hidden" onClose={setSidebarOpen}>
+                                {/* Backdrop layer for the semi-transparent */}
+                                <TransitionChild
+                                    as={Fragment}
+                                    enter="transition-opacity ease-linear duration-300"
+                                    enterFrom="opacity-0"
+                                    enterTo="opacity-100"
+                                    leave="transition-opacity ease-linear duration-300"
+                                    leaveFrom="opacity-100"
+                                    leaveTo="opacity-0"
+                                >
+                                    <div className="fixed inset-0 bg-gray-900/80" />
+                                </TransitionChild>
+
+                                <div className="fixed inset-0 flex">
+                                    <TransitionChild
+                                        as={Fragment}
+                                        enter="transition ease-in-out duration-300 transform"
+                                        enterFrom="-translate-x-full"
+                                        enterTo="translate-x-0"
+                                        leave="transition ease-in-out duration-300 transform"
+                                        leaveFrom="translate-x-0"
+                                        leaveTo="-translate-x-full"
+                                    >
+                                        <DialogPanel className="relative flex w-full max-w-xs flex-1">
+                                            {/* Sidebar component, swap this element with another sidebar if you like */}
+                                            <Sidebar logo={logo} className={sidebarClassName}>{sidebar}</Sidebar>
+
+                                            {/* close button */}
+                                            <div className="flex w-16 justify-center pt-5 items-start">
+                                                <button type="button" className="-m-2.5 p-2.5" onClick={() => setSidebarOpen(false)}>
+                                                    <span className="sr-only">Close sidebar</span>
+                                                    <X className="size-6 text-white" aria-hidden="true" />
+                                                </button>
+                                            </div>
+                                        </DialogPanel>
+                                    </TransitionChild>
+                                </div>
+                            </Dialog>
+                        </Transition>
+
+                        {/* Static sidebar for desktop */}
+                        <div className={`hidden lg:block relative transition-all duration-300 ${desktopSidebarOpen ? 'w-72' : 'w-12'}`}>
+                            {/* Sidebar component, swap this element with another sidebar if you like */}
+                            <Sidebar logo={logo} className={sidebarClassName}>{sidebar}</Sidebar>
+                        </div>
+
+                        <div className="w-full h-full overflow-y-hidden">
+                            {navbar ? (
+                                <Navbar title={title} logo={logo}>
+                                    {navbar}
+                                </Navbar>
+                            ) : null}
+                            <main className={clsx("flex-1 h-full w-full relative flex flex-col", className)}>
+                                {children}
+                            </main>
+                        </div>
+                    </div>
+                </SidebarContext.Provider>
+            </div>
+        </>
+    )
+}

package/src/layout/FullHeightLayout.tsx

@@ -0,0 +1,74 @@
+import clsx from 'clsx';
+import React from 'react';
+
+interface FlexibleHeightLayoutProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export function FullHeightLayout({ className, children }: FlexibleHeightLayoutProps) {
+    return (
+        <div
+            className={clsx(
+                "flex flex-col",
+                "h-full",
+                "overflow-y-auto",
+                "px-2",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+interface FixedProps {
+    children: React.ReactNode;
+    heightClass: string;
+    className?: string;
+}
+FullHeightLayout.Fixed = function Fixed({ heightClass, className, children }: FixedProps) {
+    return (
+        <div
+            className={clsx(
+                "w-full",
+                heightClass,
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+interface BodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+FullHeightLayout.Body = function Body({ className, children }: BodyProps) {
+    return (
+        <div
+            className={clsx(
+                "grow overflow-auto",
+                "min-h-0",
+                "p-2",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+interface VDividerProps { }
+FullHeightLayout.VR = function VDivider({ }: VDividerProps) {
+    return (
+        <div className="w-[1px] border border-red-200"></div>
+    );
+}
+
+interface HDividerProps { }
+FullHeightLayout.HR = function HDivider({ }: HDividerProps) {
+    return (
+        <div className="w-full h-1 border-b border-red-200"></div>
+    );
+}

package/src/layout/Navbar.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { Menu, Search } from 'lucide-react'
+import { Button, HeroIcon } from '@vertesia/ui/core'
+import { useSidebarToggle } from './SidebarContext.js'
+import { TitleBar } from './TitleBar.js'
+
+interface NavbarProps {
+    title?: string
+    onSearch?: (query: string) => void
+    logo?: React.ReactNode
+    children: React.ReactNode | React.ReactNode[]
+}
+export function Navbar({ children, logo, onSearch, title }: NavbarProps) {
+    return (
+        <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b px-4 shadow-2xs sm:gap-x-6 sm:px-6 lg:px-8">
+            <HamburgerButton />
+
+            <div className="lg:hidden">{logo}</div>
+
+            {/* Separator shown only if search is displayed in mobile */}
+            {onSearch && <NavbarSeparator visible='mobile' />}
+
+            <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+                <TitleBar title={title} />
+                {onSearch && <SearchBox onSearch={onSearch} />}
+
+                <div className="flex items-center gap-x-4 lg:gap-x-6 ml-auto">
+                    {children}
+                </div>
+            </div>
+        </div>
+
+    )
+}
+
+
+interface SearchBoxProps {
+    onSearch?: (query: string) => void
+}
+function SearchBox({ }: SearchBoxProps) {
+    return (
+        <form className="relative flex flex-1" action="#" method="GET">
+            <label htmlFor="search-field" className="sr-only">
+                Search
+            </label>
+            <Search
+                className="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
+                aria-hidden="true"
+            />
+            <input
+                id="search-field"
+                className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
+                placeholder="Search..."
+                type="search"
+                name="search"
+            />
+        </form>
+    )
+}
+
+
+export function HamburgerButton() {
+    const { toggleDesktop, toggleMobile } = useSidebarToggle();
+    const toggle = () => {
+        if (window.innerWidth < 1024) {
+            toggleMobile();
+        } else {
+            toggleDesktop();
+        }
+    }
+    return (
+        <>
+            <Button variant='ghost' size='icon' onClick={() => toggle()} //alt='sidebar toggle'
+                className="p-2 rounded-full transition-colors w-full text-center ">
+                <Menu aria-hidden="true" size={24} />
+            </Button>
+        </>
+    )
+}
+
+
+interface NavbarSeparatorProps {
+    visible?: "mobile" | "desktop"
+}
+export function NavbarSeparator({ visible }: NavbarSeparatorProps) {
+    let visibility = "";
+    if (visible) {
+        visibility = visible === "mobile" ? "lg:hidden" : "hidden lg:block"
+    }
+    return (
+        <div className={`h-6 w-px bg-gray-900/10 dark:bg-slate-900/0.1 ${visibility}`} aria-hidden="true" />
+    )
+}
+
+interface NavbarIconButtonProps {
+    title: string,
+    icon: HeroIcon,
+    onClick?: (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export function NavbarIconButton({ title, icon: Icon, onClick }: NavbarIconButtonProps) {
+    return (
+        <button type="button" className="-m-2.5 p-2.5 text-gray-400 dark:text-slate-50 hover:text-gray-500" onClick={onClick}>
+            <span className="sr-only">{title}</span>
+            <Icon className="size-6" aria-hidden="true" title={title} />
+        </button>
+    )
+}
+
+interface NavbarButtonProps {
+    children: React.ReactNode | React.ReactNode[]
+    onClick?: (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export function NavbarButton({ children, onClick }: NavbarButtonProps) {
+    return (
+        <Button onClick={onClick}>{children}</Button>
+    )
+}
+interface NavbarLinkProps {
+    href: string
+    children: React.ReactNode | React.ReactNode[]
+    onClick?: (ev: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+}
+export function NavbarLink({ href, onClick, children }: NavbarLinkProps) {
+    return (
+        <a className="dark:text-slate-50" href={href} onClick={onClick}>{children}</a>
+    )
+}

package/src/layout/Sidebar.tsx

@@ -0,0 +1,139 @@
+import clsx from 'clsx';
+import { useSidebarToggle } from './SidebarContext';
+import { Dot } from 'lucide-react';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@vertesia/ui/core';
+import { Nav } from "@vertesia/ui/router";
+
+
+interface SidebarProps {
+    children: React.ReactNode | React.ReactNode[]
+    logo?: React.ReactNode
+    className?: string
+}
+
+export function Sidebar({ children, logo, className }: SidebarProps) {
+    return (
+        <div className={clsx(className || "bg-indigo-600 dark:bg-indigo-950",
+            "flex flex-col h-full"
+        )}>
+            {logo &&
+                <div className="-mx-2 flex h-auto my-4 shrink-0 self-start">
+                    {logo}
+                </div>
+            }
+            <div className="flex-1 min-h-0 overflow-hidden px-2">
+                <nav className="h-full flex flex-col">
+                    <ul role="list" className="flex flex-col gap-y-2 overflow-y-auto h-full">
+                        {children}
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    )
+}
+
+interface SidebarSectionProps {
+    children: React.ReactNode | React.ReactNode[]
+    title?: React.ReactNode
+    action?: React.ReactNode
+    isFooter?: boolean
+}
+export function SidebarSection({ children, title, action, isFooter = false }: SidebarSectionProps) {
+    const { isOpen } = useSidebarToggle();
+
+    let header = isOpen ? <>
+        {title || ""}
+        {action}
+    </> : <Dot className='size-6' />
+
+    return (
+        <li className={isFooter ? 'mt-auto' : ''}>
+            {title && <div className="text-xs font-medium h-8 flex items-center gap-x-2 px-2 text-sidebar-foreground/70">
+                {header}
+            </div>}
+            <ul data-sidebar="menu" className="flex w-full min-w-0 flex-col gap-1">
+                {children}
+            </ul>
+        </li>
+    )
+}
+
+export function SidebarTooltip({ children, text }: { children: React.ReactNode, text?: string }) {
+    const { isOpen } = useSidebarToggle();
+    return (
+        isOpen ? <>{children}</> :
+            <TooltipProvider>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        {children}
+                    </TooltipTrigger>
+                    <TooltipContent side='right'>
+                        {text}
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+    )
+}
+
+export interface SidebarItemProps {
+    href: string
+    icon?: React.ComponentType<React.HTMLAttributes<Element>>
+    current?: boolean
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
+    children: React.ReactNode | React.ReactNode[]
+    tools?: React.ReactNode
+    className?: string;
+    id?: string; //HTML ID of the element
+    external?: boolean; //If true, the link will open in a new tab
+}
+export function SidebarItem({ external, className, tools, children, icon: Icon, href, current, onClick }: SidebarItemProps) {
+    const { toggleMobile } = useSidebarToggle();
+    const _closeSideBar = () => {
+        setTimeout(() => {
+            toggleMobile(false)
+        }, 100);
+    }
+    const onClickWrapper = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        if (external) {
+            window.open(href, '_blank');
+            event.preventDefault(); // Prevent default link behavior
+            event.stopPropagation(); // Stop the event from propagating
+        } else if (onClick) {
+            onClick(event);
+        }
+    }
+    return (
+        <li>
+            <Nav onClick={_closeSideBar}>
+                <SidebarTooltip text={children as string}>
+                    <a
+                        href={href}
+                        onClick={onClickWrapper}
+                        className={clsx(
+                            current
+                                ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                                : 'text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent',
+                            'group flex gap-x-3 rounded-md px-2 py-1.5 text-sm items-center h-8',
+                            className
+                        )}
+                    >
+                        {Icon &&
+                            <Icon
+                                className={clsx(
+                                    current
+                                        ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                                        : 'text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent',
+                                    'size-4 shrink-0'
+                                )}
+                                aria-hidden="true"
+                            />
+                        }
+                        {children}
+                        {tools && <div className='flex items-center ml-auto'>{tools}</div>}
+                    </a>
+                </SidebarTooltip>
+            </Nav>
+        </li>
+
+    )
+}

package/src/layout/SidebarContext.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+interface SidebarContextType {
+    isOpen: boolean;
+    toggleMobile: (isOpen?: boolean) => void;
+    toggleDesktop: (isOpen?: boolean) => void;
+}
+
+export const SidebarContext = createContext<SidebarContextType>({
+    isOpen: false,
+    toggleMobile: () => void 0,
+    toggleDesktop: () => void 0,
+});
+
+export function useSidebarToggle() {
+    return useContext(SidebarContext);
+}

package/src/layout/TitleBar.tsx

@@ -0,0 +1,7 @@
+
+interface TitleBarProps {
+    title?: string;
+}
+export function TitleBar({ title }: TitleBarProps) {
+    return <div className='self-center text-lg font-semibold'>{title}</div>
+}

package/src/layout/index.ts

@@ -0,0 +1,6 @@
+export * from "./FullHeightLayout.js";
+export * from "./AppLayout.js";
+export * from "./Navbar.js";
+export * from "./Sidebar.js";
+export * from "./SidebarContext.js";
+export * from "./TitleBar.js";

package/src/router/FixLinks.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from "react";
+import { BASE_PATH } from "./HistoryNavigator";
+
+interface FixLinksProps {
+    basePath: string;
+    children: React.ReactNode | React.ReactNode[];
+}
+export function FixLinks({ basePath, children }: FixLinksProps) {
+    const ref = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        if (ref.current) {
+            const divElem = ref.current;
+            const listener = (ev: MouseEvent) => {
+                const elem = ev.target as HTMLElement;
+                if (elem.tagName.toLowerCase() === 'a') {
+                    (ev as any)[BASE_PATH] = basePath;
+                }
+            }
+            divElem.addEventListener('click', listener);
+            return () => {
+                divElem.removeEventListener('click', listener);
+            }
+        }
+    }, [ref.current]);
+    return (
+        <div ref={ref} className="h-full w-full">{children}</div>
+    )
+}