@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/ui/timeline-steps.tsx

@@ -0,0 +1,235 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+/* -----------------------------------------------------------------------------
+ * Timeline (root container)
+ * -------------------------------------------------------------------------- */
+
+const timelineStepsVariants = cva("flex", {
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row overflow-x-auto",
+    },
+    position: {
+      left: "",
+      right: "",
+      alternate: "",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    position: "left",
+  },
+})
+
+interface TimelineStepsProps extends React.ComponentProps<"div">, VariantProps<typeof timelineStepsVariants> {}
+
+function TimelineSteps({ className, orientation, position, ...props }: TimelineStepsProps) {
+  return (
+    <div
+      data-slot="timeline-steps"
+      data-orientation={orientation}
+      data-position={position}
+      className={cn(timelineStepsVariants({ orientation, position }), className)}
+      {...props}
+    />
+  )
+}
+
+/* -----------------------------------------------------------------------------
+ * TimelineItem
+ * -------------------------------------------------------------------------- */
+
+const timelineStepsItemVariants = cva("relative flex flex-col", {
+  variants: {
+    orientation: {
+      vertical: "pb-8 last:pb-0",
+      horizontal: "flex-1 items-center",
+    },
+    status: {
+      default: "",
+      completed: "",
+      current: "",
+      upcoming: "opacity-60",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    status: "default",
+  },
+})
+
+interface TimelineStepsItemProps extends React.ComponentProps<"div">, VariantProps<typeof timelineStepsItemVariants> {}
+
+function TimelineStepsItem({ className, orientation, status, ...props }: TimelineStepsItemProps) {
+  return (
+    <div
+      data-slot="timeline-steps-item"
+      data-status={status}
+      className={cn(timelineStepsItemVariants({ orientation, status }), className)}
+      {...props}
+    />
+  )
+}
+
+/* -----------------------------------------------------------------------------
+ * TimelineConnector (the line connecting items)
+ * -------------------------------------------------------------------------- */
+
+const timelineStepsConnectorVariants = cva("", {
+  variants: {
+    orientation: {
+      vertical:
+        "absolute left-[calc(var(--timeline-steps-icon-size,2.5rem)/2)] top-[var(--timeline-steps-icon-size,2.5rem)] h-[calc(100%-var(--timeline-steps-icon-size,2.5rem))] w-px -translate-x-1/2",
+      horizontal: "absolute top-3 left-[calc(50%+0.75rem)] h-px w-[calc(100%-1.5rem)]",
+    },
+    variant: {
+      default: "bg-border",
+      dashed: "border-l border-dashed border-border bg-transparent",
+      dotted: "border-l border-dotted border-border bg-transparent",
+    },
+    status: {
+      default: "",
+      completed: "bg-primary",
+      current: "bg-gradient-to-b from-primary to-border",
+      upcoming: "bg-muted",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "default",
+    status: "default",
+  },
+})
+
+interface TimelineStepsConnectorProps
+  extends React.ComponentProps<"div">,
+    VariantProps<typeof timelineStepsConnectorVariants> {}
+
+function TimelineStepsConnector({ className, orientation, variant, status, ...props }: TimelineStepsConnectorProps) {
+  return (
+    <div
+      data-slot="timeline-steps-connector"
+      aria-hidden="true"
+      className={cn(timelineStepsConnectorVariants({ orientation, variant, status }), className)}
+      {...props}
+    />
+  )
+}
+
+/* -----------------------------------------------------------------------------
+ * TimelineHeader (contains icon and title row)
+ * -------------------------------------------------------------------------- */
+
+function TimelineStepsHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="timeline-steps-header" className={cn("flex items-center gap-3", className)} {...props} />
+}
+
+/* -----------------------------------------------------------------------------
+ * TimelineStepsIcon (the dot/icon indicator)
+ * -------------------------------------------------------------------------- */
+
+const timelineStepsIconVariants = cva(
+  "relative z-10 flex shrink-0 items-center justify-center rounded-full border bg-background [--timeline-steps-icon-size:2.5rem]",
+  {
+    variants: {
+      size: {
+        sm: "size-6 [--timeline-steps-icon-size:1.5rem] [&>svg]:size-3",
+        default: "size-10 [--timeline-steps-icon-size:2.5rem] [&>svg]:size-4",
+        lg: "size-12 [--timeline-steps-icon-size:3rem] [&>svg]:size-5",
+      },
+      variant: {
+        default: "border-border text-muted-foreground",
+        primary: "border-primary bg-primary text-primary-foreground",
+        secondary: "border-secondary bg-secondary text-secondary-foreground",
+        destructive: "border-destructive bg-destructive text-destructive-foreground",
+        outline: "border-border bg-background text-foreground",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+  },
+)
+
+interface TimelineStepsIconProps extends React.ComponentProps<"div">, VariantProps<typeof timelineStepsIconVariants> {}
+
+function TimelineStepsIcon({ className, size, variant, ...props }: TimelineStepsIconProps) {
+  return (
+    <div
+      data-slot="timeline-steps-icon"
+      className={cn(timelineStepsIconVariants({ size, variant }), className)}
+      {...props}
+    />
+  )
+}
+
+/* -----------------------------------------------------------------------------
+ * TimelineStepsContent (container for description, time, etc.)
+ * -------------------------------------------------------------------------- */
+
+function TimelineStepsContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="timeline-steps-content"
+      className={cn("ms-[3.25rem] flex flex-col gap-1 pt-0.5 pb-2", className)}
+      {...props}
+    />
+  )
+}
+
+/* -----------------------------------------------------------------------------
+ * TimelineStepsTitle
+ * -------------------------------------------------------------------------- */
+
+function TimelineStepsTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="timeline-steps-title"
+      className={cn("text-foreground leading-none font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+/* -----------------------------------------------------------------------------
+ * TimelineDescription
+ * -------------------------------------------------------------------------- */
+
+function TimelineStepsDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="timeline-steps-description" className={cn("text-muted-foreground text-sm", className)} {...props} />
+  )
+}
+
+/* -----------------------------------------------------------------------------
+ * TimelineStepsTime (timestamp display)
+ * -------------------------------------------------------------------------- */
+
+function TimelineStepsTime({ className, ...props }: React.ComponentProps<"time">) {
+  return <time data-slot="timeline-steps-time" className={cn("text-muted-foreground text-xs", className)} {...props} />
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  TimelineSteps,
+  TimelineStepsItem,
+  TimelineStepsConnector,
+  TimelineStepsHeader,
+  TimelineStepsIcon,
+  TimelineStepsContent,
+  TimelineStepsTitle,
+  TimelineStepsDescription,
+  TimelineStepsTime,
+  timelineStepsVariants,
+  timelineStepsItemVariants,
+  timelineStepsConnectorVariants,
+  timelineStepsIconVariants,
+}

package/src/presentation/ui/toggle-group.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "../../infrastructure/utilities/utils"
+import { toggleVariants } from "./toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/presentation/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default:
+          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/presentation/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/src/presentation/uploading/index.tsx

@@ -0,0 +1,3 @@
+// @liorian/sdk/presentation/uploading — media upload widgets.
+export * from "./media-upload-field";
+export * from "./storage-media";

package/src/presentation/uploading/media-upload-field.tsx

@@ -0,0 +1,152 @@
+import {UserMediaFieldConfig} from "../../domain/typing/user-media-upload";
+import {MediaStorageInterface, MediaUploadOptions} from "../../domain/entities/media";
+import {useEffect, useRef, useState} from "react";
+import {useUploadStore} from "../../infrastructure/stores/upload.store";
+import {CheckCircle2, FileText, ImageIcon, Trash2, Upload, X} from "lucide-react";
+import {formatFileSize} from "../../infrastructure/utilities/format.util";
+import {MediaLabelService} from "../../infrastructure/utilities/media-label.service";
+import {StorageMedia} from "./storage-media";
+import {Button} from "../ui/button";
+import {Progress} from "../ui/progress";
+import {Activity} from "../components/activity";
+
+
+export interface MediaUploadFieldProps {
+    moduleKey: string;
+    field: UserMediaFieldConfig;
+    value?: MediaStorageInterface;
+    onChange: (media?: MediaStorageInterface) => void;
+}
+
+export function MediaUploadField({field, value, onChange, moduleKey}: MediaUploadFieldProps) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const uploadFile = useUploadStore((state) => state.uploadFile);
+    const [isUploading, setIsUploading] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [error, setError] = useState<string>();
+    const [localPreviewUrl, setLocalPreviewUrl] = useState<string>();
+
+    useEffect(() => {
+        return () => {
+            if (localPreviewUrl) URL.revokeObjectURL(localPreviewUrl);
+        };
+    }, [localPreviewUrl]);
+
+    const isStoredImage = value?.id
+        ? MediaLabelService.sectionFor({mime: value.type, extension: value.filename?.split(".").pop() ?? ""}) === "image"
+        : false;
+
+    const handleSelect = async (file?: File | null) => {
+        if (!file) return;
+        if (localPreviewUrl) URL.revokeObjectURL(localPreviewUrl);
+        setLocalPreviewUrl(URL.createObjectURL(file));
+        setError(undefined);
+        setIsUploading(true);
+        setProgress(0);
+
+        const options: MediaUploadOptions = {module: moduleKey, type: field.type};
+        try {
+            const media = await uploadFile(file, options, (event) => {
+                setProgress(event.total ? (event.loaded / event.total) * 100 : 0);
+            }) as MediaStorageInterface | undefined;
+            if (!media) throw new Error('Réponse invalide du serveur');
+            setLocalPreviewUrl(undefined);
+            onChange(media);
+        } catch (e: any) {
+            setError(e?.response?.data?.message || e?.message || 'Une erreur est survenue lors du téléversement');
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    return (
+        <div data-slot="media-upload-field" className="rounded-lg border border-border/60 bg-muted/30 p-4">
+            <div className="flex items-center gap-4">
+                <div className="flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-background ring-1 ring-foreground/10">
+                    {localPreviewUrl ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img src={localPreviewUrl} alt={field.label} className="size-full object-cover"/>
+                    ) : isStoredImage ? (
+                        <StorageMedia id={value!.id!} className="size-full"/>
+                    ) : value ? (
+                        <FileText className="size-6 text-muted-foreground"/>
+                    ) : (
+                        <ImageIcon className="size-6 text-muted-foreground"/>
+                    )}
+                </div>
+
+                <div className="min-w-0 flex-1">
+                    <p className="text-sm font-medium">{field.label}</p>
+                    <p className="text-xs text-muted-foreground">{field.description}</p>
+                    {value?.filename && !isUploading && (
+                        <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                            {value.filename} · {formatFileSize(value.metadata?.size ?? 0)}
+                        </p>
+                    )}
+                </div>
+
+                <div className="flex shrink-0 items-center gap-1">
+                    {value && !isUploading && (
+                        <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            onClick={() => onChange(undefined)}
+                            aria-label={`Retirer ${field.label.toLowerCase()}`}
+                            className="text-muted-foreground hover:text-destructive"
+                        >
+                            <Trash2 className="size-4"/>
+                        </Button>
+                    )}
+                    <input
+                        ref={inputRef}
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        onChange={(e) => {
+                            handleSelect(e.target.files?.[0]);
+                            e.target.value = "";
+                        }}
+                    />
+                    <Button variant="outline" size="sm" onClick={() => inputRef.current?.click()} disabled={isUploading}>
+                        {value && !isUploading ? (
+                            <>
+                                <Upload className="size-3.5"/>
+                                Remplacer
+                            </>
+                        ) : (
+                            <>
+                                <Upload className="size-3.5"/>
+                                Téléverser
+                            </>
+                        )}
+                    </Button>
+                </div>
+            </div>
+
+            {isUploading && (
+                <div className="mt-3 flex items-center gap-2">
+                    <Progress value={progress} className="h-1.5 flex-1"/>
+                    <span className="w-11 text-right text-xs tabular-nums text-muted-foreground">
+                        {Math.round(progress)}%
+                    </span>
+                </div>
+            )}
+            {error ? (
+                <p className="mt-2 flex items-center gap-1 text-xs text-destructive">
+                    <X className="size-3"/>
+                    {error}
+                </p>
+            ) : value && !isUploading ? (
+                <p className="mt-2 flex items-center gap-1 text-xs text-emerald-500">
+                    <CheckCircle2 className="size-3"/>
+                    Fichier téléversé avec succès
+                </p>
+            ) : isUploading ? (
+                <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
+                    <Activity.Loader size={12}/>
+                    Téléversement en cours…
+                </p>
+            ) : null}
+        </div>
+    );
+}