@yimingliao/cms 0.0.136 → 0.0.138

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

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Upload } from 'lucide-react';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import 'next/link';
+import '../../../../../../../constants/paths/auth.js';
+import '../../../../../../../constants/paths/main.js';
+import '../../../../../../../constants/paths/resources.js';
+import '../../../../../../../constants/redirect-paths.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 '@radix-ui/react-dropdown-menu';
+import '../../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import 'mime-types';
+import { Badge } from '../../../display/badge.js';
+
+function FilePickerPlaceholder() {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative",
+        "size-full",
+        "flex-center flex-col gap-4",
+        "text-sm"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Upload, {}),
+        /* @__PURE__ */ jsx(Badge, { children: t("ui.blob-file.file-picker.select-file.text") }),
+        /* @__PURE__ */ jsx("p", { className: "opacity-50", children: t("ui.blob-file.file-picker.drag-hint.text") })
+      ]
+    }
+  );
+}
+
+export { FilePickerPlaceholder };

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

@@ -0,0 +1,109 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import 'mime-types';
+import { getMediaInfo } from '../../../../../../../shared/blob-file/get-media-info/get-media-info.js';
+import 'ua-parser-js';
+import { cn } from '../../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { FilePickerContainer } from './file-picker-container.js';
+
+function createFilePicker({
+  FileInfo,
+  FilePreview
+}) {
+  return function FilePicker({
+    // [File] (Prisma Model)
+    file,
+    // form context
+    fieldName,
+    formData,
+    setFormData,
+    // ui states
+    isLoading = false,
+    isDisabled = false,
+    isDisplay = false,
+    // base
+    className = "",
+    ...props
+  }) {
+    const inputRef = useRef(null);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [resetKey, setResetKey] = useState(0);
+    const fieldValue = formData?.[fieldName ?? ""];
+    const isMultiple = Array.isArray(fieldValue);
+    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: crypto.randomUUID(),
+            width: mediaInfo.width,
+            height: mediaInfo.height,
+            duration: mediaInfo.duration
+          });
+        })
+      );
+      if (isMultiple) {
+        setFormData((p) => ({ ...p, [fieldName]: [...filesWithInfo] }));
+      } else {
+        setFormData((p) => ({ ...p, [fieldName]: filesWithInfo[0] }));
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn(className, "flex w-fit"), children: [
+      /* @__PURE__ */ jsxs(
+        FilePickerContainer,
+        {
+          inputRef,
+          hasSingleFile,
+          isDragOver,
+          setIsDragOver,
+          processFiles,
+          isLoading,
+          isDisabled,
+          isDisplay,
+          className: cn(
+            className,
+            "max-h-[600px] min-h-[300px] max-w-[600px] min-w-[300px]"
+          ),
+          children: [
+            hasSingleFile && /* @__PURE__ */ jsx(
+              FilePreview,
+              {
+                blobFile: fieldValue,
+                fileKey: file?.key ?? ""
+              }
+            ),
+            /* @__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
+            )
+          ]
+        }
+      ),
+      hasSingleFile && /* @__PURE__ */ jsx(FileInfo, { file: fieldValue || file })
+    ] });
+  };
+}
+
+export { createFilePicker };

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

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { PanelLeftClose, PanelLeftOpen, CircleX } from 'lucide-react';
+import { useState } from 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { Button } from '../../../buttons/button.js';
+
+function createFilePreviewList({
+  FileInfo,
+  FilePreview,
+  maxSize
+}) {
+  return function FilePreviewList({
+    // Form Data
+    fieldName,
+    formData,
+    setFormData,
+    // Processing States
+    isDisabled = false,
+    // Base
+    className
+  }) {
+    const { t } = useTranslator();
+    const [isExpand, setIsExpand] = useState(false);
+    const raw = formData?.[fieldName ?? ""];
+    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,
+        {
+          variant: "outline",
+          icon: isExpand ? PanelLeftClose : PanelLeftOpen,
+          onClick: () => setIsExpand((prev) => !prev),
+          className: "w-fit text-sm",
+          children: t("ui.blob-file.file-preview-list.file-details.text")
+        }
+      ) : /* @__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(
+                "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"
+              ),
+              children: /* @__PURE__ */ jsx(CircleX, { className: "stroke-2" })
+            }
+          )
+        ] }, blobFile.id);
+      }) })
+    ] });
+  };
+}
+
+export { createFilePreviewList };

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

