@vertesia/ui 0.56.0 → 0.57.0

package/src/features/permissions/UserPermissionsProvider.tsx

@@ -0,0 +1,102 @@
+import { Permission, ProjectRoles } from "@vertesia/common"
+import { ErrorBox, useFetch } from "@vertesia/ui/core"
+import { UserSession, useUserSession } from "@vertesia/ui/session"
+import { createContext, useContext, useMemo } from "react"
+import { isAnyOf } from "./helpers"
+
+type ListRolesResponse = {
+    name: ProjectRoles,
+    permissions: Permission[]
+}[];
+
+export class UserPermissions {
+    system_roles: ListRolesResponse; // all roles defined in the system
+    roles: Set<string>; // all roles of the current user
+    permissions: Set<string>; // all permissions of the current user
+
+    constructor(session: UserSession, roles: ListRolesResponse) {
+        if (!session.authToken) {
+            throw new Error('No auth token found in user session')
+        }
+        this.system_roles = roles;
+        const userRoles = new Set<string>(session.authToken.account_roles || []);
+        if (session.authToken.project_roles) {
+            for (const role of session.authToken.project_roles) {
+                userRoles.add(role);
+            }
+        }
+        this.roles = userRoles;
+        // build a temporary role to permissions map
+        const map: Record<string, Permission[]> = {};
+        for (const role of roles) {
+            map[role.name] = role.permissions;
+        }
+        const permissions = new Set<string>();
+        for (const role of userRoles) {
+            const rolePermissions = map[role];
+            if (rolePermissions) {
+                for (const permission of rolePermissions) {
+                    permissions.add(permission);
+                }
+            }
+        }
+        this.permissions = permissions;
+    }
+
+
+    hasPermission(permission: string | string[]) {
+        if (typeof permission === 'string') {
+            return this.permissions.has(permission);
+        } else if (isAnyOf(permission as Permission[])) {
+            return permission.some(p => this.permissions.has(p));
+        } else { // all of
+            for (const p of permission) {
+                if (!this.permissions.has(p)) {
+                    return false;
+                }
+            }
+            return true;
+        }
+    }
+
+}
+
+const UserPermissionsContext = createContext<UserPermissions | undefined>(undefined)
+
+export function useUserPermissions() {
+    const perms = useContext(UserPermissionsContext);
+    if (!perms) {
+        throw new Error('UserPermissionContext cannot be used outside UserPermissionProvider')
+    }
+    return perms;
+}
+
+interface UserPermissionProviderProps {
+    children: React.ReactNode
+}
+export function UserPermissionProvider({ children }: UserPermissionProviderProps) {
+    const session = useUserSession();
+    const { data, error, isLoading } = useFetch<ListRolesResponse | undefined>(() => {
+        if (session.user) {
+            return session.client.iam.roles.list();
+        } else {
+            return Promise.resolve(undefined);
+        }
+    }, [session.user]);
+
+    const perms = useMemo(() => {
+        if (session.authToken && data && !isLoading) {
+            return new UserPermissions(session, data);
+        } else {
+            return undefined;
+        }
+    }, [session, data, isLoading]);
+
+    if (error) {
+        return <ErrorBox title="Failed to fetch role mappings">{error.message}</ErrorBox>
+    }
+
+    return perms && (
+        <UserPermissionsContext.Provider value={perms}>{children}</UserPermissionsContext.Provider>
+    )
+}

package/src/features/permissions/helpers.ts

@@ -0,0 +1,16 @@
+import { Permission } from "@vertesia/common";
+
+
+export function AnyOf(...permissions: Permission[]): Permission[] {
+    const p = Array.from(permissions);
+    (p as any).__AnyOf__ = true;
+    return p;
+}
+
+export function AllOf(...permissions: Permission[]): Permission[] {
+    return Array.from(permissions);
+}
+
+export function isAnyOf(permissions: Permission[]) {
+    return (permissions as any).__AnyOf__ === true;
+}

package/src/features/permissions/index.ts

@@ -0,0 +1,4 @@
+export * from "./SecureButton";
+export * from "./SecureSidebarItem";
+export * from "./UserPermissionsProvider";
+export * from "./helpers";

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.ReactElement | undefined | null) | (React.ReactElement | undefined | null)[];
+    className?: string;
+}
+export function FullHeightLayout({ className, children }: FlexibleHeightLayoutProps) {
+    return (
+        <div
+            className={clsx(
+                "flex flex-col",
+                "h-full",
+                "overflow-y-auto",
+                // "dark:bg-slate-900 text-slate-950 dark:text-slate-200",
+                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-4",
+                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,129 @@
+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
+}
+export function SidebarItem({ className, tools, children, icon: Icon, href, current, onClick }: SidebarItemProps) {
+    const { toggleMobile } = useSidebarToggle();
+    const _closeSideBar = () => {
+        setTimeout(() => {
+            toggleMobile(false)
+        }, 100);
+    }
+    return (
+        <li>
+            <Nav onClick={_closeSideBar}>
+                <SidebarTooltip text={children as string}>
+                    <a
+                        href={href}
+                        onClick={onClick}
+                        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>
+    )
+}