sitero 0.2.0 → 0.4.0

package/dist/src/cms/client/interfaces/components/resources/file/file-list.js

@@ -1,6 +1,5 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useTranslator } from 'intor/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo, useEffect } from 'react';
 import 'mime-types';
 import 'sitero-domain';
@@ -12,7 +11,6 @@ import { cn } from '../../../../../../shared/utils/cn.js';
 import { debounce } from '../../../../../../shared/utils/debounce.js';
 import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
 import { normalizeUnorderedCacheKey } from '../../../../../../shared/utils/normalize-unordered-cache-key.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -30,24 +28,30 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'intor/react';
+import 'next/link';
 import 'next/navigation';
 import '../../../../../../constants/paths/redirect.js';
 import '../../../../../../constants/cms-locale.js';
 import { ListContainer } from '../../ui/blocks/list-container/list-container.js';
 import { FileTable } from './file-table.js';
-import { IsLockedButtons } from './search/is-locked-buttons.js';
-import { TypeButtons } from './search/type-buttons.js';
+import { IsInUseFilter } from './search/is-in-use-filter.js';
+import { IsLockedFilter } from './search/is-locked-filter.js';
+import { TypeFilter } from './search/type-filter.js';
 
 function createFileList({
   fileFindListCardsAction,
-  FileCard
+  FileCard,
+  defaultWebLocale
 }) {
   return function FileList({
     setListItemStates,
+    onLoadingChange,
     // search
     isDeleted,
     // Use in Trash Page
     fileIds,
+    allowedTypes,
     // link
     openNewTab = false,
     // pick
@@ -56,7 +60,6 @@ function createFileList({
     // list
     localKey = "file"
   }) {
-    const { locale } = useTranslator();
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(20);
     const [searchString, setSearchString] = useState("");
@@ -64,30 +67,46 @@ function createFileList({
       () => debounce((v) => setSearchString(v), 300),
       []
     );
-    const [type, setType] = useState(null);
+    const [types, setTypes] = useState([]);
+    const effectiveTypes = types.filter(
+      (type) => !allowedTypes || allowedTypes.includes(type)
+    );
+    const queryTypes = effectiveTypes.length ? effectiveTypes : allowedTypes;
     const [isLocked, setIsLocked] = useState(null);
-    useEffect(() => {
+    const [isInUse, setIsInUse] = useState(null);
+    const setIsInUseWithPageReset = (value) => {
+      setPage(1);
+      setIsInUse(value);
+    };
+    const setTypesWithPageReset = (value) => {
       setPage(1);
-    }, [setPage, type, isLocked]);
+      setTypes(value);
+    };
+    const setIsLockedWithPageReset = (value) => {
+      setPage(1);
+      setIsLocked(value);
+    };
     const { data, isFetching, refetch } = useQuery(
       () => fileFindListCardsAction({
-        locale,
+        locale: defaultWebLocale,
         searchString,
-        type,
+        types: queryTypes,
         isDeleted,
         // Use in Trash
         isLocked,
+        isInUse,
         fileIds,
         page,
         pageSize
       }),
       [
         "fileFindListCardsAction",
-        locale,
+        defaultWebLocale,
         searchString,
-        type,
+        normalizeUnorderedCacheKey(queryTypes),
         isDeleted,
         isLocked,
+        isInUse,
         normalizeUnorderedCacheKey(fileIds),
         page,
         pageSize
@@ -102,10 +121,12 @@ function createFileList({
         refetch
       });
     }, [files, data?.total, isFetching, setListItemStates]);
+    useEffect(() => {
+      onLoadingChange?.(isFetching);
+    }, [onLoadingChange, isFetching]);
     return /* @__PURE__ */ jsx(
       ListContainer,
       {
-        localKey,
         setListItemStates,
         page,
         setPage,
@@ -115,39 +136,61 @@ function createFileList({
         searchString,
         setSearchString: debouncedSetSearchString,
         isFetching,
-        headerChildren: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 overflow-x-auto", children: [
-          /* @__PURE__ */ jsx(TypeButtons, { type: type || null, setType }),
-          /* @__PURE__ */ jsx("div", { className: "py-1", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }) }),
-          /* @__PURE__ */ jsx(IsLockedButtons, { isLocked, setIsLocked })
+        filters: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 overflow-x-auto", children: [
+          (!allowedTypes || allowedTypes.length > 1) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              TypeFilter,
+              {
+                types: effectiveTypes,
+                setTypes: setTypesWithPageReset,
+                allowedTypes
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "py-1", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            IsLockedFilter,
+            {
+              isLocked,
+              setIsLocked: setIsLockedWithPageReset
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IsInUseFilter,
+            {
+              isInUse,
+              setIsInUse: setIsInUseWithPageReset
+            }
+          )
         ] }),
-        cardChildren: files.map((file) => {
-          const isPicked = !!pickedItems?.some((item) => item.id === file.id);
-          return /* @__PURE__ */ jsx(
-            FileCard,
+        display: {
+          mode: "switchable",
+          localKey,
+          cards: files.map((file) => {
+            const isPicked = !!pickedItems?.some((item) => item.id === file.id);
+            return /* @__PURE__ */ jsx(
+              FileCard,
+              {
+                file,
+                openNewTab,
+                isPicked,
+                onSelect: handleClick ? () => handleClick(file) : void 0,
+                className: cn(pickedItems && !isPicked && "opacity-50")
+              },
+              file.id
+            );
+          }),
+          table: /* @__PURE__ */ jsx(
+            FileTable,
             {
-              file,
+              files,
+              pickedItems,
+              onSelect: handleClick,
               openNewTab,
-              isPicked,
-              anchorProps: handleClick && {
-                onClick: (e) => {
-                  e.preventDefault();
-                  handleClick(file);
-                }
-              },
-              className: cn(pickedItems && !isPicked && "opacity-50")
-            },
-            file.id
-          );
-        }),
-        tableChildren: /* @__PURE__ */ jsx(
-          FileTable,
-          {
-            files,
-            pickedItems,
-            handleClick,
-            openNewTab
-          }
-        )
+              contentLocale: defaultWebLocale
+            }
+          )
+        }
       }
     );
   };

package/dist/src/cms/client/interfaces/components/resources/file/file-relations-link.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Network } from 'lucide-react';
+import Link from 'next/link';
+import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
+import '../../../../../../constants/paths/redirect.js';
+import '../../../../../../constants/cms-locale.js';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import 'clsx';
+import 'tailwind-merge';
+import { joinUrl } from '../../../../../../shared/utils/join-url.js';
+
+function FileRelationsLink({ fileId }) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: joinUrl(
+        CMS_PATHS.system.storage.file.pathname,
+        fileId,
+        "relations"
+      ),
+      className: "border-border hover:bg-accent/50 flex h-9 items-center gap-3 rounded-md border px-3 text-sm transition-colors duration-100",
+      children: [
+        /* @__PURE__ */ jsx(Network, { "aria-hidden": true, className: "text-muted-foreground size-4" }),
+        /* @__PURE__ */ jsx("p", { className: "line-clamp-1 font-medium", children: t("resources.related-resources.text") })
+      ]
+    }
+  );
+}
+
+export { FileRelationsLink };

