@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/module-menubar.tsx

@@ -0,0 +1,300 @@
+import {
+    Menubar,
+    MenubarContent,
+    MenubarItem,
+    MenubarMenu,
+    MenubarSeparator,
+    MenubarSub,
+    MenubarSubContent,
+    MenubarSubTrigger,
+    MenubarTrigger
+} from "./ui/menubar";
+import {
+    ModuleDeclarationInterface,
+    ModuleNavigationMenuItem,
+    ModuleNavigationMenuSeparator
+} from "../domain/entities/module.interface";
+import {LucideIcon} from "./icons/lucide";
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger
+} from "./ui/sheet";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger
+} from "./ui/accordion";
+import {Button} from "./ui/button";
+import {MenuIcon} from "lucide-react";
+import {useState} from "react";
+import {useRouter, usePathname} from "next/navigation";
+import {AppRouterInstance} from "next/dist/shared/lib/app-router-context.shared-runtime";
+import {cn} from "../infrastructure/utilities/utils";
+import {NavigationMenuSize} from "./themes/katon/header-menubar";
+
+const sizeMap: Record<NavigationMenuSize, { trigger: string; item: string; icon: number; mobileItem: string }> = {
+    xs:  { trigger: "text-xs h-7 px-1.5 py-0",     item: "text-xs px-2 py-1",     icon: 3,  mobileItem: "text-xs h-8" },
+    sm:  { trigger: "text-xs h-8 px-2 py-0",    item: "text-xs px-2.5 py-1.5", icon: 3,  mobileItem: "text-sm h-9" },
+    md:  { trigger: "text-sm h-9 px-2.5 py-0",       item: "text-sm px-3 py-1.5",   icon: 4,  mobileItem: "text-sm h-10" },
+    lg:  { trigger: "text-sm h-10 px-3.5 py-0",       item: "text-sm px-3.5 py-2",   icon: 4,  mobileItem: "text-base h-11" },
+    xl:  { trigger: "text-base h-11 px-4.5 py-0",     item: "text-base px-4 py-2",   icon: 5,  mobileItem: "text-base h-12" },
+    xxl: { trigger: "text-lg h-12 px-5 py-0",       item: "text-lg px-5 py-2.5",   icon: 5,  mobileItem: "text-lg h-14" },
+};
+
+const activeClasses = {
+    desktop: "cursor-pointer",
+    mobileAccordion: "text-primary",
+    mobileButton: "secondary" as const,
+};
+
+export interface ModuleMenubarProps {
+    module: ModuleDeclarationInterface;
+    size?: NavigationMenuSize;
+}
+
+export function ModuleMenubar({module, size = 'md'}: ModuleMenubarProps) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const [open, setOpen] = useState(false);
+    const s = sizeMap[size];
+
+    if (!module.menu) {
+        return null;
+    }
+
+    const isItemActive = (item: ModuleNavigationMenuItem): boolean => {
+        if (item.url && pathname === item.url) {
+            return true;
+        }
+        if (item.items) {
+            return item.items.some((subItem) => {
+                if ('separator' in subItem) return false;
+                return isItemActive(subItem as ModuleNavigationMenuItem);
+            });
+        }
+        return false;
+    };
+
+    const handleItemAction = (item: ModuleNavigationMenuItem) => {
+        if (item.action) {
+            if (item.action.length > 0) {
+                (item.action as (router: AppRouterInstance) => void)(router);
+            } else {
+                void (item.action as () => void)();
+            }
+        } else if (item.url) {
+            router.push(item.url);
+        }
+    };
+
+    const renderItems = (items: (ModuleNavigationMenuItem | ModuleNavigationMenuSeparator)[]) => {
+        return items.map((item, index) => {
+            if ('separator' in item) {
+                return <MenubarSeparator key={`sep-${index}`}/>;
+            }
+
+            const itemWithItems = item as ModuleNavigationMenuItem;
+            const active = isItemActive(itemWithItems);
+
+            if (itemWithItems.items && itemWithItems.items.length > 0) {
+                return (
+                    <MenubarSub key={itemWithItems.label}>
+                        <MenubarSubTrigger className={cn(
+                            "gap-2 rounded-sm",
+                            s.item,
+                            active && activeClasses.desktop,
+                            active && 'hover:bg-transparent hover:text-foreground'
+                        )}>
+                            {itemWithItems.icon && <LucideIcon name={itemWithItems.icon} size={s.icon} className=""/>}
+                            <span>{itemWithItems.label}</span>
+                            {itemWithItems.items && itemWithItems.items.length > 0 && (
+                                <LucideIcon name="chevron-down" size={s.icon - 1} className="ml-1 h-4 w-4" />
+                            )}
+                        </MenubarSubTrigger>
+                        <MenubarSubContent>
+                            {renderItems(itemWithItems.items)}
+                        </MenubarSubContent>
+                    </MenubarSub>
+                );
+            }
+
+            return (
+                <MenubarItem
+                    key={itemWithItems.label}
+                    onClick={() => handleItemAction(itemWithItems)}
+                    className={cn(
+                        "gap-2 rounded-sm",
+                        s.item,
+                        active && activeClasses.desktop,
+                        active && 'hover:bg-transparent hover:text-foreground'
+                    )}
+                >
+                    {itemWithItems.icon && <LucideIcon name={itemWithItems.icon} size={s.icon} className=""/>}
+                    <span>{itemWithItems.label}</span>
+                    {itemWithItems.items && itemWithItems.items.length > 0 && (
+                        <LucideIcon name="chevron-down" size={s.icon - 1} className="ml-1 h-4 w-4" />
+                    )}
+                </MenubarItem>
+            );
+        });
+    };
+
+    const renderMobileItems = (items: (ModuleNavigationMenuItem | ModuleNavigationMenuSeparator)[]) => {
+        return items.map((item, index) => {
+            if ('separator' in item) {
+                return <div key={`sep-${index}`} className="my-2 border-b border-border/50"/>
+            }
+
+            const itemWithItems = item as ModuleNavigationMenuItem;
+            const active = isItemActive(itemWithItems);
+
+            if (itemWithItems.items && itemWithItems.items.length > 0) {
+                return (
+                    <AccordionItem key={itemWithItems.label} value={itemWithItems.label} className="border-none">
+                        <AccordionTrigger className={cn(
+                            "py-2 rounded-sm hover:no-underline",
+                            s.mobileItem,
+                            active && activeClasses.mobileAccordion
+                        )}>
+                            <div className="flex items-center gap-2">
+                                {itemWithItems.icon && <LucideIcon name={itemWithItems.icon} size={s.icon}/>}
+                                <span>{itemWithItems.label}</span>
+                                {itemWithItems.items && itemWithItems.items.length > 0 && (
+                                    <LucideIcon name="chevron-down" size={s.icon - 1} className="ml-1 h-4 w-4" />
+                                )}
+                            </div>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                            <div className="pl-4 flex flex-col gap-1 border-l ml-2">
+                                {renderMobileItems(itemWithItems.items)}
+                            </div>
+                        </AccordionContent>
+                    </AccordionItem>
+                );
+            }
+
+            return (
+                <Button
+                    key={itemWithItems.label}
+                    variant={active ? activeClasses.mobileButton : "ghost"}
+                    className={cn("w-full justify-start gap-2 px-2 font-semibold border-b", s.mobileItem)}
+                    onClick={() => {
+                        handleItemAction(itemWithItems);
+                        setOpen(false);
+                    }}
+                >
+                    {itemWithItems.icon && <LucideIcon name={itemWithItems.icon} size={s.icon}/>}
+                    <span>{itemWithItems.label}</span>
+                    {itemWithItems.items && itemWithItems.items.length > 0 && (
+                        <LucideIcon name="chevron-down" size={s.icon - 1} className="ml-1 h-4 w-4" />
+                    )}
+                </Button>
+            );
+        });
+    };
+
+    return (
+        <>
+            <Menubar className="hidden md:flex border-none shadow-none bg-transparent px-1.5 animate-slide-in-down duration-150">
+                {module.menu.items.map((menu, index) => {
+                    const active = isItemActive(menu);
+                    return (
+                        <MenubarMenu key={menu.label || index}>
+                            <MenubarTrigger
+                                className={cn(
+                                    "gap-2 rounded-sm",
+                                    s.trigger,
+                                    active && activeClasses.desktop,
+                                    active && 'hover:bg-transparent hover:text-foreground'
+                                )}
+                                {...(!menu.items?.length && menu.url ? {onClick: () => router.push(menu.url!)} : {})}
+                            >
+                                {menu.icon && <LucideIcon name={menu.icon} size={s.icon}/>}
+                                {menu.label}
+                                {menu.items && menu.items.length > 0 && (
+                                    <LucideIcon name="chevron-down" size={s.icon - 1} className="ml-1 h-4 w-4" />
+                                )}
+                            </MenubarTrigger>
+                            {menu.items && menu.items.length > 0 && (
+                                <MenubarContent className={"rounded-sm!"}>
+                                    {renderItems(menu.items)}
+                                </MenubarContent>
+                            )}
+                        </MenubarMenu>
+                    );
+                })}
+            </Menubar>
+
+            <Sheet open={open} onOpenChange={setOpen}>
+                <SheetTrigger asChild>
+                    <Button variant="ghost" size="icon-sm" className="md:hidden">
+                        <MenuIcon/>
+                    </Button>
+                </SheetTrigger>
+                <SheetContent side="left"
+                              className="w-[300px]! rounded-sm m-3 h-[92dvh]! px-6 bg-background/70 backdrop-blur-lg">
+                    <SheetHeader className="pb-4">
+                        <SheetTitle className="flex items-center gap-2">
+                            <LucideIcon name={module.icon} size={5}/>
+                            {module.name}
+                        </SheetTitle>
+                    </SheetHeader>
+                    <div className="py-4 overflow-y-auto max-h-[calc(100vh-80px)]">
+                        <Accordion type="multiple" className="w-full">
+                            {module.menu.items.map((menu, index) => {
+                                const active = isItemActive(menu);
+                                if (menu.items && menu.items.length > 0) {
+                                    return (
+                                        <AccordionItem key={menu.label || index} value={menu.label || `item-${index}`}
+                                                   className="border-b">
+                                            <AccordionTrigger className={cn(
+                                                "font-semibold hover:no-underline",
+                                                s.mobileItem,
+                                                active && activeClasses.mobileAccordion
+                                            )}>
+                                                <div className="flex items-center gap-2">
+                                                    {menu.icon && <LucideIcon name={menu.icon} size={s.icon}/>}
+                                                    <span>{menu.label}</span>
+                                                    {menu.items && menu.items.length > 0 && (
+                                                        <LucideIcon name="chevron-down" size={s.icon - 1} className="ml-1 h-4 w-4" />
+                                                    )}
+                                                </div>
+                                            </AccordionTrigger>
+                                            <AccordionContent>
+                                                <div className="flex flex-col gap-1 py-1">
+                                                    {renderMobileItems(menu.items)}
+                                                </div>
+                                            </AccordionContent>
+                                        </AccordionItem>
+                                    );
+                                }
+
+                                return (
+                                    <Button
+                                        key={menu.label || index}
+                                        variant={active ? activeClasses.mobileButton : "ghost"}
+                                        className={cn("w-full justify-start gap-2 px-0 font-semibold border-b rounded-sm", s.mobileItem)}
+                                        onClick={() => {
+                                            handleItemAction(menu);
+                                            setOpen(false);
+                                        }}
+                                    >
+                                        {menu.icon && <LucideIcon name={menu.icon} size={s.icon}/>}
+                                        <span>{menu.label}</span>
+                                        {menu.items && menu.items.length > 0 && (
+                                            <LucideIcon name="chevron-down" size={s.icon - 1} className="ml-1 h-4 w-4" />
+                                        )}
+                                    </Button>
+                                );
+                            })}
+                        </Accordion>
+                    </div>
+                </SheetContent>
+            </Sheet>
+        </>
+    )
+}

