sitero 0.2.0 → 0.3.0

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

@@ -9,11 +9,28 @@ 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 { Button } from '../../../buttons/button.js';
+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 'sonner';
+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 } from '../local-files.js';
 
 function createFilePreviewList({
   FileInfo,
@@ -28,7 +45,9 @@ function createFilePreviewList({
     // Processing States
     isDisabled = false,
     // Base
-    className
+    className,
+    accept,
+    statuses = {}
   }) {
     const { t } = useTranslator();
     const [isExpand, setIsExpand] = useState(false);
@@ -36,7 +55,7 @@ function createFilePreviewList({
     const blobFiles = Array.isArray(raw) ? raw : [];
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), children: [
       blobFiles.length > 0 ? /* @__PURE__ */ jsx(
-        Button,
+        ActionButton,
         {
           variant: "outline",
           icon: isExpand ? PanelLeftClose : PanelLeftOpen,
@@ -46,45 +65,73 @@ function createFilePreviewList({
         }
       ) : /* @__PURE__ */ jsx("p", { className: "text-xs opacity-50", children: t("ui.blob-file.file-preview-list.no-file-selected.text") }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-6", children: blobFiles.map((blobFile) => {
-        const isOversize = blobFile.size > maxSize;
-        return /* @__PURE__ */ jsxs("div", { className: "relative flex", children: [
-          /* @__PURE__ */ jsx(
-            FilePreview,
-            {
-              blobFile,
-              className: cn(
-                "max-lg:size-40! lg:size-60!",
-                isOversize && "border-destructive border-4"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(FileInfo, { file: blobFile, isExpand }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                if (!setFormData || !fieldName) return;
-                setFormData((p) => ({
-                  ...p,
-                  [fieldName]: blobFiles.filter(
-                    (f) => f.id !== blobFile.id
-                  )
-                }));
-              },
-              className: cn(
-                "absolute! top-2 left-2",
-                "z-20",
-                "bg-background text-destructive",
-                "rounded-full",
-                "shadow-xs",
-                "hover:scale-110 active:scale-95",
-                "duration-200",
-                isDisabled && "pointer-events-none"
+        const error = getLocalFileError(blobFile, maxSize, accept);
+        const status = statuses[blobFile.id];
+        const previewStatus = blobFile.isReadingMetadata ? "reading" : status === "uploading" || status === "registering" || status === "success" ? status : void 0;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative flex max-w-full flex-wrap",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative size-40 shrink-0 lg:size-60", children: [
+                /* @__PURE__ */ jsx(
+                  FilePreview,
+                  {
+                    blobFile,
+                    className: cn(error && "border-destructive border-4")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "pointer-events-none absolute inset-x-2 bottom-2 z-10 flex justify-center",
+                      blobFile.type.startsWith("video/") && "bottom-12"
+                    ),
+                    role: "status",
+                    "aria-atomic": "true",
+                    children: previewStatus && /* @__PURE__ */ jsx("span", { className: "max-w-full rounded-md bg-black/70 px-2 py-1 text-center text-xs text-white backdrop-blur-sm", children: t(`ui.blob-file.status.${previewStatus}.text`) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(FileInfo, { file: blobFile, isExpand }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: isDisabled || status === "unknown",
+                  "aria-label": `${t("ui.blob-file.status.remove.text")}: ${blobFile.name}`,
+                  onClick: () => {
+                    if (!setFormData || !fieldName) return;
+                    setFormData((p) => ({
+                      ...p,
+                      [fieldName]: p[fieldName].filter(
+                        (f) => f.id !== blobFile.id
+                      )
+                    }));
+                  },
+                  className: cn(
+                    "absolute! top-2 left-2",
+                    "z-20",
+                    "bg-background text-destructive",
+                    "rounded-full",
+                    "shadow-xs",
+                    "hover:scale-110 active:scale-95",
+                    "duration-200",
+                    isDisabled && "pointer-events-none"
+                  ),
+                  children: /* @__PURE__ */ jsx(CircleX, { className: "stroke-2" })
+                }
               ),
-              children: /* @__PURE__ */ jsx(CircleX, { className: "stroke-2" })
-            }
-          )
-        ] }, blobFile.id);
+              /* @__PURE__ */ jsxs("div", { className: "w-full max-w-60 text-sm", "aria-live": "polite", children: [
+                error && /* @__PURE__ */ jsx("p", { className: "text-destructive", children: t(`ui.blob-file.status.${error}.text`) }),
+                blobFile.metadataError && /* @__PURE__ */ jsx("p", { children: t("ui.blob-file.status.media-warning.text") }),
+                status && !previewStatus && /* @__PURE__ */ jsx("p", { className: "text-destructive", children: t(`ui.blob-file.status.${status}.text`) })
+              ] })
+            ]
+          },
+          blobFile.id
+        );
       }) })
     ] });
   };

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

@@ -6,7 +6,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 FilePreviewMeta({
   width,
@@ -33,7 +32,7 @@ function FilePreviewMeta({
           /* @__PURE__ */ jsx("span", { className: "my-auto h-4 w-px bg-gray-300" }),
           /* @__PURE__ */ jsxs("span", { children: [
             duration.toFixed(2),
-            " ms"
+            " s"
           ] })
         ] }) : null
       ]

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

@@ -11,7 +11,6 @@ import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../../shared/utils/cn.js';
 import { joinUrl } from '../../../../../../../../shared/utils/join-url.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../../../shadcn/badge.js';
 import '../../../../shadcn/button.js';
@@ -73,7 +72,7 @@ function createFilePreview({
             SmartImage,
             {
               fileKey,
-              src: previewUrl,
+              src: blobFile ? previewUrl : void 0,
               width: 600,
               height: 600,
               fill: false,
@@ -82,7 +81,7 @@ function createFilePreview({
           ) : isVideo ? /* @__PURE__ */ jsx(
             "video",
             {
-              src: previewUrl || joinUrl(storageUrl, fileKey ?? ""),
+              src: blobFile ? previewUrl : joinUrl(storageUrl, fileKey ?? ""),
               autoPlay: true,
               loop: true,
               muted: true,

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

@@ -0,0 +1,32 @@
+function getLocalFileError(file, maxSize, accept) {
+  if (file.size === 0) return "empty";
+  if (file.size > maxSize) return "too-large";
+  const patterns = accept?.split(",").map((part) => part.trim().toLowerCase()).filter(Boolean);
+  if (patterns?.length && !patterns.some((pattern) => {
+    if (pattern === "*" || pattern === "*/*") return true;
+    if (pattern.startsWith("."))
+      return file.name.toLowerCase().endsWith(pattern);
+    if (pattern.endsWith("/*"))
+      return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
+    return file.type.toLowerCase() === pattern;
+  }))
+    return "type-not-allowed";
+  return void 0;
+}
+function fileFingerprint(file) {
+  return JSON.stringify([file.name, file.size, file.lastModified, file.type]);
+}
+function appendUniqueFiles(current, incoming) {
+  const seen = new Set(current.map(fileFingerprint));
+  return [
+    ...current,
+    ...incoming.filter((file) => {
+      const key = fileFingerprint(file);
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    })
+  ];
+}
+
+export { appendUniqueFiles, fileFingerprint, getLocalFileError };

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

@@ -0,0 +1,45 @@
+function getRetryableFiles(files, statuses) {
+  return files.filter(
+    (file) => !statuses[file.id] || ["upload-error", "registration-error"].includes(statuses[file.id])
+  );
+}
+async function transferFiles({
+  files,
+  upload,
+  register,
+  update
+}) {
+  let registering = [];
+  update(files, "uploading");
+  try {
+    const response = await upload(files);
+    if (!response) {
+      update(files, "upload-error");
+      return;
+    }
+    update(files, "upload-error");
+    registering = response.uploadResults.map((result2) => files[result2.index]);
+    if (!registering.length) return;
+    update(registering, "registering");
+    const result = await register(response);
+    if (!result) {
+      update(registering, "unknown");
+      return;
+    }
+    const created = new Set(result.created.map((file) => file.key));
+    const failed = new Map(result.failed.map((file) => [file.key, file]));
+    for (const uploaded of response.uploadResults) {
+      update(
+        [files[uploaded.index]],
+        created.has(uploaded.key) ? "success" : failed.get(uploaded.key)?.retryable ? "registration-error" : "unknown"
+      );
+    }
+  } catch {
+    update(
+      registering.length ? registering : files,
+      registering.length ? "unknown" : "upload-error"
+    );
+  }
+}
+
+export { getRetryableFiles, transferFiles };

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

@@ -1,25 +1,30 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import 'mime-types';
+import 'sitero-domain';
+import { getMediaInfo } from '../../../../../../../shared/blob-file/get-media-info/get-media-info.js';
 import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { useCommand } from '../../../../../../../shared/client/react-query/use-command.js';
-import 'mime-types';
-import 'sitero-domain';
-import { getMediaInfo } from '../../../../../../../shared/blob-file/get-media-info/get-media-info.js';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 import { FilePickerContainer } from './file-picker/file-picker-container.js';
+import { getLocalFileError } from './local-files.js';
 
 function createUploader({
   fileUploadApi,
   fileCreateAction,
+  fileFindDetailAction,
   buildTranslations,
-  queryClient
+  queryClient,
+  maxSize
 }) {
   return function Uploader({
     setPickedItems,
+    onItemsCreated,
     // ui states
     isLoading = false,
     isDisabled = false,
@@ -27,6 +32,9 @@ function createUploader({
     className = "",
     ...props
   }) {
+    const { t } = useTranslator();
+    const busy = useRef(false);
+    const [isProcessing, setIsProcessing] = useState(false);
     const inputRef = useRef(null);
     const [isDragOver, setIsDragOver] = useState(false);
     const { execute: upload, isPending: isPendingUpload } = useCommand(fileUploadApi);
@@ -35,34 +43,69 @@ function createUploader({
         return fileCreateAction({ formData });
       },
       {
-        onSuccess: (data) => {
+        onSuccess: () => {
           void queryClient.invalidateQueries({
             queryKey: ["fileFindListCardsAction"]
           });
-          if (setPickedItems && data) setPickedItems([data.file]);
         },
         clearAll: false
       }
     );
     const processFiles = async (files) => {
-      if (!files || files.length === 0 || !setPickedItems) return;
-      const mediaInfo = await getMediaInfo(files[0]);
-      const response = await upload({
-        blobFile: files[0]
-      });
-      if (response) {
-        const { name, size, type } = files[0];
-        await execute({
-          ...response,
-          fileMeta: { name, size, type },
-          width: mediaInfo.width,
-          height: mediaInfo.height,
-          duration: mediaInfo.duration,
-          translations: buildTranslations([
-            { key: "name", value: null },
-            { key: "alt", value: null }
-          ])
+      if (busy.current || isDisabled || props.disabled || isLoading || !files || files.length === 0 || !(setPickedItems || onItemsCreated))
+        return;
+      if (files.length > 1) {
+        toast.error(t("ui.blob-file.status.single-only.text"));
+        return;
+      }
+      const selectedFile = files[0];
+      const error = getLocalFileError(selectedFile, maxSize, props.accept);
+      if (error) {
+        toast.error(t(`ui.blob-file.status.${error}.text`));
+        return;
+      }
+      busy.current = true;
+      setIsProcessing(true);
+      try {
+        const mediaInfo = await getMediaInfo(selectedFile);
+        if (mediaInfo.metadataError)
+          toast.info(t("ui.blob-file.status.media-warning.text"));
+        const response = await upload({
+          blobFile: selectedFile
         });
+        if (response) {
+          const { name, size, type } = selectedFile;
+          const created = await execute({
+            ...response,
+            fileMeta: { name, size, type },
+            width: mediaInfo.width,
+            height: mediaInfo.height,
+            duration: mediaInfo.duration,
+            translations: buildTranslations([
+              { key: "name", value: null },
+              { key: "alt", value: null }
+            ])
+          });
+          if (!created) {
+            toast.error(t("ui.blob-file.status.unknown.text"));
+          } else if (onItemsCreated) {
+            const detail = await fileFindDetailAction({
+              id: created.file.id
+            }).catch(() => void 0);
+            if (detail?.success) onItemsCreated([detail.data.file]);
+            else
+              toast.info(
+                t("ui.blob-file.status.created-select-from-list.text")
+              );
+          } else {
+            setPickedItems?.([created.file]);
+          }
+        } else {
+          toast.error(t("ui.blob-file.status.upload-error.text"));
+        }
+      } finally {
+        busy.current = false;
+        setIsProcessing(false);
       }
     };
     return /* @__PURE__ */ jsx(
@@ -72,17 +115,22 @@ function createUploader({
         isDragOver,
         setIsDragOver,
         processFiles,
-        isLoading: isLoading || isPending || isPendingUpload,
-        isDisabled,
-        className: cn("size-64", className),
+        isLoading: isLoading || isProcessing || isPending || isPendingUpload,
+        isDisabled: isDisabled || Boolean(props.disabled),
+        className: cn("size-80", className),
         children: /* @__PURE__ */ jsx(
           "input",
           {
+            ...props,
             type: "file",
+            multiple: false,
+            disabled: isDisabled || props.disabled || isLoading || isProcessing,
             ref: inputRef,
             hidden: true,
-            onChange: (e) => e.target.files && void processFiles(e.target.files),
-            ...props
+            onChange: (e) => {
+              if (e.target.files) void processFiles(e.target.files);
+              e.target.value = "";
+            }
           }
         )
       }

package/dist/src/cms/client/interfaces/components/ui/features/pick-modal/pick-dialog.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { useState, useId, useRef } from 'react';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
+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 { Dialog, DialogContent, DialogTitle, DialogDescription } from '../../../shadcn/dialog.js';
+import '@radix-ui/react-dropdown-menu';
+import 'lucide-react';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import { Separator } from '../../../shadcn/separator.js';
+import '@radix-ui/react-dialog';
+import '../../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { ActionButton } from '../../buttons/action-button.js';
+import 'next/link';
+import 'next/navigation';
+import '../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../constants/cms-locale.js';
+import { ActionButtonsCard } from '../../cards/action-buttons-card.js';
+import { FieldBody } from '../../form/field-body.js';
+import '../../inputs/input.js';
+import '../../inputs/textarea.js';
+
+function PickDialog(props) {
+  return /* @__PURE__ */ jsxs(Dialog, { open: props.open, onOpenChange: props.onOpenChange, children: [
+    props.children,
+    props.open && /* @__PURE__ */ jsx(PickDialogSession, { ...props })
+  ] });
+}
+function PickDialogSession(props) {
+  const { t } = useTranslator();
+  const [pickedItems, setPickedItems] = useState(
+    () => props.multiple ? [...props.value] : props.value ? [props.value] : []
+  );
+  const [isFetching, onLoadingChange] = useState(false);
+  const descriptionId = useId();
+  const confirmed = useRef(false);
+  const blocked = props.disabled || isFetching;
+  const handleClick = (item) => {
+    if (props.disabled) return;
+    setPickedItems((previous) => {
+      if (!item) return props.multiple ? previous : [];
+      if (previous.some((picked) => picked.id === item.id)) {
+        return previous.filter((picked) => picked.id !== item.id);
+      }
+      return props.multiple ? [...previous, item] : [item];
+    });
+  };
+  const onItemsCreated = (items) => {
+    if (props.disabled) return;
+    setPickedItems(
+      (previous) => props.multiple ? [
+        ...new Map(
+          [...previous, ...items].map((item) => [item.id, item])
+        ).values()
+      ] : items.slice(0, 1)
+    );
+  };
+  const confirm = () => {
+    if (blocked || confirmed.current) return;
+    confirmed.current = true;
+    try {
+      if (props.multiple) props.onConfirm([...pickedItems]);
+      else props.onConfirm(pickedItems[0] ?? null);
+      props.onOpenChange(false);
+    } catch (error) {
+      confirmed.current = false;
+      throw error;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "max-h-[calc(100svh-24px)] w-[calc(100%-24px)] max-w-[calc(100%-24px)] min-w-0 overflow-y-auto max-lg:px-0 max-lg:pb-0",
+      onCloseAutoFocus: props.onCloseAutoFocus,
+      onClick: (event) => event.stopPropagation(),
+      "aria-describedby": props.description ? descriptionId : void 0,
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "min-w-0 px-3 wrap-break-word", children: props.title }),
+        props.description && /* @__PURE__ */ jsx(DialogDescription, { id: descriptionId, className: "px-3", children: props.description }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-[80svh] min-h-0 w-full min-w-0 gap-4 max-lg:flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 flex-1 overflow-auto px-3 max-lg:w-full lg:w-80", children: /* @__PURE__ */ jsx(
+            "fieldset",
+            {
+              disabled: props.disabled,
+              className: "h-full min-h-0 w-full min-w-0",
+              children: props.renderList({ pickedItems, handleClick, onLoadingChange })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }) }),
+          /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(Separator, { orientation: "horizontal" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 shrink-0 flex-col gap-3 lg:w-80", children: [
+            props.renderManagement && /* @__PURE__ */ jsx("fieldset", { disabled: props.disabled, className: "max-lg:hidden", children: props.renderManagement({
+              onItemsCreated,
+              setPickedItems: (next) => {
+                if (props.disabled) return;
+                setPickedItems((previous) => {
+                  const items = typeof next === "function" ? next(previous) : next;
+                  return props.multiple ? [
+                    ...new Map(
+                      items.map((item) => [item.id, item])
+                    ).values()
+                  ] : items.slice(0, 1);
+                });
+              }
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap gap-3 max-lg:px-3", children: [
+              /* @__PURE__ */ jsx(FieldBody, { className: "w-fit! text-sm", children: t(
+                props.multiple ? "ui.pick-modal.multiple.text" : "ui.pick-modal.single.text"
+              ) }),
+              /* @__PURE__ */ jsxs(FieldBody, { className: "flex-1 text-sm", children: [
+                t("ui.pick-modal.picked.text"),
+                "\uFF1A",
+                pickedItems.length
+              ] }),
+              /* @__PURE__ */ jsx(
+                ActionButton,
+                {
+                  variant: "outline",
+                  isDisabled: props.disabled || !pickedItems.length,
+                  onClick: () => setPickedItems([]),
+                  children: t("ui.pick-modal.clear.text")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              ActionButtonsCard,
+              {
+                action: "confirm",
+                actionButtonProps: {
+                  onClick: confirm,
+                  isDisabled: !!blocked,
+                  className: "max-lg:min-w-0 max-lg:flex-1 max-w-32 lg:min-w-32"
+                },
+                cancelButtonProps: {
+                  onClick: () => props.onOpenChange(false),
+                  className: "max-lg:min-w-0 max-lg:flex-1 max-w-32 lg:min-w-32"
+                }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { PickDialog };