@@ -0,0 +1,40 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+
+function FilePreviewMeta({
+  width,
+  height,
+  duration
+}) {
+  if (!(width || height) && !duration) return;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "flex gap-2",
+        "rounded",
+        "px-2 py-1",
+        "text-xs font-[500] text-gray-100",
+        "bg-gray-500/50 backdrop-blur-md",
+        "truncate"
+      ),
+      children: [
+        width ?? "",
+        " x ",
+        height ?? "",
+        duration ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "my-auto h-4 w-px bg-gray-300" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            duration.toFixed(2),
+            " ms"
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+export { FilePreviewMeta };

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

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '../../../../../../../constants/paths/auth.js';
+import '../../../../../../../constants/paths/main.js';
+import '../../../../../../../constants/paths/resources.js';
+import '../../../../../../../constants/redirect-paths.js';
+import { IMAGE_EXTENSIONS, VIDEO_EXTENSIONS } from '../../../../../../../constants/file.js';
+import 'mime-types';
+import { joinUrl } from '../../../../../../../shared/utils/join-url.js';
+import 'ua-parser-js';
+import { cn } from '../../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+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-select';
+import '@radix-ui/react-separator';
+import '../../../../shadcn/sidebar.js';
+import { Spinner } from '../../../../shadcn/spinner.js';
+import '@radix-ui/react-tooltip';
+import { FilePreviewMeta } from './file-preview-meta.js';
+
+function createFilePreview({
+  SmartImage,
+  storageUrl
+}) {
+  return function FilePreview({
+    blobFile,
+    fileKey,
+    // Processing States
+    isLoading,
+    // Base
+    className,
+    ...props
+  }) {
+    if (blobFile) fileKey = void 0;
+    const isImage = blobFile ? !!blobFile?.type.startsWith("image") : IMAGE_EXTENSIONS.some((ext) => fileKey?.toLowerCase().endsWith(ext));
+    const isVideo = blobFile ? !!blobFile?.type.startsWith("video") : VIDEO_EXTENSIONS.some((ext) => fileKey?.toLowerCase().endsWith(ext));
+    const [previewUrl, setPreviewUrl] = useState();
+    useEffect(() => {
+      if (!blobFile) return;
+      const url = URL.createObjectURL(blobFile);
+      setPreviewUrl(url);
+      return () => URL.revokeObjectURL(url);
+    }, [blobFile]);
+    if (!blobFile && !fileKey) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group relative size-full",
+          "flex-center",
+          "overflow-hidden",
+          "rounded-xl",
+          "bg-secondary",
+          className
+        ),
+        ...props,
+        children: [
+          isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "size-16" }) : isImage ? /* @__PURE__ */ jsx(
+            SmartImage,
+            {
+              fileKey,
+              src: previewUrl,
+              width: 600,
+              height: 600,
+              fill: false,
+              imageClassName: "group-hover:!object-contain"
+            }
+          ) : isVideo ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              src: previewUrl || joinUrl(storageUrl, fileKey ?? ""),
+              autoPlay: true,
+              loop: true,
+              muted: true,
+              controls: true,
+              className: "h-full w-full object-contain"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "scale-[3]", children: "\u{1F4C4}" }),
+          blobFile ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "max-w-[calc(100%-16px)]",
+                "absolute top-2 right-2",
+                "pointer-events-none"
+                // Prevent hover
+              ),
+              children: /* @__PURE__ */ jsx(
+                FilePreviewMeta,
+                {
+                  width: blobFile.width,
+                  height: blobFile.height,
+                  duration: blobFile.duration
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  };
+}
+
+export { createFilePreview };

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