package/dist/src/cms/client/interfaces/components/resources/file/file-state-icons.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import { Lock, Trash2 } from 'lucide-react';
 import 'mime-types';
 import 'sitero-domain';
@@ -7,13 +8,23 @@ 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 FileStateIcons({ file }) {
+  const { t } = useTranslator();
   const isLocked = !!file?.isLocked;
   const isTrash = !!file?.deletedAt;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(Lock, { className: cn(!isLocked && "opacity-10") }),
+    /* @__PURE__ */ jsx(
+      Lock,
+      {
+        className: cn(!isLocked && "opacity-10"),
+        role: "img",
+        "aria-label": t(
+          isLocked ? "resources.file.locked.text" : "resources.file.not-locked.text"
+        ),
+        "aria-hidden": false
+      }
+    ),
     /* @__PURE__ */ jsx(Trash2, { className: cn(isTrash ? "text-destructive" : "opacity-10") })
   ] });
 }

package/dist/src/cms/client/interfaces/components/resources/file/file-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { File } from 'lucide-react';
+import { Circle, Image } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../constants/paths/redirect.js';
@@ -15,7 +15,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';
@@ -34,6 +33,9 @@ import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '.
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 import 'next/link';
+import { NoData } from '../../ui/display/no-data.js';
+import '../../ui/inputs/input.js';
+import '../../ui/inputs/textarea.js';
 import { Badge } from '../../ui/display/badge.js';
 import { Tick } from '../../ui/features/tick.js';
 import 'next/image';
