@yimingliao/cms 0.0.146 → 0.0.147

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

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

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { MousePointerClick } from 'lucide-react';
+import { useState, Children, isValidElement, cloneElement } from '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 { DialogTrigger } from '../../../shadcn/dialog.js';
+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 '@radix-ui/react-dialog';
+import '../../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import { Button } from '../../buttons/button.js';
+
+function PickModalTrigger({
+  // form context
+  fieldName,
+  formData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  // modal control
+  setIsOpen,
+  // pick
+  isMultiPick = false,
+  setPickedItems,
+  // base
+  pickedDisplay
+  // Can be array
+}) {
+  const { t } = useTranslator();
+  const [isHovered, setIsHovered] = useState(false);
+  const fieldValue = formData?.[fieldName ?? ""];
+  const isArray = Array.isArray(fieldValue);
+  const hasPickedItems = !isMultiPick && fieldValue || isMultiPick && isArray && fieldValue?.length > 0;
+  const handleClick = () => {
+    if (isDisabled || isLoading) return;
+    setIsOpen?.(true);
+    setPickedItems(isArray ? fieldValue : fieldValue ? [fieldValue] : []);
+  };
+  return /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, className: cn(isDisabled && "pointer-events-none"), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("h-max w-full justify-start"),
+      onClick: handleClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: hasPickedItems ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          className: cn(
+            "flex h-max w-full flex-wrap justify-start gap-3 px-3",
+            !isHovered && "hover:bg-background dark:hover:bg-input/30"
+          ),
+          children: Children.toArray(pickedDisplay).map((child, i) => {
+            if (isValidElement(child)) {
+              const props = { ...child.props, openNewTab: true };
+              child = cloneElement(child, props);
+            }
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                onMouseEnter: () => setIsHovered(false),
+                onMouseLeave: () => setIsHovered(true),
+                children: child
+              },
+              i
+            );
+          })
+        }
+      ) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          isLoading,
+          isDisabled,
+          className: "text-muted-foreground w-full justify-start",
+          children: [
+            /* @__PURE__ */ jsx(MousePointerClick, {}),
+            /* @__PURE__ */ jsx("span", { children: t("ui.modal.pick-modal.pick.text") })
+          ]
+        }
+      )
+    }
+  ) });
+}
+
+export { PickModalTrigger };

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

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import '@radix-ui/react-avatar';
+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 { Dialog } 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 { PickModalBody } from './pick-modal-body.js';
+import { PickModalTrigger } from './pick-modal-trigger.js';
+
+function PickModal({
+  // form context
+  fieldName,
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  // External Control (use in CKEditor)
+  isOpen: externalIsOpen,
+  setIsOpen: externalSetIsOpen,
+  // pick
+  isMultiPick = false,
+  // base
+  pickedDisplay,
+  // Can be array
+  itemList,
+  aboveManagementCard
+}) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = externalIsOpen ?? internalIsOpen;
+  const setIsOpen = externalSetIsOpen ?? setInternalIsOpen;
+  const [pickedItems, setPickedItems] = useState([]);
+  return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(
+      PickModalTrigger,
+      {
+        fieldName,
+        formData,
+        isLoading,
+        isDisabled,
+        setIsOpen,
+        isMultiPick,
+        setPickedItems,
+        pickedDisplay
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+      PickModalBody,
+      {
+        setIsOpen,
+        fieldName,
+        setFormData,
+        pickedItems,
+        setPickedItems,
+        isMultiPick,
+        itemList,
+        aboveManagementCard
+      }
+    ) })
+  ] });
+}
+
+export { PickModal };

package/dist/src/client/interfaces/components/ui/features/smart-image.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import Image from 'next/image';
+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';
+
+const BREAKPOINT = 1024;
+function createSmartImage(storageUrl) {
+  return function SmartImage({
+    // next/image
+    sizes,
+    fill = true,
+    placeholder,
+    // image
+    src,
+    fileKey,
+    alt = "",
+    width,
+    height,
+    // base
+    className = "",
+    imageClassName = "",
+    ...props
+  }) {
+    const isFixedSize = width !== void 0 && height !== void 0;
+    const resolvedSizes = typeof sizes === "string" ? sizes : sizes ? `(max-width: ${BREAKPOINT}px) ${sizes.mobile ?? sizes.desktop}, ${sizes.desktop}` : void 0;
+    const resolvedPlaceholder = placeholder ?? (typeof src === "object" ? "blur" : void 0);
+    const resolvedSrc = src ?? (fileKey ? joinUrl(storageUrl, fileKey) : void 0);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          fill ? "relative size-full" : "relative inline-block",
+          className
+        ),
+        children: resolvedSrc && /* @__PURE__ */ jsx(
+          Image,
+          {
+            sizes: resolvedSizes,
+            fill: !isFixedSize && fill,
+            ...isFixedSize && { width, height },
+            ...resolvedPlaceholder && { placeholder: resolvedPlaceholder },
+            src: resolvedSrc,
+            alt,
+            className: cn("size-full object-cover", imageClassName),
+            ...props
+          }
+        )
+      }
+    );
+  };
+}
+
+export { createSmartImage };

package/dist/src/client/interfaces/components/ui/features/tick.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { CircleCheck } from 'lucide-react';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+
+function Tick({ isPicked = false, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        className,
+        "z-20",
+        "bg-background text-success",
+        "rounded-full",
+        "shadow-xs",
+        isPicked ? "opacity-100" : "scale-0 opacity-0",
+        "pointer-events-none",
+        "transition"
+      ),
+      children: /* @__PURE__ */ jsx(CircleCheck, {})
+    }
+  );
+}
+
+export { Tick };

package/dist/src/client/interfaces/components/ui/form/containers/fields-container.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { FORM_MIDDLE_GAP_WIDTH } from '../../../../styles/constants.js';
+
+function FieldsContainer({
+  className = "",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative flex w-full", className),
+      style: { gap: FORM_MIDDLE_GAP_WIDTH },
+      ...props,
+      children
+    }
+  );
+}
+
+export { FieldsContainer };

package/dist/src/client/interfaces/components/ui/form/containers/main-fields.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { FORM_SIDE_FIELDS_WIDTH, FORM_MIDDLE_GAP_WIDTH } from '../../../../styles/constants.js';
+
+function MainFields({
+  className,
+  children,
+  ...props
+}) {
+  const sideWidth = FORM_SIDE_FIELDS_WIDTH + FORM_MIDDLE_GAP_WIDTH;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative", "flex flex-1 flex-col gap-6", className),
+      style: { maxWidth: `calc(100% - ${sideWidth}px)` },
+      ...props,
+      children
+    }
+  );
+}
+
+export { MainFields };

package/dist/src/client/interfaces/components/ui/form/containers/side-fields.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { FORM_SIDE_FIELDS_WIDTH } from '../../../../styles/constants.js';
+
+function SideFields({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative", "min-h-full", className),
+      style: { width: `${FORM_SIDE_FIELDS_WIDTH}px` },
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("sticky top-24", "flex flex-col gap-6"), children })
+    }
+  );
+}
+
+export { SideFields };

package/dist/src/client/interfaces/components/ui/form/control-fields/built-in-fields.js

@@ -0,0 +1,9 @@
+const BUILT_IN_FIELDS = [
+  { key: "isActive" },
+  { key: "index" },
+  { key: "slug" },
+  { key: "isFeatured" },
+  { key: "isShownOnHome" }
+];
+
+export { BUILT_IN_FIELDS };