@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/8starlabs-ui/transport-badge.tsx

@@ -0,0 +1,249 @@
+import React from "react";
+import { cn } from "../../infrastructure/utilities/utils";
+
+const SYSTEMS = {
+  SG: {
+    NS: {
+      name: "North South Line",
+      short: "NS",
+      long: "NSL",
+      bg: "#e22726",
+      fg: "#FFF"
+    },
+    EW: {
+      name: "East West Line",
+      short: "EW",
+      long: "EWL",
+      bg: "#00964e",
+      fg: "#FFF"
+    },
+    NE: {
+      name: "North East Line",
+      short: "NE",
+      long: "NEL",
+      bg: "#8f4299",
+      fg: "#FFF"
+    },
+    CE: {
+      name: "Circle Line",
+      short: "CE",
+      long: "CCL",
+      bg: "#f99d26",
+      fg: "#000"
+    },
+    DT: {
+      name: "Downtown Line",
+      short: "DT",
+      long: "DTL",
+      bg: "#005ea8",
+      fg: "#fff"
+    },
+    TE: {
+      name: "Thomson-East Coast Line",
+      short: "TE",
+      long: "TEL",
+      bg: "#9d5b26",
+      fg: "#FFF"
+    }
+  },
+  // Add more systems here in the future
+  HK: {
+    // Hong Kong MTR
+    KT: {
+      name: "Kwun Tong Line",
+      short: "KT",
+      long: "KTL",
+      bg: "#399e48",
+      fg: "#FFF"
+    },
+    AE: {
+      name: "Airport Express Line",
+      short: "AE",
+      long: "AEL",
+      bg: "#39858d",
+      fg: "#FFF"
+    },
+    TO: {
+      name: "Tseung Kwan O Line",
+      short: "TO",
+      long: "TKOL",
+      bg: "#7a3d90",
+      fg: "#000"
+    },
+    SI: {
+      name: "South Island Line",
+      short: "SI",
+      long: "SIL",
+      bg: "#c7d536",
+      fg: "#FFF"
+    },
+    TW: {
+      name: "Tsuen Wan Line",
+      short: "TW",
+      long: "TWL",
+      bg: "#d5371f",
+      fg: "#FFF"
+    },
+    IS: {
+      name: "Island Line",
+      short: "IS",
+      long: "ISL",
+      bg: "#3d6fbe",
+      fg: "#FFF"
+    },
+    TC: {
+      name: "Tung Chung Line",
+      short: "TC",
+      long: "TCL",
+      bg: "#e6a03e",
+      fg: "#000"
+    },
+    DR: {
+      name: "Disneyland Resort Line",
+      short: "DR",
+      long: "DRL",
+      bg: "#df76a4",
+      fg: "#000"
+    },
+    ER: {
+      name: "East Rail Line",
+      short: "ER",
+      long: "ERL",
+      bg: "#78b2e5",
+      fg: "#000"
+    },
+    TM: {
+      name: "Tuen Ma Line",
+      short: "TM",
+      long: "TML",
+      bg: "#913a0e",
+      fg: "#FFF"
+    }
+  }
+} as const;
+
+type SystemKey = keyof typeof SYSTEMS;
+type BadgeSize = "xs" | "sm" | "md" | "lg";
+const sizeClasses: Record<BadgeSize, string> = {
+  xs: "px-1 py-0.5 text-[10px]",
+  sm: "px-1.5 py-0.5 text-xs",
+  md: "px-2 py-0.5 text-sm",
+  lg: "px-3 py-1 text-base"
+};
+
+interface TransportBadgeProps {
+  stationCode: string | string[];
+  system: SystemKey;
+  className?: string;
+  stationName?: string;
+  showStationName?: boolean;
+  size?: BadgeSize;
+}
+// Defined Linedata type
+type LineData = {
+  name: string;
+  short: string;
+  long: string;
+  bg: string;
+  fg: string;
+} | null;
+
+const getLineDataFromStationCode = (
+  code: string,
+  system: SystemKey
+): LineData => {
+  // Added return type LineData, so TS knows all lines share a common structure
+  const match = code.match(/^[A-Z]+/);
+  if (!match) return null;
+  const prefix = match[0] as string;
+  const lines = SYSTEMS[system] as Record<string, LineData>;
+  if (lines && prefix in lines) {
+    return lines[prefix];
+  }
+  return null;
+};
+
+export const TransportBadge = ({
+  stationCode,
+  system,
+  className,
+  stationName,
+  showStationName = false,
+  size = "md"
+}: TransportBadgeProps) => {
+  const codes = Array.isArray(stationCode) ? stationCode : [stationCode];
+  const isMulti = codes.length > 1;
+
+  return (
+    <span className={cn("inline-flex items-center", className)}>
+      <span className={cn("inline-flex", isMulti ? "gap-0" : "gap-1")}>
+        {codes.map((code, idx) => {
+          const line = getLineDataFromStationCode(code, system);
+          if (!line) {
+            return (
+              <span
+                key={code}
+                className={cn(
+                  "inline-flex items-center rounded font-semibold bg-muted text-muted-foreground",
+                  sizeClasses[size]
+                )}
+              >
+                Unknown
+              </span>
+            );
+          }
+
+          const radius = isMulti
+            ? idx === 0
+              ? "rounded-l"
+              : idx === codes.length - 1
+                ? "rounded-r"
+                : "rounded-none"
+            : "rounded";
+
+          const border =
+            isMulti && idx > 0
+              ? "border-l border-white/40 dark:border-black/40"
+              : "";
+
+          return (
+            <span
+              key={code}
+              className={cn(
+                "inline-flex items-center font-semibold",
+                sizeClasses[size],
+                radius,
+                border
+              )}
+              style={{
+                backgroundColor: line.bg,
+                color: line.fg
+              }}
+              title={line.name}
+            >
+              <span className="font-bold">
+                {line.short}
+                {code.replace(/^[A-Z]+/, "")}
+              </span>
+            </span>
+          );
+        })}
+      </span>
+      {showStationName && stationName && (
+        <span
+          className={cn(
+            "ml-2 font-medium text-muted-foreground",
+            size === "xs" && "text-[10px]",
+            size === "sm" && "text-xs",
+            size === "md" && "text-sm",
+            size === "lg" && "text-base"
+          )}
+        >
+          {stationName}
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default TransportBadge;

package/src/presentation/8starlabs-ui/ui/copy-button.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import * as React from "react";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+
+import { cn } from "../../../infrastructure/utilities/utils";
+import { Button } from "../button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "../../ui/tooltip";
+
+export function CopyButton({
+  value,
+  className,
+  variant = "ghost",
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  value: string;
+  src?: string;
+}) {
+  const [hasCopied, setHasCopied] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!hasCopied) {
+      return;
+    }
+
+    const timer = setTimeout(() => setHasCopied(false), 2000);
+    return () => clearTimeout(timer);
+  }, [hasCopied]);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          data-slot="copy-button"
+          size="icon"
+          variant={variant}
+          className={cn(
+            "absolute top-2 right-2 z-10 size-7 opacity-70 hover:opacity-100 focus-visible:opacity-100",
+            className
+          )}
+          onClick={() => {
+            navigator.clipboard.writeText(value);
+            setHasCopied(true);
+          }}
+          {...props}
+        >
+          <span className="sr-only">Copy</span>
+          {hasCopied ? <IconCheck /> : <IconCopy />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        {hasCopied ? "Copied" : "Copy to Clipboard"}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/presentation/8starlabs-ui/ui/index.tsx

@@ -0,0 +1,2 @@
+// @liorian/sdk/presentation/8starlabs-ui/ui
+export * from "./copy-button";

package/src/presentation/analytics-section.tsx

@@ -0,0 +1,85 @@
+import {cn} from "../infrastructure/utilities/utils";
+import {Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle} from "./ui/card";
+import {Badge} from "./ui/badge";
+import {EqualApproximatelyIcon, TrendingDownIcon, TrendingUpIcon} from "lucide-react";
+import React from "react";
+
+export interface AnalyticSectionItemProps {
+    label?: React.ReactNode;
+    value?: React.ReactNode;
+    actions?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    trend?: number;
+    colspan?: number;
+}
+
+export interface AnalyticSectionProps {
+    className?: string;
+    direction?: "horizontal" | "vertical";
+    items: AnalyticSectionItemProps[];
+}
+
+export function AnalyticsSection({className, direction = "horizontal", items}: AnalyticSectionProps) {
+    return (
+        <div
+            className={cn(
+                "grid gap-6 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs dark:*:data-[slot=card]:bg-card",
+                direction === "horizontal"
+                    ? "grid-cols-1 md:grid-cols-4 @xl/main:grid-cols-2 @5xl/main:grid-cols-4"
+                    : "grid-cols-1 auto-rows-fr",
+                className)}>
+            {items.map((item, index) => (
+                <Card
+                    key={index}
+                    className={cn(
+                        "@container/card",
+                        direction === "vertical"
+                            ? cn(
+                                item.colspan === 2 && "row-span-2",
+                                item.colspan === 3 && "row-span-3",
+                                item.colspan === 4 && "row-span-4",
+                            )
+                            : cn(
+                                item.colspan === 2 && "md:col-span-2 @xl/main:col-span-2",
+                                item.colspan === 3 && "md:col-span-3 @xl/main:col-span-2 @5xl/main:col-span-3",
+                                item.colspan === 4 && "md:col-span-4 @xl/main:col-span-2 @5xl/main:col-span-4",
+                            ),
+                    )}
+                >
+                    <CardHeader>
+                        <CardDescription>{item.label}</CardDescription>
+                        <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+                            {item.value}
+                        </CardTitle>
+                        <CardAction>
+                            {/*{item.actions}*/}
+                            {item.trend && (
+                                <Badge variant="outline">
+                                    {item.trend > 0 && <TrendingUpIcon/>}
+                                    {item.trend < 0 && <TrendingDownIcon/>}
+                                    {item.trend == 0 && <EqualApproximatelyIcon/>}
+                                </Badge>)
+                            }
+                        </CardAction>
+                    </CardHeader>
+                    <div className="flex-auto"></div>
+                    {(item.title || item.description) && (
+                        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+                            {item.title && (
+                                <div className="line-clamp-1 flex gap-2 font-medium">
+                                    {item.title}
+                                </div>
+                            )}
+                            {item.description && (
+                                <div className="text-muted-foreground">
+                                    {item.description}
+                                </div>
+                            )}
+                        </CardFooter>
+                    )}
+                </Card>
+            ))}
+        </div>
+    )
+}

package/src/presentation/app-sidebar.tsx

@@ -0,0 +1,234 @@
+"use client"
+
+import * as React from "react"
+
+import { NavDocuments } from "./nav-documents"
+import { NavMain } from "./nav-main"
+import { NavSecondary } from "./nav-secondary"
+import { NavUser } from "./nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "./ui/sidebar"
+import {
+  LayoutDashboardIcon,
+  ListIcon,
+  ChartBarIcon,
+  FolderIcon,
+  UsersIcon,
+  CameraIcon,
+  FileTextIcon,
+  Settings2Icon,
+  CircleHelpIcon,
+  SearchIcon,
+  DatabaseIcon,
+  FileChartColumnIcon,
+  FileIcon,
+  CommandIcon,
+  VideoIcon, GalleryHorizontalIcon, FilesIcon, ShieldIcon
+} from "lucide-react"
+import {ThemeLogo} from "./system/logo.theme";
+import {useModuleStore} from "../infrastructure/stores/module.store";
+import {DynamicIcon} from "./components/dynamic-icon";
+import {ComponentIcon} from "lucide-react";
+import {useAuth} from "../infrastructure/hooks/use-auth";
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [],
+  navClouds: [
+    {
+      title: "Capture",
+      icon: (
+        <CameraIcon
+        />
+      ),
+      isActive: true,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Proposal",
+      icon: (
+        <FileTextIcon
+        />
+      ),
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Prompts",
+      icon: (
+        <FileTextIcon
+        />
+      ),
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Settings",
+      url: "#",
+      icon: (
+        <Settings2Icon
+        />
+      ),
+    },
+    {
+      title: "Get Help",
+      url: "#",
+      icon: (
+        <CircleHelpIcon
+        />
+      ),
+    },
+    {
+      title: "Search",
+      url: "#",
+      icon: (
+        <SearchIcon
+        />
+      ),
+    },
+  ],
+  documents: [
+    {
+      name: "Vidéos",
+      url: "/media-library/videos",
+      icon: (
+        <VideoIcon
+        />
+      ),
+    },
+    {
+      name: "Images",
+      url: "/media-library/images",
+      icon: (
+        <GalleryHorizontalIcon
+        />
+      ),
+    },
+    {
+      name: "Documents",
+      url: "/media-library/documents",
+      icon: (
+        <FilesIcon
+        />
+      ),
+    },
+    {
+      name: "Rapports",
+      url: "/reports",
+      icon: (
+        <FileChartColumnIcon
+        />
+      ),
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const { modules } = useModuleStore();
+  const { user: authUser } = useAuth();
+  const [mounted, setMounted] = React.useState(false);
+
+  const user = React.useMemo(() => ({
+    name: authUser?.username || authUser?.userData?.firstname || "Utilisateur",
+    email: authUser?.email || "No email",
+    avatar: "/avatars/shadcn.jpg", // Fallback avatar
+  }), [authUser]);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const dynamicNavMain = React.useMemo(() => {
+    const modulesToUse = mounted ? modules : [];
+    return modulesToUse
+      .filter((m) => m.isEnabled)
+      .map((m) => ({
+        title: m.name,
+        url: m.uri,
+        icon: <DynamicIcon name={m.icon} />,
+      }));
+  }, [modules, mounted]);
+
+  const navSecondaryWithModules = React.useMemo(() => {
+    const items = [...data.navSecondary];
+    if (!items.find(i => i.title === "Store")) {
+      items.push({
+        title: "Store",
+        url: "/store/explorer",
+        icon: (
+          <ComponentIcon
+          />
+        ),
+      });
+    }
+    return items;
+  }, [modules]);
+
+  return (
+    <Sidebar collapsible="offcanvas" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size={"lg"}
+              asChild
+              className="data-[slot=sidebar-menu-button]:p-2!"
+            >
+              <a href="#">
+                <ThemeLogo variant={'banner'} className="h-18 w-auto" />
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={dynamicNavMain} />
+        <NavDocuments items={data.documents} />
+        <NavSecondary items={navSecondaryWithModules} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}

package/src/presentation/charts/area-widget.chart-skeleton.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {Skeleton} from "../ui/skeleton";
+import {cn} from "../../infrastructure/utilities/utils";
+
+export interface AreaWidgetChartSkeletonProps {
+    title?: string
+    description?: string
+    footerTitle?: string
+    footerDescription?: string
+    className?: string
+    hideCard?: boolean
+}
+
+export function AreaWidgetChartSkeleton(
+    {
+        title,
+        description,
+        footerTitle,
+        footerDescription,
+        className,
+        hideCard = false,
+    }: AreaWidgetChartSkeletonProps
+) {
+    const content = (
+        <>
+            {(title || description) && !hideCard && (
+                <CardHeader>
+                    <CardTitle>
+                        <Skeleton className="h-5 w-48"/>
+                    </CardTitle>
+                    {description && (
+                        <CardDescription>
+                            <Skeleton className="h-4 w-64"/>
+                        </CardDescription>
+                    )}
+                </CardHeader>
+            )}
+            <CardContent className={cn("w-full h-full", hideCard ? "p-0" : "flex-1")}>
+                <Skeleton className={cn("w-full h-full min-h-52", hideCard && className)}/>
+            </CardContent>
+            {(footerTitle || footerDescription) && !hideCard && (
+                <CardFooter className="flex-col items-start gap-2 text-sm">
+                    {footerTitle && <Skeleton className="h-4 w-40"/>}
+                    {footerDescription && <Skeleton className="h-4 w-56"/>}
+                </CardFooter>
+            )}
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card className={className}>
+            {content}
+        </Card>
+    )
+}