sitero 0.2.0 → 0.4.0

package/dist/src/cms/client/interfaces/components/ui/features/file/file-info/file-size.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import 'mime-types';
+import 'sitero-domain';
+import { formatFileSize } from '../../../../../../../../shared/blob-file/format-file-size.js';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../../../shared/utils/cn.js';
+import '@radix-ui/react-avatar';
+import '../../../../shadcn/badge.js';
+import '../../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../../../shadcn/tooltip.js';
+import { Field } from '../../../form/field.js';
+import { FieldBody } from '../../../form/field-body.js';
+import '../../../inputs/input.js';
+import '../../../inputs/textarea.js';
+
+function FileSize({ size, maxSize }) {
+  const { t } = useTranslator();
+  const isOversize = Number(size) > maxSize;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: t("ui.blob-file.file-info.file-size.text"),
+        wrapperClassName: "min-w-0 grid-cols-1",
+        children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FieldBody, { childrenClassName: "min-w-0", children: /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto truncate",
+                isOversize && "text-destructive"
+              ),
+              children: formatFileSize(size)
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("p", { children: [
+            size,
+            " bytes"
+          ] }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "h-1 w-28",
+          "rounded-full",
+          "bg-white dark:bg-gray-200",
+          "transition",
+          "shadow-xs"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("h-full rounded-full", "overflow-hidden", "transition"),
+            style: {
+              width: `${Math.min(size / maxSize * 100, 100).toFixed(2)}%`
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "h-full w-28 bg-linear-to-r from-green-300 via-yellow-400 to-red-500" })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { FileSize };

package/dist/src/cms/client/interfaces/components/ui/features/file/file-info/file-type.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import 'clsx';
+import 'tailwind-merge';
+import '../../../../shadcn/badge.js';
+import '../../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../../../shadcn/tooltip.js';
+import { Field } from '../../../form/field.js';
+import { FieldBody } from '../../../form/field-body.js';
+import '../../../inputs/input.js';
+import '../../../inputs/textarea.js';
+
+function FileType({ fileType, mimeType }) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label: t("ui.blob-file.file-info.file-type.text"),
+      wrapperClassName: "min-w-0 grid-cols-1",
+      children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FieldBody, { childrenClassName: "min-w-0", children: /* @__PURE__ */ jsx("p", { className: "mx-auto truncate", children: t(
+          `resources.file.file-type.${fileType.toLowerCase()}.text`
+        ) }) }) }),
+        mimeType && /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: mimeType }) })
+      ] })
+    }
+  );
+}
+
+export { FileType };

package/dist/src/cms/client/interfaces/components/ui/features/file/file-picker/file-picker-container.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import 'mime-types';
 import 'sitero-domain';
 import 'react';
@@ -7,7 +7,6 @@ import 'ua-parser-js';
 import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../../shared/utils/cn.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../../../shadcn/badge.js';
 import '../../../../shadcn/button.js';
@@ -34,47 +33,53 @@ function FilePickerContainer({
   isDragOver,
   setIsDragOver,
   processFiles,
-  // ui states
   isLoading = false,
   isDisabled = false,
   isDisplay = false,
-  // base
-  className = "",
-  children
+  className,
+  children,
+  buttonProps
 }) {
-  const handleDrop = (e) => {
-    e.preventDefault();
-    setIsDragOver(false);
-    if (e.dataTransfer.files) void processFiles(e.dataTransfer.files);
-  };
-  return /* @__PURE__ */ jsx(
+  const blocked = isLoading || isDisabled || isDisplay;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        className,
-        "relative",
-        "flex-center",
-        "overflow-hidden",
-        "rounded-xl",
-        "bg-secondary",
-        "border-dashed",
-        !isDisplay && "cursor-pointer",
-        "transition",
+        "bg-secondary relative flex min-w-0 flex-col overflow-hidden rounded-xl",
         isDragOver && "opacity-50",
-        hasSingleFile || isLoading ? "border-0" : "border-4 hover:opacity-50",
-        (isDisabled || isLoading) && "pointer-events-none"
+        className
       ),
-      onClick: () => inputRef.current && inputRef.current.click(),
-      onDrop: handleDrop,
-      onDragOver: (e) => {
-        e.preventDefault();
-        setIsDragOver(true);
+      "aria-busy": isLoading,
+      onDrop: (event) => {
+        event.preventDefault();
+        setIsDragOver(false);
+        if (!blocked) void processFiles(event.dataTransfer.files);
+      },
+      onDragOver: (event) => {
+        event.preventDefault();
+        if (!blocked) setIsDragOver(true);
       },
       onDragLeave: () => setIsDragOver(false),
-      children: isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-16" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        !hasSingleFile && /* @__PURE__ */ jsx("div", { className: "absolute size-full", children: /* @__PURE__ */ jsx(FilePickerPlaceholder, {}) }),
-        children
-      ] })
+      children: [
+        children,
+        !isDisplay && !hasSingleFile && /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...buttonProps,
+            type: "button",
+            disabled: blocked,
+            onClick: () => {
+              if (!blocked) inputRef.current?.click();
+            },
+            className: cn(
+              "flex-center focus-visible:ring-ring min-h-10 w-full focus-visible:ring-2 disabled:opacity-50",
+              "absolute inset-0 rounded-xl border-4 border-dashed"
+            ),
+            children: /* @__PURE__ */ jsx(FilePickerPlaceholder, {})
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx("div", { className: "flex-center bg-background/50 pointer-events-none absolute inset-0", children: /* @__PURE__ */ jsx(Spinner, { className: "size-16" }) })
+      ]
     }
   );
 }