@@ -41,55 +43,69 @@ import { FileStateIcons } from './file-state-icons.js';
 
 function FileTable({
   files,
+  contentLocale,
   pickedItems,
-  handleClick,
+  onSelect,
   openNewTab
 }) {
-  const { t, locale } = useTranslator();
+  const { t } = useTranslator();
   const router = useRouter();
   return /* @__PURE__ */ jsxs(Table, { children: [
     /* @__PURE__ */ jsx(TableHeader, { className: "text-muted-foreground", children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      onSelect && /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
       /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
-      /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.file.file-type.text") }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.states.text") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-40", children: t("resources.file.file-type.text") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-40", children: t("resources.states.text") }),
       /* @__PURE__ */ jsx(TableHead, { children: t("resources.file.name.text") }),
       /* @__PURE__ */ jsx(TableHead, { children: t("resources.file.alt.text") })
     ] }) }),
     /* @__PURE__ */ jsx(TableBody, { children: files.map((file) => {
       const isPicked = !!pickedItems?.some((item) => item.id === file.id);
-      const fileT = findTranslation(file.translations, locale);
-      const href = joinUrl(
-        CMS_PATHS.system.storage.file.pathname,
-        file?.id
+      const fileT = findTranslation(file.translations, contentLocale);
+      const href = joinUrl(CMS_PATHS.system.storage.file.pathname, file.id);
+      const name = fileT.name || void 0;
+      const alt = fileT.alt || void 0;
+      const title = name ?? t("ui.no-data.text");
+      const isSelecting = onSelect !== void 0;
+      const selectionLabel = t(
+        isPicked ? "ui.picked.text" : "ui.pick.text"
       );
+      function activateRow() {
+        if (onSelect) {
+          onSelect(file);
+          return;
+        }
+        if (openNewTab) {
+          globalThis.open(href, "_blank", "noopener,noreferrer");
+          return;
+        }
+        router.push(href);
+      }
       return /* @__PURE__ */ jsxs(
         TableRow,
         {
+          "data-state": isPicked ? "selected" : void 0,
           className: cn(
-            "cursor-pointer",
+            "focus-visible:outline-ring cursor-pointer focus-visible:outline-2",
             pickedItems && !isPicked && "opacity-50"
           ),
-          onClick: () => {
-            if (handleClick === void 0) {
-              if (openNewTab) {
-                globalThis.open(href);
-              } else {
-                router.push(href);
-              }
-            } else {
-              handleClick(file);
-            }
+          tabIndex: 0,
+          "aria-label": `${isSelecting ? selectionLabel : t("resources.file.text")}: ${title}`,
+          onClick: activateRow,
+          onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            activateRow();
           },
           children: [
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Tick, { isPicked }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "border-r", children: /* @__PURE__ */ jsx("div", { className: "flex-center", children: /* @__PURE__ */ jsx(File, { className: "text-muted-foreground" }) }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { children: t(
+            isSelecting && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "flex-center text-muted-foreground/60", children: isPicked ? /* @__PURE__ */ jsx(Tick, { isPicked: true }) : /* @__PURE__ */ jsx(Circle, { "aria-hidden": true, className: "size-5!" }) }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "border-r", children: /* @__PURE__ */ jsx("div", { className: "flex-center", children: /* @__PURE__ */ jsx(Image, { className: "text-muted-foreground" }) }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(Badge, { className: "h-5.5 w-fit max-w-32 min-w-0 px-3", children: t(
               `resources.file.file-type.${(file?.type ?? "OTHER").toLowerCase()}.text`
             ) }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(FileStateIcons, { file }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: /* @__PURE__ */ jsx("div", { className: "truncate", children: fileT.name }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: /* @__PURE__ */ jsx("p", { className: "truncate", children: fileT.alt }) })
+            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(FileStateIcons, { file }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: name ? /* @__PURE__ */ jsx("p", { className: "truncate", children: name }) : /* @__PURE__ */ jsx(NoData, {}) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: alt ? /* @__PURE__ */ jsx("p", { className: "truncate", children: alt }) : /* @__PURE__ */ jsx(NoData, {}) })
           ]
         },
         file.id

package/dist/src/cms/client/interfaces/components/resources/file/search/is-in-use-filter.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Network } from 'lucide-react';
+import { BooleanFilter } from '../../../ui/features/boolean-filter.js';
+
+function IsInUseFilter({ isInUse, setIsInUse }) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsx(
+    BooleanFilter,
+    {
+      value: isInUse,
+      onChange: setIsInUse,
+      label: t("resources.file.usage-filter.label.text"),
+      icon: Network,
+      trueLabel: t("resources.file.in-use.text"),
+      falseLabel: t("resources.file.not-in-use.text")
+    }
+  );
+}
+
+export { IsInUseFilter };

package/dist/src/cms/client/interfaces/components/resources/file/search/is-locked-filter.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Lock } from 'lucide-react';
+import { BooleanFilter } from '../../../ui/features/boolean-filter.js';
+
+function IsLockedFilter({ isLocked, setIsLocked }) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsx(
+    BooleanFilter,
+    {
+      value: isLocked,
+      onChange: setIsLocked,
+      label: t("resources.file.lock-filter.label.text"),
+      icon: Lock,
+      trueLabel: t("resources.file.locked.text"),
+      falseLabel: t("resources.file.not-locked.text")
+    }
+  );
+}
+
+export { IsLockedFilter };

package/dist/src/cms/client/interfaces/components/resources/file/search/type-filter.js

@@ -0,0 +1,100 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { ChevronDown } from 'lucide-react';
+import { FILE_TYPES } from 'sitero-domain';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'react';
+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 '@radix-ui/react-dialog';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem } from '../../../shadcn/dropdown-menu.js';
+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 { ActionButton } from '../../../ui/buttons/action-button.js';
+import 'next/link';
+import 'next/navigation';
+import '../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../constants/cms-locale.js';
+
+function TypeFilter({ types, setTypes, allowedTypes }) {
+  const { t } = useTranslator();
+  const handleClick = (fileType) => {
+    setTypes((previous) => {
+      const selected = previous.filter(
+        (type) => !allowedTypes || allowedTypes.includes(type)
+      );
+      return selected.includes(fileType) ? selected.filter((type) => type !== fileType) : [...selected, fileType];
+    });
+  };
+  const availableTypes = [
+    ...new Set(allowedTypes ?? Object.values(FILE_TYPES))
+  ];
+  const selectedTypes = availableTypes.filter((type) => types.includes(type));
+  const getTypeLabel = (type) => t(
+    `resources.file.file-type.${type.toLowerCase()}.text`
+  );
+  const summary = selectedTypes.length === 0 ? t("resources.file.type-filter.all.text") : selectedTypes.length <= 2 ? selectedTypes.map(getTypeLabel).join(", ") : `${t("resources.file.type-filter.selected.text")} (${selectedTypes.length})`;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      ActionButton,
+      {
+        size: "sm",
+        variant: "outline",
+        className: "border-input hover:text-foreground shrink-0 gap-2 bg-transparent py-2 font-normal transition-[color,box-shadow] hover:bg-transparent",
+        title: `${t("resources.file.type-filter.label.text")}: ${selectedTypes.length ? selectedTypes.map(getTypeLabel).join(", ") : summary}`,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "max-w-56 truncate", children: [
+            t("resources.file.type-filter.label.text"),
+            ": ",
+            summary
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: "text-muted-foreground size-4 shrink-0 opacity-50",
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+      availableTypes.map((fileType) => /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: selectedTypes.includes(fileType),
+          onCheckedChange: () => handleClick(fileType),
+          onSelect: (event) => event.preventDefault(),
+          children: getTypeLabel(fileType)
+        },
+        fileType
+      )),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          disabled: selectedTypes.length === 0,
+          onSelect: () => setTypes([]),
+          children: t("resources.file.type-filter.clear.text")
+        }
+      )
+    ] })
+  ] });
+}
+
+export { TypeFilter };