@@ -0,0 +1,101 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import '../../../../../../constants/paths/auth.js';
+import '../../../../../../constants/paths/main.js';
+import '../../../../../../constants/paths/resources.js';
+import { CACHE_KEYS } from '../../../../../../constants/cache-keys.js';
+import '../../../../../../constants/redirect-paths.js';
+import '../../../../../../domain/resources/admin/constants.js';
+import { SIMPLE_UPLOAD_FOLDER_KEY } from '../../../../../../domain/resources/constants.js';
+import 'mime-types';
+import { getMediaInfo } from '../../../../../../shared/blob-file/get-media-info/get-media-info.js';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { FilePickerContainer } from './file-picker/file-picker-container.js';
+
+function createUploader({
+  useCommand,
+  fileUploadApi,
+  fileCreateAction,
+  buildTranslations,
+  queryClient
+}) {
+  return function Uploader({
+    setPickedItems,
+    // ui states
+    isLoading = false,
+    isDisabled = false,
+    // base
+    className = "",
+    ...props
+  }) {
+    const inputRef = useRef(null);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const { execute: upload, isPending: isPendingUpload } = useCommand(fileUploadApi);
+    const { execute, isPending } = useCommand(
+      (formData) => {
+        return fileCreateAction({ formData });
+      },
+      {
+        onSuccess: (data) => {
+          void queryClient.invalidateQueries({
+            queryKey: [CACHE_KEYS.findListCards("file")]
+          });
+          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],
+        folderKey: SIMPLE_UPLOAD_FOLDER_KEY,
+        folder: null
+      });
+      if (response) {
+        const { name, size, type } = files[0];
+        await execute({
+          ...response,
+          fileMeta: { name, size, type },
+          folderKey: SIMPLE_UPLOAD_FOLDER_KEY,
+          folder: null,
+          width: mediaInfo.width,
+          height: mediaInfo.height,
+          duration: mediaInfo.duration,
+          translations: buildTranslations([
+            { key: "name", value: null },
+            { key: "alt", value: null }
+          ])
+        });
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      FilePickerContainer,
+      {
+        inputRef,
+        isDragOver,
+        setIsDragOver,
+        processFiles,
+        isLoading: isLoading || isPending || isPendingUpload,
+        isDisabled,
+        className: cn("size-64", className),
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "file",
+            ref: inputRef,
+            hidden: true,
+            onChange: (e) => e.target.files && void processFiles(e.target.files),
+            ...props
+          }
+        )
+      }
+    );
+  };
+}
+
+export { createUploader };

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

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { useState, isValidElement, cloneElement } from 'react';
+import 'ua-parser-js';
+import { usePickItems } from '../../../../../applications/form/use-pick-items.js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import { DialogContent, DialogTitle } 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-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import { Button } from '../../buttons/button.js';
+import 'next/link';
+import '../../../../../../constants/paths/auth.js';
+import '../../../../../../constants/paths/main.js';
+import '../../../../../../constants/paths/resources.js';
+import '../../../../../../constants/redirect-paths.js';
+import { FieldBody } from '../../form/field-body.js';
+import { SideFields } from '../../form/containers/side-fields.js';
+import 'mime-types';
+import { ActionButtonsCard } from '../../cards/action-buttons-card.js';
+
+function PickModalBody({
+  // form context
+  fieldName,
+  setFormData,
+  // modal control
+  setIsOpen,
+  // pick
+  pickedItems,
+  setPickedItems,
+  isMultiPick = false,
+  // base
+  itemList,
+  aboveManagementCard
+}) {
+  const { t } = useTranslator();
+  const [itemStates, setItemStates] = useState({
+    count: 0,
+    isFetching: false,
+    items: []
+  });
+  const { pick, multiPick } = usePickItems({
+    ...setPickedItems && { setPickedItems }
+  });
+  const handleClick = (item) => isMultiPick ? multiPick(item) : pick(item);
+  const itemListElement = itemList;
+  const aboveManagementCardElement = aboveManagementCard;
+  return /* @__PURE__ */ jsxs(DialogContent, { className: "container", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Dialog" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-[80svh] w-full gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-auto p-2"), children: isValidElement(itemListElement) && cloneElement(itemListElement, {
+        setItemStates,
+        pickedItems,
+        handleClick
+      }) }),
+      /* @__PURE__ */ jsxs(SideFields, { className: "flex flex-col gap-4", children: [
+        isValidElement(aboveManagementCardElement) && cloneElement(aboveManagementCardElement, {
+          setPickedItems
+        }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(FieldBody, { className: "!w-fit text-sm", children: /* @__PURE__ */ jsx("span", { className: "opacity-50", children: isMultiPick ? t("ui.modal.pick-modal.multiple.text") : t("ui.modal.pick-modal.single.text") }) }),
+          /* @__PURE__ */ jsxs(FieldBody, { className: "flex-1 text-sm", children: [
+            /* @__PURE__ */ jsxs("span", { className: "opacity-50", children: [
+              t("ui.modal.pick-modal.picked.text"),
+              "\uFF1A"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-success font-semibold", children: pickedItems.length ?? 0 })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setPickedItems?.([]), children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("ui.modal.pick-modal.clear.text") }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ActionButtonsCard,
+          {
+            action: "confirm",
+            isInitializing: itemStates.isFetching ?? false,
+            cancelButtonProps: {
+              onClick: () => {
+                setIsOpen(false);
+                setPickedItems?.([]);
+              }
+            },
+            actionButtonProps: {
+              onClick: () => {
+                if (setFormData && fieldName) {
+                  setFormData((p) => ({
+                    ...p,
+                    [fieldName]: isMultiPick ? pickedItems : pickedItems[0] ?? null
+                    // Prevent using undefined
+                  }));
+                }
+                setIsOpen(false);
+              }
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export { PickModalBody };