@yimingliao/cms 0.0.146 → 0.0.148

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

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Archive } from 'lucide-react';
+import { useState } from 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { ExpandBar } from './expand-bar.js';
+import { ExpandableListContent } from './expandable-list-content.js';
+
+function ExpandableList({
+  item,
+  items = [],
+  isDisabled,
+  isUnique
+}) {
+  const [isExpand, setIsExpand] = useState(false);
+  const [isListOverFlow, setIsListOverFlow] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        if (!isListOverFlow) return;
+        setIsExpand((prev) => !prev);
+      },
+      className: cn(
+        "group flex w-full flex-col gap-1 text-xs text-gray-400",
+        !isListOverFlow && "pointer-events-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          ExpandableListContent,
+          {
+            item,
+            items,
+            isExpand,
+            isDisabled,
+            isUnique,
+            onOverflowChange: setIsListOverFlow,
+            children: [
+              /* @__PURE__ */ jsx(Archive, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: ":" })
+            ]
+          }
+        ),
+        isListOverFlow && /* @__PURE__ */ jsx(ExpandBar, { isExpand })
+      ]
+    }
+  );
+}
+
+export { ExpandableList };

package/dist/src/client/interfaces/components/ui/features/external-link.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { SquareArrowOutUpRight } from 'lucide-react';
+import { Button } from '../buttons/button.js';
+import 'intor/react';
+import 'next/navigation';
+import 'react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+
+function ExternalLink({ href = "" }) {
+  return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", href, openNewTab: true, children: /* @__PURE__ */ jsx(SquareArrowOutUpRight, {}) });
+}
+
+export { ExternalLink };

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

@@ -0,0 +1,118 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { SquareArrowOutUpRight } from 'lucide-react';
+import Link from 'next/link';
+import '../../../../../../../constants/paths/auth.js';
+import '../../../../../../../constants/paths/main.js';
+import '../../../../../../../constants/paths/resources.js';
+import { NEW_TAB_REL, NEW_TAB_TARGET } from '../../../../../../../constants/anchor.js';
+import '../../../../../../../constants/redirect-paths.js';
+import { mimeToExtension } from '../../../../../../../shared/blob-file/mime-to-extension.js';
+import { classifyFileType } from '../../../../../../../shared/blob-file/classify-file-type.js';
+import { formatFileSize } from '../../../../../../../shared/blob-file/format-file-size.js';
+import 'mime-types';
+import { joinUrl } from '../../../../../../../shared/utils/join-url.js';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { Button } from '../../../buttons/button.js';
+import { Field } from '../../../form/field.js';
+import { FieldBody } from '../../../form/field-body.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 { FileName } from './file-name.js';
+
+function createFileInfo({
+  maxSize,
+  storageUrl
+}) {
+  return function FileInfo({
+    file,
+    isExpand = true
+    // Use in [File] Batch Create
+  }) {
+    const { t } = useTranslator();
+    const isBlobFile = file instanceof Blob;
+    const isOversize = Number(file.size) > maxSize;
+    const fileType = isBlobFile ? classifyFileType(file.type, mimeToExtension(file.type)).toLowerCase() : file.type.toLowerCase();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-4",
+          "overflow-hidden",
+          isExpand ? "w-28" : "w-0",
+          isExpand ? "ml-4" : "ml-0",
+          "transition-[width,margin]"
+        ),
+        children: [
+          !isBlobFile && file && /* @__PURE__ */ jsx(Field, { label: t("ui.blob-file.file-info.file-link.text"), children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "group p-0", children: /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: joinUrl(storageUrl, file.key),
+              target: NEW_TAB_TARGET,
+              rel: NEW_TAB_REL,
+              className: "group flex-center size-full",
+              children: /* @__PURE__ */ jsx(SquareArrowOutUpRight, { className: "transition group-hover:scale-110" })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(FileName, { fileName: isBlobFile ? file.name : file.originalName }),
+          /* @__PURE__ */ jsx(Field, { label: t("ui.blob-file.file-info.file-type.text"), children: /* @__PURE__ */ jsx(FieldBody, { children: /* @__PURE__ */ jsx("p", { className: "mx-auto truncate", children: t(`resources.file.file-type.${fileType}.text`) }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(Field, { label: t("ui.blob-file.file-info.file-size.text"), children: /* @__PURE__ */ jsx(FieldBody, { children: /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mx-auto truncate",
+                  isOversize && "text-destructive"
+                ),
+                children: formatFileSize(file.size)
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "h-1 w-28",
+                  "rounded-full",
+                  "bg-white dark:bg-gray-200",
+                  "transition"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full rounded-full",
+                      "overflow-hidden",
+                      "transition"
+                    ),
+                    style: {
+                      width: `${Math.min(file.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 { createFileInfo };

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

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import '@radix-ui/react-avatar';
+import 'react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+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 { Tooltip, TooltipTrigger, TooltipContent } from '../../../../shadcn/tooltip.js';
+import { Field } from '../../../form/field.js';
+import { FieldBody } from '../../../form/field-body.js';
+import 'mime-types';
+
+const splitFileName = (fileName) => {
+  const lastDotIndex = fileName.lastIndexOf(".");
+  if (lastDotIndex <= 0) return { name: fileName, ext: "" };
+  return {
+    name: fileName.slice(0, lastDotIndex),
+    ext: fileName.slice(lastDotIndex + 1)
+  };
+};
+function FileName({ fileName }) {
+  const { t } = useTranslator();
+  const { name, ext } = splitFileName(fileName);
+  return /* @__PURE__ */ jsx(Field, { label: t("ui.blob-file.file-info.file-name.text"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FieldBody, { children: /* @__PURE__ */ jsxs("p", { className: "mx-auto flex truncate", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
+      ext && /* @__PURE__ */ jsxs("span", { children: [
+        ".",
+        ext
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: fileName }) })
+  ] }) });
+}
+
+export { FileName };

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

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react';
+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 { FilePickerPlaceholder } from './file-picker-placeholder.js';
+
+function FilePickerContainer({
+  inputRef,
+  hasSingleFile = false,
+  isDragOver,
+  setIsDragOver,
+  processFiles,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isDisplay = false,
+  // base
+  className = "",
+  children
+}) {
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (e.dataTransfer.files) void processFiles(e.dataTransfer.files);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        className,
+        "relative",
+        "flex-center",
+        "overflow-hidden",
+        "rounded-xl",
+        "bg-secondary",
+        "border-dashed",
+        !isDisplay && "cursor-pointer",
+        "transition",
+        isDragOver && "opacity-50",
+        hasSingleFile || isLoading ? "border-0" : "border-4 hover:opacity-50",
+        (isDisabled || isLoading) && "pointer-events-none"
+      ),
+      onClick: () => inputRef.current && inputRef.current.click(),
+      onDrop: handleDrop,
+      onDragOver: (e) => {
+        e.preventDefault();
+        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
+      ] })
+    }
+  );
+}
+
+export { FilePickerContainer };

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 };