sitero 0.2.0 → 0.3.0

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

package/dist/src/cms/client/interfaces/components/resources/inquiry/inquiry-card.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Inbox } from 'lucide-react';
-import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
+import Link from 'next/link';
 import '../../../../../../constants/paths/redirect.js';
+import { NEW_TAB_REL, NEW_TAB_TARGET } from '../../../../../../constants/anchor.js';
 import '../../../../../../constants/cms-locale.js';
 import 'mime-types';
 import 'sitero-domain';
@@ -10,16 +11,11 @@ import 'react';
 import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
-import 'clsx';
-import 'tailwind-merge';
-import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
-import { joinUrl } from '../../../../../../shared/utils/join-url.js';
-import 'zod';
-import { ResourceCard } from '../../ui/cards/resource-card/resource-card.js';
-import 'intor/react';
+import { cn } from '../../../../../../shared/utils/cn.js';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
+import { Card } from '../../shadcn/card.js';
 import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
 import '@radix-ui/react-dropdown-menu';
@@ -33,44 +29,84 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'intor/react';
 import 'next/navigation';
-import 'next/link';
+import '../../ui/inputs/input.js';
+import '../../ui/inputs/textarea.js';
+import { Tick } from '../../ui/features/tick.js';
+import 'next/image';
 
-const WIDTH = "200px";
 function InquiryCard({
   inquiry,
-  // link
-  openNewTab,
-  // pick
-  isPicked,
-  // base
-  anchorProps,
+  interaction,
   className = "",
-  // custom fields
-  headFields,
-  headComponent,
-  bodyFields,
-  bodyComponent
+  primaryField,
+  detailFields = [],
+  renderField
 }) {
-  const href = joinUrl(CMS_PATHS.website.inquiry.pathname, inquiry?.id);
-  return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
-    ResourceCard,
+  const surface = /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "relative flex w-[200px] flex-col gap-0 overflow-hidden p-0 text-start",
+        interaction.type !== "select" || !interaction.isDisabled ? "hover:bg-accent/50 transition-colors" : "opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-8 items-center border-b px-4", children: /* @__PURE__ */ jsx(Inbox, { className: "text-muted-foreground size-3.5" }) }),
+        primaryField && /* @__PURE__ */ jsx("div", { className: "flex min-h-9 items-center px-4 py-2 text-sm", children: renderField(inquiry, primaryField) }),
+        detailFields.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-2 px-4 py-2 text-xs",
+              primaryField && "border-t"
+            ),
+            children: detailFields.map((field) => /* @__PURE__ */ jsx("div", { className: "w-full", children: renderField(inquiry, field) }, field))
+          }
+        ),
+        interaction.type === "select" && /* @__PURE__ */ jsx(
+          Tick,
+          {
+            isPicked: interaction.isSelected,
+            className: "absolute top-1 right-1 [&_svg]:size-5"
+          }
+        )
+      ]
+    }
+  );
+  if (interaction.type === "navigate") {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: interaction.href,
+        target: interaction.openNewTab ? NEW_TAB_TARGET : void 0,
+        rel: interaction.openNewTab ? NEW_TAB_REL : void 0,
+        className: "focus-visible:outline-ring block w-fit rounded-xl focus-visible:outline-2",
+        children: surface
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      className,
-      style: { width: WIDTH },
-      href,
-      openNewTab,
-      anchorProps,
-      isPicked,
-      modelIcon: /* @__PURE__ */ jsx(Inbox, {}),
-      titleChildren: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ensureArray(headFields).map((key) => {
-        return /* @__PURE__ */ jsx("div", { className: "w-full", children: headComponent(inquiry, key) }, key);
-      }) }),
-      contentChildren: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ensureArray(bodyFields).map((key) => {
-        return /* @__PURE__ */ jsx("div", { className: "w-full", children: bodyComponent(inquiry, key) }, key);
-      }) })
+      role: "button",
+      tabIndex: interaction.isDisabled ? -1 : 0,
+      "aria-pressed": interaction.isSelected,
+      "aria-disabled": interaction.isDisabled,
+      onClick: () => {
+        if (!interaction.isDisabled) interaction.onSelect();
+      },
+      onKeyDown: (event) => {
+        if (interaction.isDisabled) return;
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        interaction.onSelect();
+      },
+      className: "focus-visible:outline-ring w-fit rounded-xl focus-visible:outline-2",
+      children: surface
     }
