@yimingliao/cms 0.0.144 → 0.0.146

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

@@ -1,40 +0,0 @@
-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

@@ -1,113 +0,0 @@
-"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

@@ -1,101 +0,0 @@
-"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

@@ -1,112 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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 };