@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/uploading/storage-media.tsx

@@ -0,0 +1,210 @@
+"use client"
+
+import * as React from "react"
+import {useEffect, useMemo, useState} from "react"
+import {StorageApiService} from "../../application/service/storage-api-service"
+import type {MediaStorageInterface} from "../../domain/entities/media"
+import {MediaLabelService} from "../../infrastructure/utilities/media-label.service"
+import {Activity} from "../components/activity"
+import {Progress} from "../ui/progress"
+import {Button} from "../ui/button"
+import {cn} from "../../infrastructure/utilities/utils"
+import {
+    DownloadIcon,
+    FileArchiveIcon,
+    FileAudioIcon,
+    FileCodeIcon,
+    FileIcon,
+    FileImageIcon,
+    FileSpreadsheetIcon,
+    FileTextIcon,
+    FileVideoIcon,
+} from "lucide-react"
+
+export interface StorageMediaProps {
+    id: string
+    className?: string
+}
+
+function extensionOf(filename: string): string {
+    return (filename?.split(".").pop() ?? "").toLowerCase()
+}
+
+function documentIconFor(mime: string, extension: string) {
+    const ext = extension.toLowerCase();
+    const type = (mime || "").toLowerCase();
+
+    if (type.includes("zip") || type.includes("compress") || type.includes("rar") || type.includes("tar") || ["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
+        return FileArchiveIcon;
+    }
+    if (type.includes("spreadsheet") || type.includes("excel") || type.includes("csv") || ["xls", "xlsx", "csv"].includes(ext)) {
+        return FileSpreadsheetIcon;
+    }
+    if (type.includes("json") || type.includes("xml") || type.includes("html") || type.includes("javascript") || type.includes("typescript") || ["js", "ts", "json", "xml", "html", "css", "py", "java", "sh"].includes(ext)) {
+        return FileCodeIcon;
+    }
+    return FileTextIcon;
+}
+
+export function StorageMedia({id, className}: StorageMediaProps) {
+    const [media, setMedia] = useState<MediaStorageInterface | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [imageLoading, setImageLoading] = useState(false);
+    const [downloading, setDownloading] = useState(false);
+    const [progress, setProgress] = useState(0);
+
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        StorageApiService.getById(id)
+            .then(response => {
+                if (cancelled) return;
+                setMedia((response.data?.data ?? response.data) ?? null);
+            })
+            .catch((err: any) => {
+                if (cancelled) return;
+                setError(err?.response?.data?.message ?? err?.message ?? "Une erreur est survenue");
+            })
+            .finally(() => {
+                if (!cancelled) setLoading(false);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [id]);
+
+    const extension = extensionOf(media?.filename ?? "");
+    const isImage = media
+        ? MediaLabelService.sectionFor({mime: media.type, extension}) === "image"
+        : false;
+
+    useEffect(() => {
+        if (!media || !isImage) return;
+
+        let objectUrl: string | null = null;
+        let cancelled = false;
+        setImageLoading(true);
+        StorageApiService.getFile(id, {responseType: "blob"})
+            .then(response => {
+                if (cancelled) return;
+                objectUrl = URL.createObjectURL(response.data);
+                setImageUrl(objectUrl);
+            })
+            .catch((err: any) => {
+                if (cancelled) return;
+                setError(err?.response?.data?.message ?? err?.message ?? "Une erreur est survenue");
+            })
+            .finally(() => {
+                if (!cancelled) setImageLoading(false);
+            });
+        return () => {
+            cancelled = true;
+            if (objectUrl) URL.revokeObjectURL(objectUrl);
+        };
+    }, [id, media, isImage]);
+
+    const Icon = useMemo(() => {
+        if (!media) return FileIcon;
+        const section = MediaLabelService.sectionFor({mime: media.type, extension});
+        switch (section) {
+            case "image":
+                return FileImageIcon;
+            case "video":
+                return FileVideoIcon;
+            case "audio":
+                return FileAudioIcon;
+            case "document":
+                return documentIconFor(media.type, extension);
+            default:
+                return FileIcon;
+        }
+    }, [media, extension]);
+
+    const handleDownload = async () => {
+        if (!media) return;
+        setDownloading(true);
+        setProgress(0);
+        try {
+            const response = await StorageApiService.getFile(id, {
+                responseType: "blob",
+                onDownloadProgress: event => {
+                    if (event.total) setProgress(Math.round((event.loaded / event.total) * 100));
+                    else if (event.progress != null) setProgress(Math.round(event.progress * 100));
+                },
+            });
+            const url = URL.createObjectURL(response.data);
+            const anchor = document.createElement("a");
+            anchor.href = url;
+            anchor.download = media.filename || "download";
+            document.body.appendChild(anchor);
+            anchor.click();
+            anchor.remove();
+            URL.revokeObjectURL(url);
+        } catch (err: any) {
+            setError(err?.response?.data?.message ?? err?.message ?? "Une erreur est survenue");
+        } finally {
+            setDownloading(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className={cn("flex flex-auto items-center justify-center", className)}>
+                <Activity.Loader size={12}/>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className={cn("flex flex-auto items-center justify-center p-4 text-sm text-destructive", className)}>
+                {error}
+            </div>
+        );
+    }
+
+    if (!media) {
+        return (
+            <div className={cn("flex flex-auto items-center justify-center p-4 text-sm text-muted-foreground", className)}>
+                Aucun fichier trouvé
+            </div>
+        );
+    }
+
+    if (isImage) {
+        return (
+            <div className={cn("relative flex flex-auto items-center justify-center overflow-hidden", className)}>
+                {imageLoading && <Activity.Loader size={12}/>}
+                {imageUrl && !imageLoading && (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={imageUrl} alt={media.filename} className="size-full object-cover"/>
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <div className={cn("flex flex-col items-center justify-center gap-3 p-6 text-center", className)}>
+            <div className="flex size-16 items-center justify-center rounded-xl bg-muted text-muted-foreground">
+                <Icon className="size-8"/>
+            </div>
+            <div className="flex min-w-0 flex-col items-center gap-1">
+                <p className="max-w-full truncate text-sm font-medium">{media.filename}</p>
+                <p className="text-xs text-muted-foreground">{media.type || "Fichier"}</p>
+            </div>
+            {downloading ? (
+                <div className="flex w-full max-w-xs flex-col gap-1.5">
+                    <Progress value={progress}/>
+                    <span className="text-xs text-muted-foreground">{progress}%</span>
+                </div>
+            ) : (
+                <Button variant="outline" size="sm" onClick={handleDownload}>
+                    <DownloadIcon/>
+                    Télécharger
+                </Button>
+            )}
+        </div>
+    );
+}

package/src/styles.css

@@ -0,0 +1,403 @@
+@import "./themes.css";
+
+@custom-variant dark (&:is(.dark *));
+
+[data-slot="input-group-control"]:-webkit-autofill,
+[data-slot="input-group-control"]:-webkit-autofill:hover,
+[data-slot="input-group-control"]:-webkit-autofill:focus,
+[data-slot="input-group-control"]:autofill,
+[data-slot="input-group-control"]:autofill:hover,
+[data-slot="input-group-control"]:autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset;
+  transition: background-color 5000s ease-in-out 0s;
+  -webkit-text-fill-color: inherit !important;
+  caret-color: inherit;
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    letter-spacing: var(--tracking-normal);
+    }
+
+    html {
+        @apply font-sans;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        @apply font-heading font-bold;
+    }
+
+    h1 {
+        @apply text-h1;
+    }
+
+    h2 {
+        @apply text-h2;
+    }
+
+    h3 {
+        @apply text-h3;
+    }
+
+    h4 {
+        @apply text-h4;
+    }
+
+    h5 {
+        @apply text-h5;
+    }
+
+    h6 {
+        @apply text-h6;
+    }
+}
+:root {
+    --animate-duration: 300ms;
+    --elastic-spring: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --elastic-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --elastic-soft: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+
+@layer utilities {
+
+    .transition-elastic {
+        transition-timing-function: var(--elastic-spring);
+    }
+
+    .transition-bounce {
+        transition-timing-function: var(--elastic-bounce);
+    }
+
+    .transition-soft {
+        transition-timing-function: var(--elastic-soft);
+    }
+
+    @keyframes elastic-scale-in {
+        0% { transform: scale(0.92); opacity: 0; }
+        60% { transform: scale(1.02); }
+        100% { transform: scale(1); opacity: 1; }
+    }
+
+    @keyframes elastic-slide-up-in {
+        0% { transform: translateY(24px); opacity: 0; }
+        60% { transform: translateY(-4px); }
+        100% { transform: translateY(0); opacity: 1; }
+    }
+
+    @keyframes elastic-fade-in {
+        0% { opacity: 0; }
+        100% { opacity: 1; }
+    }
+
+    .animate-elastic-scale-in {
+        animation: elastic-scale-in 0.6s var(--elastic-spring) forwards;
+        animation-delay: var(--tw-animation-delay, 0s);
+    }
+
+    .animate-elastic-slide-up-in {
+        animation: elastic-slide-up-in 0.5s var(--elastic-spring) forwards;
+        animation-delay: var(--tw-animation-delay, 0s);
+    }
+
+    .animate-elastic-fade-in {
+        animation: elastic-fade-in 0.4s var(--elastic-soft) forwards;
+        animation-delay: var(--tw-animation-delay, 0s);
+    }
+
+    @keyframes elastic-card-in {
+        0% { transform: scale(0.94); opacity: 0; }
+        60% { transform: scale(1.02); }
+        100% { transform: scale(1); opacity: 1; }
+    }
+
+    .animate-elastic-card-in {
+        animation: elastic-card-in 0.55s var(--elastic-spring) forwards;
+        animation-delay: var(--tw-animation-delay, 0s);
+    }
+
+    [class*="animate-"] {
+        animation-duration: var(--tw-duration, 360ms);
+        animation-delay: var(--tw-animation-delay, 0s);
+        animation-fill-mode: forwards;
+    }
+
+
+    @keyframes blurred-in {
+        0% {
+            backdrop-filter: blur(5rem);
+        }
+        100% {
+            backdrop-filter: blur(5rem);
+        }
+    }
+    .animate-blurred-in {
+        animation-name: blurred-in;
+    }
+
+    @keyframes blurred-out {
+        0% {
+            backdrop-filter: blur(0);
+        }
+        100% {
+            backdrop-filter: blur(5rem);
+        }
+    }
+    .animate-blurred-out {
+        animation-name: blurred-out;
+        animation-duration: var(--tw-duration, 300ms);
+    }
+
+
+
+    @keyframes backdrop-blurred-in {
+        0% {
+            backdrop-filter: blur(0);
+        }
+        100% {
+            backdrop-filter: blur(5rem);
+        }
+    }
+    .animate-backdrop-blurred-in {
+        animation-name: backdrop-blurred-in;
+        animation-duration: var(--tw-duration, 300ms);
+    }
+
+    @keyframes backdrop-blurred-out {
+        0% {
+            backdrop-filter: blur(5rem);
+        }
+        100% {
+            backdrop-filter: blur(0);
+        }
+    }
+    .animate-backdrop-blurred-out {
+        animation-name: backdrop-blurred-out;
+    }
+
+    @keyframes progress {
+        0% {
+            transform: translateX(-100%);
+        }
+        50% {
+            transform: translateX(0%);
+        }
+        100% {
+            transform: translateX(200%);
+        }
+    }
+
+    .animate-progress-infinite {
+        animation-name: progress;
+        animation-duration: 1s;
+        animation-iteration-count: infinite;
+        animation-timing-function: ease-in-out;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+    .animate-infinite {
+        animation-iteration-count: infinite !important;
+    }
+
+    .slow-motion {
+        animation-duration: 10s !important;
+    }
+
+    @keyframes slide-in-up {
+        0% {
+            transform: translateY(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes slide-in-down {
+        0% {
+            transform: translateY(-100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    .animate-slide-in-up {
+        animation: slide-in-up var(--animate-duration) ease-out forwards;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+    .animate-slide-in-down {
+        animation: slide-in-down var(--animate-duration) ease-out forwards;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+
+    @keyframes slide-out-up {
+        0% {
+            transform: translateY(100%);
+            opacity: 1;
+        }
+        100% {
+            transform: translateY(0);
+            opacity: 0;
+        }
+    }
+
+    @keyframes slide-out-down {
+        0% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        100% {
+            transform: translateY(100%);
+            opacity: 0;
+        }
+    }
+
+    .animate-slide-out-up {
+        animation: slide-out-up var(--animate-duration) ease-out forwards;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+    .animate-slide-out-down {
+        animation: slide-out-down var(--animate-duration) ease-out forwards;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+
+    @keyframes slide-bottom-to-top-back {
+        0% {
+            transform: translateY(100%);
+            opacity: 0;
+        }
+        50% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        100% {
+            transform: translateY(100%);
+            opacity: 0;
+        }
+    }
+
+    @keyframes slide-top-to-bottom-back {
+        0% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        50% {
+            transform: translateY(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes slide-left-to-right-back {
+        0% {
+            transform: translateX(-100%);
+            opacity: 0;
+        }
+        50% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        100% {
+            transform: translateX(-100%);
+            opacity: 0;
+        }
+    }
+
+    @keyframes slide-right-to-left-back {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        50% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        100% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+    }
+
+    .animate-slide-bottom-to-top-back {
+        animation: slide-bottom-to-top-back var(--animate-duration) ease-out;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+    .animate-slide-top-to-bottom-back {
+        animation: slide-top-to-bottom-back var(--animate-duration) ease-out;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+    .animate-slide-left-to-right-back {
+        animation: slide-left-to-right-back var(--animate-duration) ease-out;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+    .animate-slide-right-to-left-back {
+        animation: slide-right-to-left-back var(--animate-duration) ease-out;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+    @keyframes zoom-in {
+        0% {
+            transform: scale(.9);
+            opacity: 0;
+        }
+        100% {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+    @keyframes zoom-out {
+        0% {
+            transform: scale(1);
+            opacity: 1;
+        }
+        100% {
+            transform: scale(.9);
+            opacity: 0;
+        }
+    }
+    .animate-zoom-in {
+        animation: zoom-in var(--animate-duration) ease-out forwards;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+    .animate-zoom-out {
+        animation: zoom-out var(--animate-duration) ease-out forwards;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+
+    .animate-progressing-x {
+        animation: progressing-x var(--animate-duration) ease-out forwards;
+        animation-delay: var(--tw-animation-delay);
+    }
+
+    @keyframes progressing-x {
+        0% {
+            width: 0;
+            opacity: .8;
+        }
+        100% {
+            width: 100%;
+            opacity: 1;
+        }
+    }
+}