package/src/presentation/module-widget.tsx

@@ -0,0 +1,233 @@
+"use client"
+
+import * as React from "react"
+import {ReactNode} from "react"
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+    CardFooter,
+    CardAction
+} from "./ui/card"
+import {StatisticalProps} from "../domain/typing/statisticals"
+import {EqualIcon, TrendingDownIcon, TrendingUpIcon} from "lucide-react"
+import {Badge} from "./ui/badge"
+import {cn} from "../infrastructure/utilities/utils"
+import {ListItems, ListItemType} from "./ui/list-items"
+import {
+    AreaChartWidgetProps,
+    LineChartWidgetProps,
+    PieChartWidgetProps,
+    RadarChartWidgetProps,
+    RadialChartWidgetProps,
+    RadialStackedChartWidgetProps,
+    TooltipChartWidgetProps
+} from "./charts/chart-widgets.types"
+import {AreaWidgetChart} from "./charts/area-widget.chart"
+import {LineWidgetChart} from "./charts/line-widget.chart"
+import {PieWidgetChart} from "./charts/pie-widget.chart"
+import {RadarWidgetChart} from "./charts/radar-widget.chart"
+import {RadialWidgetChart} from "./charts/radial-widget.chart"
+import {RadialStackedWidgetChart} from "./charts/radial-stacked-widget.chart"
+import {TooltipWidgetChart} from "./charts/tooltip-widget.chart"
+import {AreaWidgetChartSkeleton} from "./charts/area-widget.chart-skeleton"
+import {LineWidgetChartSkeleton} from "./charts/line-widget.chart-skeleton"
+import {PieWidgetChartSkeleton} from "./charts/pie-widget.chart-skeleton"
+import {RadarWidgetChartSkeleton} from "./charts/radar-widget.chart-skeleton"
+import {RadialWidgetChartSkeleton} from "./charts/radial-widget.chart-skeleton"
+import {RadialStackedWidgetChartSkeleton} from "./charts/radial-stacked-widget.chart-skeleton"
+import {TooltipWidgetChartSkeleton} from "./charts/tooltip-widget.chart-skeleton"
+
+export type ChartProps =
+    | ({ variant: 'chart:area' } & AreaChartWidgetProps)
+    | ({ variant: 'chart:line' } & LineChartWidgetProps)
+    | ({ variant: 'chart:pie' } & PieChartWidgetProps)
+    | ({ variant: 'chart:radar' } & RadarChartWidgetProps)
+    | ({ variant: 'chart:radial' } & RadialChartWidgetProps)
+    | ({ variant: 'chart:radial-stacked' } & RadialStackedChartWidgetProps)
+    | ({ variant: 'chart:tooltip' } & TooltipChartWidgetProps);
+
+export interface ModuleWidgetProps {
+    title?: ReactNode
+    description?: ReactNode
+    stats?: StatisticalProps[]
+    children?: ReactNode
+    footer?: ReactNode
+    actions?: ReactNode
+    items?: ListItemType
+    itemsHeader?: ReactNode
+    itemsFooter?: ReactNode
+    className?: string
+    contentClassName?: string;
+    loading?: boolean;
+    chartVariant?: 'default' | 'chart:pie' | 'chart:bar' | 'chart:line' | 'chart:area' | 'chart:radar' | 'chart:radial' | 'chart:tooltip' | 'chart:radial-stacked';
+    chart?: AreaChartWidgetProps | LineChartWidgetProps | PieChartWidgetProps | RadarChartWidgetProps | RadialChartWidgetProps | RadialStackedChartWidgetProps | TooltipChartWidgetProps;
+}
+
+export function ModuleWidget(
+    {
+        title,
+        description,
+        stats,
+        children,
+        footer,
+        actions,
+        items,
+        itemsHeader,
+        itemsFooter,
+        className,
+        contentClassName,
+        loading,
+        chartVariant,
+        chart
+    }: ModuleWidgetProps) {
+
+    const renderChart = () => {
+        if (!chartVariant || chartVariant === 'default' || !chart) return null;
+
+        const commonProps = {
+            ...chart,
+            hideCard: true
+        };
+
+        if (loading) {
+            const skeletonProps = {
+                hideCard: true,
+                title: chart.title,
+                description: chart.description,
+                footerTitle: chart.footerTitle,
+                footerDescription: chart.footerDescription,
+            };
+
+            switch (chartVariant) {
+                case 'chart:area':
+                    return <AreaWidgetChartSkeleton {...skeletonProps} />;
+                case 'chart:line':
+                    return <LineWidgetChartSkeleton {...skeletonProps} />;
+                case 'chart:pie':
+                    return <PieWidgetChartSkeleton {...skeletonProps} />;
+                case 'chart:radar':
+                    return <RadarWidgetChartSkeleton {...skeletonProps} />;
+                case 'chart:radial':
+                    return <RadialWidgetChartSkeleton {...skeletonProps} />;
+                case 'chart:radial-stacked':
+                    return <RadialStackedWidgetChartSkeleton {...skeletonProps} />;
+                case 'chart:tooltip':
+                case 'chart:bar':
+                    return <TooltipWidgetChartSkeleton {...skeletonProps} />;
+                default:
+                    return null;
+            }
+        }
+
+        switch (chartVariant) {
+            case 'chart:area':
+                return <AreaWidgetChart {...commonProps as any} />;
+            case 'chart:line':
+                return <LineWidgetChart {...commonProps as any} />;
+            case 'chart:pie':
+                return <PieWidgetChart {...commonProps as any} />;
+            case 'chart:radar':
+                return <RadarWidgetChart {...commonProps as any} />;
+            case 'chart:radial':
+                return <RadialWidgetChart {...commonProps as any} />;
+            case 'chart:radial-stacked':
+                return <RadialStackedWidgetChart {...commonProps as any} />;
+            case 'chart:tooltip':
+                return <TooltipWidgetChart {...commonProps as any} />;
+            case 'chart:bar':
+                return <TooltipWidgetChart {...commonProps as any} />;
+            default:
+                return null;
+        }
+    }
+
+    const chartContent = renderChart();
+
+    return (
+        <Card className={cn("@container/module-widget h-full min-h-[40dvh]", className)}>
+            {(title || description || actions) && (
+                <CardHeader>
+                    <div className="flex flex-col gap-1">
+                        {title && <CardTitle>{title}</CardTitle>}
+                        {description && <CardDescription>{description}</CardDescription>}
+                    </div>
+                    {actions && <CardAction>{actions}</CardAction>}
+                </CardHeader>
+            )}
+            <CardContent className={cn("flex flex-col gap-4", contentClassName)}>
+                {stats && stats.length > 0 && (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 @md/module-widget:grid-cols-2">
+                        {stats.map((stat, index) => (
+                            <div key={index} className="flex flex-col gap-1">
+                                {stat.label && (
+                                    <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                        {stat.label}
+                                    </div>
+                                )}
+                                <div className="text-2xl font-bold flex items-baseline gap-1">
+                                    {stat.amount.toLocaleString()}
+                                    {stat.devise && (
+                                        <span
+                                            className="text-xs font-normal text-muted-foreground">{stat.devise}</span>)}
+                                    {stat.trend !== undefined && (
+                                        <div className="flex items-center gap-2 mt-0.5">
+                                            <Badge
+                                                variant="outline"
+                                                className={cn(
+                                                    "h-5 px-1 text-[10px] gap-0.5 border-transparent bg-muted/50",
+                                                    stat.trend > 0
+                                                        ? "text-emerald-600 dark:text-emerald-400"
+                                                        : (
+                                                            stat.trend === 0 ?
+                                                                "text-muted-foreground"
+                                                                : "text-rose-600 dark:text-rose-400"
+                                                        )
+                                                )}
+                                            >
+                                                {stat.trend > 0 ? (
+                                                    <TrendingUpIcon className="size-3"/>
+                                                ) : (
+                                                    (
+                                                        stat.trend === 0 ?
+                                                            <EqualIcon className="size-3"/>
+                                                            : <TrendingDownIcon className="size-3"/>
+                                                    )
+                                                )}
+                                                {Math.abs(stat.trend)}%
+                                            </Badge>
+                                            {stat.description && (
+                                                <span
+                                                    className="text-[10px] text-muted-foreground truncate">{stat.description}</span>
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+
+                            </div>
+                        ))}
+                    </div>
+                )}
+                {chartContent && <div className="w-full pt-2">{chartContent}</div>}
+                {children}
+            </CardContent>
+
+            {items && (
+                <ListItems
+                    items={items}
+                    header={itemsHeader}
+                    footer={itemsFooter}
+                    className="border-t pt-2"
+                />
+            )}
+
+            {footer && (
+                <CardFooter className="text-xs text-muted-foreground border-t bg-transparent py-3">
+                    {footer}
+                </CardFooter>
+            )}
+        </Card>
+    )
+}

package/src/presentation/nav-documents.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./ui/sidebar"
+import { MoreHorizontalIcon, FolderIcon, ShareIcon, Trash2Icon } from "lucide-react"
+
+export function NavDocuments({
+  items,
+}: {
+  items: {
+    name: string
+    url: string
+    icon: React.ReactNode
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Bibliothèque</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                {item.icon}
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction
+                  showOnHover
+                  className="rounded-sm data-[state=open]:bg-accent"
+                >
+                  <MoreHorizontalIcon
+                  />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-24 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <FolderIcon
+                  />
+                  <span>Open</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ShareIcon
+                  />
+                  <span>Share</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  <Trash2Icon
+                  />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        {/*<SidebarMenuItem>*/}
+        {/*  <SidebarMenuButton className="text-sidebar-foreground/70">*/}
+        {/*    <MoreHorizontalIcon className="text-sidebar-foreground/70" />*/}
+        {/*    <span>More</span>*/}
+        {/*  </SidebarMenuButton>*/}
+        {/*</SidebarMenuItem>*/}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}