@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/components/dynamic-icon.tsx

@@ -0,0 +1,16 @@
+import * as LucideIcons from "lucide-react";
+import { LucideProps } from "lucide-react";
+
+interface DynamicIconProps extends LucideProps {
+  name: string;
+}
+
+export function DynamicIcon({ name, ...props }: DynamicIconProps) {
+  const Icon = (LucideIcons as any)[name];
+
+  if (!Icon) {
+    return <LucideIcons.HelpCircleIcon {...props} />;
+  }
+
+  return <Icon {...props} />;
+}

package/src/presentation/components/floating-upload.tsx

@@ -0,0 +1,291 @@
+"use client"
+
+import * as React from "react"
+import { useRef, useState } from "react"
+import {
+    CheckCircle2,
+    ChevronDown,
+    ChevronUp,
+    CloudUpload,
+    FileText,
+    RotateCw,
+    Trash2,
+    Upload,
+    X,
+    XCircle,
+} from "lucide-react"
+import { Button } from "../ui/button"
+import { Activity } from "./activity"
+import { Progress } from "../ui/progress"
+import { Badge } from "../ui/badge"
+import { useUploadStore, type UploadItem } from "../../infrastructure/stores/upload.store"
+import { cn } from "../../infrastructure/utilities/utils"
+import { formatBytesPerSecond, formatEta, formatFileSize } from "../../infrastructure/utilities/format.util"
+import type { MediaUploadOptions } from "../../domain/entities/media"
+
+function UploadRow({ upload }: { upload: UploadItem }) {
+    const removeFile = useUploadStore((state) => state.removeFile)
+    const retryFile = useUploadStore((state) => state.retryFile)
+    const isUploading = upload.status === "uploading" || upload.status === "idle"
+    const isLoading = upload.status === "uploading"
+
+    return (
+        <div
+            data-slot="upload-row"
+            data-status={upload.status}
+            className="flex flex-col gap-1.5 rounded-lg border border-border/60 bg-muted/30 p-2.5"
+        >
+            <div className="flex items-center gap-2 min-w-0">
+                <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-background ring-1 ring-foreground/10">
+                    {upload.status === "done" ? (
+                        <CheckCircle2 className="size-4 text-emerald-500"/>
+                    ) : upload.status === "error" ? (
+                        <XCircle className="size-4 text-destructive"/>
+                    ) : upload.status === "cancelled" ? (
+                        <X className="size-4 text-muted-foreground"/>
+                    ) : (
+                        <FileText className="size-4 text-muted-foreground"/>
+                    )}
+                </div>
+
+                <div className="flex min-w-0 flex-1 flex-col">
+                    <span className="truncate text-sm font-medium" title={upload.name}>
+                        {upload.name}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                        {formatFileSize(upload.size)}
+                        {isLoading && upload.speed > 0 && (
+                            <> · {formatBytesPerSecond(upload.speed)}</>
+                        )}
+                    </span>
+                </div>
+
+                <div className="flex shrink-0 items-center gap-1">
+                    {isUploading && (
+                        <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            onClick={() => removeFile(upload.id)}
+                            className="text-muted-foreground hover:text-destructive"
+                            aria-label="Annuler le téléversement"
+                        >
+                            <X className="size-4"/>
+                        </Button>
+                    )}
+                    {upload.status === "error" && (
+                        <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            onClick={() => retryFile(upload.id)}
+                            aria-label="Réessayer"
+                        >
+                            <RotateCw className="size-4"/>
+                        </Button>
+                    )}
+                    {(upload.status === "done" || upload.status === "error" || upload.status === "cancelled") && (
+                        <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            onClick={() => removeFile(upload.id)}
+                            aria-label="Retirer le fichier"
+                        >
+                            <Trash2 className="size-4"/>
+                        </Button>
+                    )}
+                </div>
+            </div>
+
+            {isLoading ? (
+                <div className="flex items-center gap-2">
+                    <Progress value={upload.progress} className="h-1.5 flex-1"/>
+                    <span className="w-11 text-right text-xs tabular-nums text-muted-foreground">
+                        {Math.round(upload.progress)}%
+                    </span>
+                </div>
+            ) : upload.status === "error" ? (
+                <span className="text-xs text-destructive line-clamp-1">{upload.error}</span>
+            ) : upload.status === "cancelled" ? (
+                <span className="text-xs text-muted-foreground">Téléversement annulé</span>
+            ) : upload.status === "done" ? (
+                <span className="text-xs text-emerald-500">Terminé</span>
+            ) : null}
+
+            {isLoading && (
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                        <Activity.Loader size={12}/>
+                        {upload.eta ? formatEta(upload.eta) : "Estimation…"}
+                    </span>
+                    <span>{formatFileSize(upload.size - (upload.size * upload.progress) / 100)} restants</span>
+                </div>
+            )}
+        </div>
+    )
+}
+
+function UploadPanel({ uploadOptions }: { uploadOptions?: MediaUploadOptions }) {
+    const uploads = useUploadStore((state) => state.uploads)
+    const collapse = useUploadStore((state) => state.collapse)
+    const addFiles = useUploadStore((state) => state.addFiles)
+    const clearCompleted = useUploadStore((state) => state.clearCompleted)
+    const hasActiveUploads = useUploadStore((state) => state.hasActiveUploads)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const [isDragOver, setIsDragOver] = useState(false)
+
+    const overall = uploads.length
+        ? uploads.reduce((acc, u) => acc + u.progress, 0) / uploads.length
+        : 0
+
+    const handleFiles = (fileList: FileList | File[] | null) => {
+        if (!fileList) return
+        addFiles(Array.from(fileList), uploadOptions)
+    }
+
+    const hasCompleted = uploads.some(
+        (u) => u.status === "done" || u.status === "error" || u.status === "cancelled"
+    )
+
+    return (
+        <div
+            data-slot="upload-panel"
+            className="flex w-80 flex-col overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10"
+            onDragOver={(e) => {
+                e.preventDefault()
+                setIsDragOver(true)
+            }}
+            onDragLeave={() => setIsDragOver(false)}
+            onDrop={(e) => {
+                e.preventDefault()
+                setIsDragOver(false)
+                handleFiles(e.dataTransfer.files)
+            }}
+        >
+            <div className="flex items-center gap-2 border-b px-3 py-2.5">
+                <CloudUpload className="size-4 text-primary"/>
+                <span className="flex-1 text-sm font-medium">Téléversements</span>
+                {hasActiveUploads && (
+                    <Badge variant="secondary" className="gap-1">
+                        <Activity.Loader size={12}/>
+                        En cours
+                    </Badge>
+                )}
+                <Button variant="ghost" size="icon-sm" onClick={collapse} aria-label="Réduire">
+                    <ChevronDown className="size-4"/>
+                </Button>
+            </div>
+
+            {hasActiveUploads && (
+                <div className="border-b px-3 py-2">
+                    <div className="mb-1 flex items-center justify-between text-xs text-muted-foreground">
+                        <span>Progression globale</span>
+                        <span className="tabular-nums">{Math.round(overall)}%</span>
+                    </div>
+                    <Progress value={overall} className="h-1.5"/>
+                </div>
+            )}
+
+            <div
+                className={cn(
+                    "flex max-h-80 min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-2.5",
+                    isDragOver && "bg-primary/5"
+                )}
+            >
+                {uploads.length === 0 ? (
+                    <div
+                        className={cn(
+                            "flex flex-1 flex-col items-center justify-center gap-2 rounded-lg border border-dashed p-6 text-center text-xs text-muted-foreground",
+                            isDragOver && "border-primary text-primary"
+                        )}
+                    >
+                        <Upload className="size-6"/>
+                        <span>Glissez-déposez des fichiers ici</span>
+                        <span>ou</span>
+                        <Button variant="outline" size="sm" onClick={() => inputRef.current?.click()}>
+                            Sélectionner des fichiers
+                        </Button>
+                    </div>
+                ) : (
+                    <>
+                        {uploads.map((upload) => (
+                            <UploadRow key={upload.id} upload={upload}/>
+                        ))}
+                        {isDragOver && (
+                            <div className="pointer-events-none flex items-center justify-center rounded-lg border-2 border-dashed border-primary p-3 text-xs text-primary">
+                                Déposez pour téléverser
+                            </div>
+                        )}
+                    </>
+                )}
+            </div>
+
+            <div className="flex items-center gap-2 border-t px-3 py-2">
+                <input
+                    ref={inputRef}
+                    type="file"
+                    multiple
+                    className="hidden"
+                    onChange={(e) => {
+                        handleFiles(e.target.files)
+                        e.target.value = ""
+                    }}
+                />
+                <Button variant="outline" size="sm" className="flex-1" onClick={() => inputRef.current?.click()}>
+                    <Upload className="size-3.5"/>
+                    Ajouter
+                </Button>
+                {hasCompleted && (
+                    <Button variant="ghost" size="sm" onClick={clearCompleted}>
+                        Vider
+                    </Button>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export function FloatingUpload({ module, type }: { module?: string; type?: string }) {
+    const isExpanded = useUploadStore((state) => state.isExpanded)
+    const toggle = useUploadStore((state) => state.toggle)
+    const hasActiveUploads = useUploadStore((state) => state.hasActiveUploads)
+    const uploads = useUploadStore((state) => state.uploads)
+
+    React.useEffect(() => {
+        if (!hasActiveUploads) return
+        const handler = (event: BeforeUnloadEvent) => {
+            event.preventDefault()
+            event.returnValue = ""
+        }
+        window.addEventListener("beforeunload", handler)
+        return () => window.removeEventListener("beforeunload", handler)
+    }, [hasActiveUploads])
+
+    if (!hasActiveUploads) return null;
+
+    const activeCount = uploads.filter(
+        (u) => u.status === "uploading" || u.status === "idle"
+    ).length
+
+    const uploadOptions: MediaUploadOptions | undefined = module
+        ? { module, type }
+        : undefined
+
+    return (
+        <div className="fixed right-4 bottom-4 z-500 flex flex-col items-end gap-2">
+            {isExpanded && <UploadPanel uploadOptions={uploadOptions}/>}
+
+            <Button
+                onClick={toggle}
+                size="icon-lg"
+                className="relative size-12 rounded-full shadow-lg"
+                aria-label={isExpanded ? "Réduire les téléversements" : "Ouvrir les téléversements"}
+            >
+                {isExpanded ? <ChevronUp className="size-5"/> : <Upload className="size-5"/>}
+                {!isExpanded && hasActiveUploads && activeCount > 0 && (
+                    <span className="absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full bg-destructive text-[10px] font-semibold text-white">
+                        {activeCount}
+                    </span>
+                )}
+            </Button>
+        </div>
+    )
+}

package/src/presentation/components/index.tsx

@@ -0,0 +1,40 @@
+// @liorian/sdk/presentation/components — composite domain components.
+export * from "./activity";
+export * from "./activity-actions";
+export * from "./activity-container";
+export * from "./activity-content";
+export * from "./activity-descriptor-parser";
+export * from "./activity-header";
+export * from "./activity-loader";
+export * from "./activity-title";
+export * from "./auth-lock-screen";
+export * from "./auth-session.view";
+export * from "./data-table";
+export * from "./dynamic-icon";
+export * from "./floating-upload";
+export * from "./local-time";
+export * from "./markdown-parser";
+export * from "./message-scroller";
+export * from "./module-first-access-config.view";
+export * from "./module-first-access-pending.view";
+export * from "./module-guard";
+export * from "./modules-first-access.guard";
+export * from "./modules-guard-forbidden";
+export * from "./notification-details.modal";
+export * from "./notification-item";
+export * from "./notifications-popover";
+export * from "./push-notifications.provider";
+export * from "./upload-progress-dialog";
+export * from "./waiting";
+export * from "./waiting-bar";
+export * from "./waiting-section";
+export * from "./auth";
+
+// `activity.tsx` re-exports the compound `*Props` types — re-export them explicitly
+// from their owning modules so the ambiguity is resolved here.
+export type { ActivityActionsProps } from "./activity-actions";
+export type { ActivityContainerProps } from "./activity-container";
+export type { ActivityContentProps } from "./activity-content";
+export type { ActivityHeaderProps } from "./activity-header";
+export type { ActivityLoaderProps } from "./activity-loader";
+export type { ActivityTitleProps } from "./activity-title";

package/src/presentation/components/local-time.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import * as React from "react";
+import { Clock } from "lucide-react";
+import { cn } from "../../infrastructure/utilities/utils";
+import { useIsDesktop, DESKTOP_BREAKPOINT } from "../../infrastructure/hooks/use-is-desktop";
+import { useIsTauri } from "../../infrastructure/hooks/use-is-tauri";
+
+export interface LocalTimeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * If true, only displays when the app is in desktop mode AND running in Tauri.
+   * Defaults to false (displays in desktop mode whether web or Tauri).
+   */
+  tauriOnly?: boolean;
+
+  /**
+   * Breakpoint width in pixels to consider desktop mode (large screen).
+   * Default: 768px (md breakpoint).
+   */
+  breakpoint?: number;
+
+  /**
+   * Whether to display seconds in time format.
+   * Default: false.
+   */
+  showSeconds?: boolean;
+
+  /**
+   * Whether to display the clock icon.
+   * Default: true.
+   */
+  showIcon?: boolean;
+
+  /**
+   * Whether to display date alongside the time.
+   * Default: false.
+   */
+  showDate?: boolean;
+
+  /**
+   * Locale used to format date/time (e.g. 'fr-FR', 'en-US').
+   * If omitted, system/browser default locale is used.
+   */
+  locale?: string;
+
+  /**
+   * Custom format options for Intl.DateTimeFormat.
+   */
+  formatOptions?: Intl.DateTimeFormatOptions;
+
+  /**
+   * Custom formatter function.
+   */
+  formatTime?: (date: Date) => string;
+
+  /**
+   * Update interval in milliseconds.
+   * Default: 1000ms.
+   */
+  intervalMs?: number;
+
+  /**
+   * Optional render prop for custom layout or rendering.
+   */
+  children?: (data: {
+    time: Date;
+    formattedTime: string;
+    formattedDate?: string;
+    isDesktop: boolean;
+    isTauri: boolean;
+  }) => React.ReactNode;
+}
+
+/**
+ * LocalTime component displays the local machine time.
+ * - By default, it renders only when the application is in desktop mode (large screen).
+ * - When `tauriOnly` (or `onlyTauri`) is enabled, it renders only when the app is in desktop mode AND running in Tauri.
+ */
+export function LocalTime({
+  tauriOnly = false,
+  breakpoint = DESKTOP_BREAKPOINT,
+  showSeconds = false,
+  showIcon = true,
+  showDate = false,
+  locale,
+  formatOptions,
+  formatTime,
+  intervalMs = 1000,
+  className,
+  children,
+  ...props
+}: LocalTimeProps) {
+  const [mounted, setMounted] = React.useState(false);
+  const [time, setTime] = React.useState<Date | null>(null);
+  const isDesktop = useIsDesktop(breakpoint);
+  const isTauri = useIsTauri();
+
+  const requireTauri = tauriOnly;
+
+  React.useEffect(() => {
+    setMounted(true);
+    setTime(new Date());
+
+    const timer = setInterval(() => {
+      setTime(new Date());
+    }, intervalMs);
+
+    return () => clearInterval(timer);
+  }, [intervalMs]);
+
+  // Only render on client, only in desktop mode, and if requireTauri is set, only in Tauri
+  if (!mounted || !time || !isDesktop || (requireTauri && !isTauri)) {
+    return null;
+  }
+
+  const defaultTimeOptions: Intl.DateTimeFormatOptions = {
+    hour: "2-digit",
+    minute: "2-digit",
+    ...(showSeconds ? { second: "2-digit" } : {}),
+  };
+
+  const formattedTime = formatTime
+    ? formatTime(time)
+    : time.toLocaleTimeString(locale, formatOptions || defaultTimeOptions);
+
+  const formattedDate = showDate
+    ? time.toLocaleDateString(locale, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+      })
+    : undefined;
+
+  const fullDateTimeTooltip = time.toLocaleString(locale, {
+    dateStyle: "full",
+    timeStyle: "medium",
+  });
+
+  if (typeof children === "function") {
+    return (
+      <>
+        {children({
+          time,
+          formattedTime,
+          formattedDate,
+          isDesktop,
+          isTauri,
+        })}
+      </>
+    );
+  }
+
+  return (
+    <div
+      title={fullDateTimeTooltip}
+      aria-label={`Heure locale: ${formattedTime}`}
+      className={cn(
+        "hidden md:inline-flex items-center gap-1.5 px-0 py-1 text-sm font-medium text-muted-foreground select-none rounded-md hover:text-foreground transition-colors",
+        className
+      )}
+      {...props}
+    >
+      {showIcon && <Clock className="size-3.5 shrink-0 opacity-70" aria-hidden="true" />}
+      {formattedDate && <span className="opacity-80">{formattedDate}</span>}
+      <time dateTime={time.toISOString()} className="tabular-nums">
+        {formattedTime}
+      </time>
+    </div>
+  );
+}