package/dist/src/cms/client/interfaces/components/ui/features/file/file-picker/file-picker-placeholder.js

@@ -8,7 +8,6 @@ import 'ua-parser-js';
 import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../../shared/utils/cn.js';
-import 'zod';
 
 function FilePickerPlaceholder() {
   const { t } = useTranslator();

package/dist/src/cms/client/interfaces/components/ui/features/file/file-picker/file-picker.js

@@ -1,6 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState } from 'react';
+import { useRef, useState, createElement } from 'react';
+import { useTranslator } from 'intor/react';
+import { MousePointerClick, X } from 'lucide-react';
+import { toast } from 'sonner';
 import 'mime-types';
 import 'sitero-domain';
 import { getMediaInfo } from '../../../../../../../../shared/blob-file/get-media-info/get-media-info.js';
@@ -8,12 +11,33 @@ import 'ua-parser-js';
 import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../../shared/utils/cn.js';
-import 'zod';
+import { ActionButton } from '../../../buttons/action-button.js';
+import 'next/link';
+import '@radix-ui/react-avatar';
+import '../../../../shadcn/badge.js';
+import '../../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'next/navigation';
+import '../../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../../constants/cms-locale.js';
+import { getLocalFileError, fileFingerprint, appendUniqueFiles } from '../local-files.js';
 import { FilePickerContainer } from './file-picker-container.js';
 
 function createFilePicker({
   FileInfo,
-  FilePreview
+  FilePreview,
+  maxSize
 }) {
   return function FilePicker({
     // [File] (Prisma Model)
@@ -30,6 +54,9 @@ function createFilePicker({
     className = "",
     ...props
   }) {
+    const { t } = useTranslator();
+    const busy = useRef(false);
+    const [isReading, setIsReading] = useState(false);
     const inputRef = useRef(null);
     const [isDragOver, setIsDragOver] = useState(false);
     const [resetKey, setResetKey] = useState(0);
@@ -38,75 +65,154 @@ function createFilePicker({
     const hasSingleBlobFile = !isMultiple && fieldValue;
     const hasSingleFile = Boolean(hasSingleBlobFile || file);
     const processFiles = async (files) => {
-      if (!files || files.length === 0 || !setFormData || !fieldName) return;
-      const filesWithInfo = await Promise.all(
-        [...files].map(async (file2) => {
-          const mediaInfo = await getMediaInfo(file2).catch(() => ({
-            width: null,
-            height: null,
-            duration: null
-          }));
-          return Object.assign(file2, {
-            id: Math.random().toString(36).slice(2),
-            width: mediaInfo.width,
-            height: mediaInfo.height,
-            duration: mediaInfo.duration
-          });
+      if (busy.current || isDisabled || isLoading || isDisplay || props.disabled || !files.length || !setFormData || !fieldName)
+        return;
+      if (!isMultiple && files.length > 1) {
+        toast.error(t("ui.blob-file.status.single-only.text"));
+        return;
+      }
+      const seen = new Set(isMultiple ? fieldValue.map(fileFingerprint) : []);
+      const candidates = [...files].filter((file2) => {
+        const key = fileFingerprint(file2);
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      if (candidates.length < files.length)
+        toast.info(t("ui.blob-file.status.duplicates.text"));
+      const added = candidates.map(
+        (file2) => Object.assign(file2, {
+          id: crypto.randomUUID(),
+          width: null,
+          height: null,
+          duration: null,
+          metadataError: false,
+          isReadingMetadata: true
         })
       );
-      if (isMultiple) {
-        setFormData((p) => ({ ...p, [fieldName]: [...filesWithInfo] }));
-      } else {
-        setFormData((p) => ({ ...p, [fieldName]: filesWithInfo[0] }));
+      if (!added.length) return;
+      busy.current = true;
+      setIsReading(true);
+      setFormData((previous) => ({
+        ...previous,
+        [fieldName]: isMultiple ? appendUniqueFiles(previous[fieldName], added) : added[0]
+      }));
+      try {
+        await Promise.all(
+          added.map(async (file2) => {
+            const info = getLocalFileError(file2, maxSize, props.accept) ? {} : await getMediaInfo(file2);
+            Object.assign(file2, info, { isReadingMetadata: false });
+            setFormData((previous) => ({
+              ...previous,
+              [fieldName]: isMultiple ? [...previous[fieldName]] : previous[fieldName]
+            }));
+          })
+        );
+      } finally {
+        busy.current = false;
+        setIsReading(false);
       }
     };
-    return /* @__PURE__ */ jsxs("div", { className: cn(className, "flex lg:w-fit"), children: [
-      /* @__PURE__ */ jsxs(
-        FilePickerContainer,
-        {
-          inputRef,
-          hasSingleFile,
-          isDragOver,
-          setIsDragOver,
-          processFiles,
-          isLoading,
-          isDisabled,
-          isDisplay,
-          className: cn(
-            "max-h-[600px] max-w-[600px] lg:min-h-[300px] lg:min-w-[300px]",
-            "max-lg:min-h-[180px] max-lg:min-w-[180px]",
-            "max-lg:flex-1",
-            className
-          ),
-          children: [
-            hasSingleFile && /* @__PURE__ */ jsx(
-              FilePreview,
-              {
-                blobFile: fieldValue,
-                fileKey: file?.key ?? ""
-              }
+    const error = hasSingleBlobFile ? getLocalFileError(hasSingleBlobFile, maxSize, props.accept) : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-2 lg:w-fit", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          FilePickerContainer,
+          {
+            inputRef,
+            hasSingleFile,
+            isDragOver,
+            setIsDragOver,
+            processFiles,
+            buttonProps: {
+              id: props.id,
+              "aria-describedby": props["aria-describedby"],
+              "aria-invalid": Boolean(error) || props["aria-invalid"],
+              "aria-required": props["aria-required"],
+              "aria-labelledby": props["aria-labelledby"]
+            },
+            isLoading,
+            isDisabled: isDisabled || props.disabled || isReading,
+            isDisplay,
+            className: cn(
+              "max-h-[600px] max-w-[600px] lg:min-h-[320px] lg:min-w-[320px]",
+              "max-lg:min-h-[180px] max-lg:min-w-[180px]",
+              "max-lg:flex-1",
+              className
             ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "file",
-                multiple: isMultiple,
-                hidden: true,
-                disabled: isDisabled || isLoading || isDisplay,
-                onChange: (e) => {
-                  if (!e.target.files) return;
-                  void processFiles(e.target.files);
-                  setResetKey((p) => p + 1);
-                },
-                ...props
-              },
-              resetKey
+            children: [
+              hasSingleFile && /* @__PURE__ */ jsx(
+                FilePreview,
+                {
+                  blobFile: fieldValue,
+                  fileKey: file?.key ?? ""
+                }
+              ),
+              /* @__PURE__ */ createElement(
+                "input",
+                {
+                  ...props,
+                  id: void 0,
+                  key: resetKey,
+                  ref: inputRef,
+                  type: "file",
+                  multiple: isMultiple,
+                  hidden: true,
+                  disabled: isDisabled || props.disabled || isLoading || isReading || isDisplay,
+                  onChange: (e) => {
+                    if (!e.target.files) return;
+                    void processFiles(e.target.files);
+                    setResetKey((p) => p + 1);
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        hasSingleFile && /* @__PURE__ */ jsx(FileInfo, { file: fieldValue || file })
+      ] }),
+      hasSingleFile && !isDisplay && /* @__PURE__ */ jsxs("div", { className: "flex w-full gap-2", children: [
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            id: props.id,
+            "aria-describedby": props["aria-describedby"],
+            "aria-invalid": Boolean(error) || props["aria-invalid"],
+            "aria-required": props["aria-required"],
+            "aria-labelledby": props["aria-labelledby"],
+            variant: "outline",
+            icon: MousePointerClick,
+            isDisabled: isDisabled || props.disabled || isLoading || isReading,
+            className: "text-muted-foreground max-w-48 min-w-0 flex-1 justify-start",
+            onClick: () => inputRef.current?.click(),
+            children: t("ui.blob-file.file-picker.select-file.text")
+          }
+        ),
+        hasSingleBlobFile && /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            variant: "outline",
+            icon: X,
+            isDisabled: isDisabled || props.disabled || isLoading || isReading,
+            onClick: () => {
+              if (setFormData && fieldName)
+                setFormData((previous) => ({
+                  ...previous,
+                  [fieldName]: void 0
+                }));
+            },
+            className: "max-w-48 min-w-0 flex-1 justify-start",
+            children: t(
+              file ? "ui.blob-file.status.cancel-replacement.text" : "ui.blob-file.status.remove.text"
             )
-          ]
-        }
-      ),
-      hasSingleFile && /* @__PURE__ */ jsx(FileInfo, { file: fieldValue || file })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "w-full text-sm", "aria-live": "polite", children: [
+        error && /* @__PURE__ */ jsx("p", { className: "text-destructive", children: t(`ui.blob-file.status.${error}.text`) }),
+        isReading && /* @__PURE__ */ jsx("p", { children: t("ui.blob-file.status.reading.text") }),
+        hasSingleBlobFile && hasSingleBlobFile.metadataError && /* @__PURE__ */ jsx("p", { children: t("ui.blob-file.status.media-warning.text") })
+      ] })
     ] });
   };
 }