-  ) });
+  );
 }
 
 export { InquiryCard };

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

@@ -1,21 +1,21 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useEffect } from 'react';
+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 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { useQuery } from '../../../../../../shared/client/react-query/use-query.js';
-import 'mime-types';
-import 'sitero-domain';
 import { cn } from '../../../../../../shared/utils/cn.js';
 import { debounce } from '../../../../../../shared/utils/debounce.js';
 import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
-import 'zod';
+import { joinUrl } from '../../../../../../shared/utils/join-url.js';
 import 'intor/react';
 import 'lucide-react';
-import 'next/navigation';
-import '../../../../../../constants/paths/redirect.js';
-import '../../../../../../constants/cms-locale.js';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -32,6 +32,8 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'next/link';
+import 'next/navigation';
 import { ListContainer } from '../../ui/blocks/list-container/list-container.js';
 import { InquiryCard } from './inquiry-card.js';
 
@@ -46,10 +48,9 @@ function createInquiryList({
     pickedItems,
     handleClick,
     // card
-    headComponent,
-    headFields,
-    bodyComponent,
-    bodyFields
+    primaryField,
+    detailFields,
+    renderField
   }) {
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(20);
@@ -77,8 +78,6 @@ function createInquiryList({
     return /* @__PURE__ */ jsx(
       ListContainer,
       {
-        localKey: "inquiry",
-        fixedDisplayType: "card",
         page,
         setPage,
         pageSize,
@@ -87,32 +86,38 @@ function createInquiryList({
         searchString,
         setSearchString: debouncedSetSearchString,
         isFetching,
-        cardChildren: inquiries.map((inquiry) => {
-          const isPicked = !!pickedItems?.some(
-            (item) => item.id === inquiry.id
-          );
-          return /* @__PURE__ */ jsx(
-            InquiryCard,
-            {
-              inquiry,
-              openNewTab,
-              isPicked,
-              anchorProps: handleClick && {
-                onClick: (e) => {
-                  e.preventDefault();
-                  handleClick(inquiry);
-                }
+        display: {
+          mode: "fixed",
+          type: "card",
+          content: inquiries.map((inquiry) => {
+            const isPicked = !!pickedItems?.some(
+              (item) => item.id === inquiry.id
+            );
+            return /* @__PURE__ */ jsx(
+              InquiryCard,
+              {
+                inquiry,
+                interaction: handleClick ? {
+                  type: "select",
+                  isSelected: isPicked,
+                  onSelect: () => handleClick(inquiry)
+                } : {
+                  type: "navigate",
+                  href: joinUrl(
+                    CMS_PATHS.website.inquiry.pathname,
+                    inquiry.id
+                  ),
+                  openNewTab
+                },
+                className: cn(pickedItems && !isPicked && "opacity-50"),
+                primaryField,
+                detailFields,
+                renderField
               },
-              className: cn(pickedItems && !isPicked && "opacity-50"),
-              headFields,
-              headComponent,
-              bodyFields,
-              bodyComponent
-            },
-            inquiry.id
-          );
-        }),
-        tableChildren: /* @__PURE__ */ jsx(Fragment, {})
+              inquiry.id
+            );
+          })
+        }
       }
     );
   };

package/dist/src/cms/client/interfaces/components/resources/post/category/category-card.js

@@ -1,7 +1,6 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useTranslator } from 'intor/react';
-import { Notebook, File } from 'lucide-react';
+import { jsx } from 'react/jsx-runtime';
+import { Notebook } from 'lucide-react';
 import { CMS_PATHS } from '../../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../constants/cms-locale.js';
@@ -15,8 +14,8 @@ import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
 import { joinUrl } from '../../../../../../../shared/utils/join-url.js';
-import 'zod';
-import { ResourceCard } from '../../../ui/cards/resource-card/resource-card.js';
+import { ResourceCard } from '../../../ui/cards/resource-card.js';
+import 'intor/react';
 import '@radix-ui/react-avatar';
 import '../../../shadcn/badge.js';
 import '../../../shadcn/button.js';
@@ -33,63 +32,56 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'next/navigation';
 import 'next/link';
+import 'next/navigation';
+import { NoData } from '../../../ui/display/no-data.js';
+import '../../../ui/inputs/input.js';
+import '../../../ui/inputs/textarea.js';
 import { PostStateIcons } from '../post-state-icons.js';
 
 const WIDTH = "200px";
-function CategoryCard({
-  post: category,
-  topicSlug,
-  isSubcategory,
-  hasSubcategory,
-  // link
-  openNewTab,
-  // pick
-  isPicked,
-  // base
-  anchorProps,
-  className = ""
+function createCategoryCard({
+  defaultWebLocale
 }) {
-  const { t, locale } = useTranslator();
-  const topic = "topic" in category ? category.topic : null;
-  const resolvedTopicSlug = topic?.slug ?? topicSlug;
-  const topicT = findTranslation(topic?.translations, locale);
-  const categoryT = findTranslation(category?.translations, locale);
-  const childrenIcon = hasSubcategory ? /* @__PURE__ */ jsx(Notebook, {}) : /* @__PURE__ */ jsx(File, {});
-  const href = isSubcategory ? joinUrl(
-    CMS_PATHS.content["content-management"].subcategory.pathname(
-      resolvedTopicSlug
-    ),
-    category?.id
-  ) : joinUrl(
-    CMS_PATHS.content["content-management"].category.pathname(
-      resolvedTopicSlug
-    ),
-    category?.id
-  );
-  return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
-    ResourceCard,
-    {
-      className,
-      style: { width: WIDTH },
-      href,
-      openNewTab,
-      anchorProps,
-      isPicked,
-      modelIcon: /* @__PURE__ */ jsx(Notebook, {}),
-      badge: topicT.title,
-      statesChildren: /* @__PURE__ */ jsx(PostStateIcons, { post: category }),
-      titleChildren: categoryT.title,
-      contentChildren: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5 opacity-75", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "[&_svg]:size-3.5", children: childrenIcon }),
-        /* @__PURE__ */ jsxs("p", { className: "truncate", children: [
-          ":\xA0",
-          /* @__PURE__ */ jsx("span", { className: "text-xs opacity-50", children: t("resources.see-in-details.text") })
-        ] })
-      ] }) })
-    }
-  ) });
+  return function CategoryCard({
+    post: category,
+    topicSlug,
+    isSubcategory,
+    // link
+    openNewTab,
+    // pick
+    isPicked,
+    onSelect,
+    // base
+    className = ""
+  }) {
+    const topic = "topic" in category ? category.topic : null;
+    const resolvedTopicSlug = topic?.slug ?? topicSlug;
+    const topicT = findTranslation(topic?.translations, defaultWebLocale);
+    const categoryT = findTranslation(category?.translations, defaultWebLocale);
+    const href = isSubcategory ? joinUrl(
+      CMS_PATHS.content["content-management"].subcategory.pathname(
+        resolvedTopicSlug
+      ),
+      category?.id
+    ) : joinUrl(
+      CMS_PATHS.content["content-management"].category.pathname(
+        resolvedTopicSlug
+      ),
+      category?.id
+    );
+    return /* @__PURE__ */ jsx(
+      ResourceCard,
+      {
+        interaction: onSelect ? { type: "select", isSelected: !!isPicked, onSelect } : { type: "navigate", href, openNewTab },
+        identity: { icon: /* @__PURE__ */ jsx(Notebook, {}), badge: topicT.title },
+        state: /* @__PURE__ */ jsx(PostStateIcons, { post: category }),
+        title: categoryT.title || /* @__PURE__ */ jsx(NoData, {}),
+        className,
+        style: { width: WIDTH }
+      }
+    );
+  };
 }
 
-export { CategoryCard };
+export { createCategoryCard };