sitero 0.2.0 → 0.4.0

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

@@ -1,23 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useTranslator } from 'intor/react';
 import { useState, useMemo, useEffect } from 'react';
 import { POST_TYPES } from 'sitero-domain';
+import 'mime-types';
 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 { 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 { DO_NOT_FETCH_KEY } from '../../../../../../shared/list-item.js';
-import 'zod';
+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';
@@ -34,27 +30,30 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+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 { PostTable } from './post-table.js';
-import { ControlFieldsButtons } from './search/control-fields-buttons.js';
+import { toActiveControlFieldFilters } from './search/control-field-filter-state.js';
+import { ControlFieldsFilters } from './search/control-fields-filters.js';
 
-function toActiveControlFieldFilters(controlFields) {
-  return Object.fromEntries(
-    Object.entries(controlFields).flatMap(
-      ([key, value]) => value ? [[key, value]] : []
-    )
-  );
-}
 function createPostList({
+  customControlFields: defaultCustomControlFields = [],
   postFindListCardsAction,
-  PostCard
+  PostCard,
+  defaultWebLocale,
+  strategies
 }) {
   return function PostList({
+    customControlFields = defaultCustomControlFields,
     enabled = true,
     usableFields,
     // search
     type = POST_TYPES.POST,
     topicId,
+    authorId,
     postIds,
     excludeIds,
     // link
@@ -64,13 +63,13 @@ function createPostList({
     handleClick,
     // item states
     setListItemStates,
+    onLoadingChange,
     // component
     Card = PostCard,
     Table = PostTable,
     // list
     localKey = "post"
   }) {
-    const { locale } = useTranslator();
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(20);
     const [searchString, setSearchString] = useState("");
@@ -79,23 +78,29 @@ function createPostList({
       []
     );
     const [controlFields, setControlFields] = useState({
-      isActive: false,
-      isIndexActive: false,
-      isSlugActive: false,
-      isFeatured: false,
-      isShownOnHome: false
+      isActive: null,
+      isIndexActive: null,
+      isSlugActive: null,
+      isFeatured: null,
+      isShownOnHome: null
     });
-    const activeControlFieldFilters = toActiveControlFieldFilters(controlFields);
-    useEffect(() => {
+    const setControlFieldsWithPageReset = (value) => {
       setPage(1);
-    }, [setPage, controlFields]);
+      setControlFields(value);
+    };
+    const activeControlFieldFilters = toActiveControlFieldFilters(
+      controlFields,
+      customControlFields,
+      usableFields
+    );
     const { data, isFetching } = useQuery(
       () => postFindListCardsAction({
-        locale,
+        locale: defaultWebLocale,
         searchString,
         ...type ? { type } : {},
         ...activeControlFieldFilters,
         topicId,
+        authorId,
         postIds,
         excludeIds,
         page,
@@ -103,11 +108,12 @@ function createPostList({
       }),
       [
         "postFindListCardsAction",
-        locale,
+        defaultWebLocale,
         searchString,
         type,
         JSON.stringify(activeControlFieldFilters),
         topicId,
+        authorId,
         normalizeUnorderedCacheKey(postIds),
         normalizeUnorderedCacheKey(excludeIds),
         page,
@@ -123,10 +129,12 @@ function createPostList({
         isFetching
       });
     }, [isFetching, data?.total, posts, setListItemStates]);
+    useEffect(() => {
+      onLoadingChange?.(isFetching);
+    }, [onLoadingChange, isFetching]);
     return /* @__PURE__ */ jsx(
       ListContainer,
       {
-        localKey,
         setListItemStates,
         page,
         setPage,
@@ -136,42 +144,44 @@ function createPostList({
         searchString,
         setSearchString: debouncedSetSearchString,
         isFetching,
-        headerChildren: /* @__PURE__ */ jsx(
-          ControlFieldsButtons,
+        filters: /* @__PURE__ */ jsx(
+          ControlFieldsFilters,
           {
+            customControlFields,
             usableFields,
             controlFields,
-            setControlFields
+            setControlFields: setControlFieldsWithPageReset
           }
         ),
-        cardChildren: posts.map((post) => {
-          const isPicked = !!pickedItems?.some((item) => item.id === post.id);
-          return /* @__PURE__ */ jsx(
-            Card,
+        display: {
+          mode: "switchable",
+          localKey,
+          cards: posts.map((post) => {
+            const isPicked = !!pickedItems?.some((item) => item.id === post.id);
+            return /* @__PURE__ */ jsx(
+              Card,
+              {
+                post,
+                openNewTab,
+                isPicked,
+                onSelect: handleClick ? () => handleClick(post) : void 0,
+                className: cn(pickedItems && !isPicked && "opacity-50")
+              },
+              post.id
+            );
+          }),
+          table: /* @__PURE__ */ jsx(
+            Table,
             {
-              post,
+              posts,
+              pickedItems,
+              onSelect: handleClick,
               openNewTab,
-              isPicked,
-              anchorProps: handleClick && {
-                onClick: (e) => {
-                  e.preventDefault();
-                  handleClick(post);
-                }
-              },
-              className: cn(pickedItems && !isPicked && "opacity-50")
-            },
-            post.id
-          );
-        }),
-        tableChildren: /* @__PURE__ */ jsx(
-          Table,
-          {
-            posts,
-            pickedItems,
-            handleClick,
-            openNewTab
-          }
-        )
+              contentLocale: defaultWebLocale,
+              strategies
+            }
+          )
+        }
       }
     );
   };

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

@@ -0,0 +1,26 @@
+const DEFAULT_TITLE_FIELDS = ["title"];
+const DEFAULT_EXCERPT_FIELDS = ["summary", "description", "content"];
+function resolveTranslationFields(translation, fields) {
+  if (!translation || !fields) return void 0;
+  for (const field of fields) {
+    const value = translation[field];
+    if (typeof value === "string" && value !== "") return { field, value };
+  }
+  return void 0;
+}
+function resolvePostPresentation(translation, strategy = {}) {
+  const excerpt = resolveTranslationFields(
+    translation,
+    strategy.excerpt ?? DEFAULT_EXCERPT_FIELDS
+  );
+  return {
+    title: resolveTranslationFields(
+      translation,
+      strategy.title ?? DEFAULT_TITLE_FIELDS
+    )?.value,
+    excerpt: excerpt?.value,
+    excerptFormat: excerpt?.field === "content" ? "html" : "text"
+  };
+}
+
+export { resolvePostPresentation };

package/dist/src/cms/client/interfaces/components/resources/post/post-relations-layout.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Network } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import 'zod';
+import 'sonner';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { useCmsQuery } from '../../../../infrastructure/operation-result/use-cms-query.js';
+import { PageHeaderLayout } from '../../ui/blocks/page-header/page-header-layout.js';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
+import 'clsx';
+import 'tailwind-merge';
+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-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'next/link';
+import { ReturnButton } from '../../ui/buttons/return-button.js';
+import '../../../../../../constants/paths/redirect.js';
+import '../../../../../../constants/cms-locale.js';
+import '../../ui/inputs/input.js';
+import '../../ui/inputs/textarea.js';
+import '../../ui/inputs/switch-input.js';
+import '../../ui/inputs/password-input.js';
+import '../../../../infrastructure/admin-session/admin-context.js';
+import 'intor/next';
+import { ContentContainer } from '../../ui/layouts/content-container.js';
+
+function createPostRelationsLayout({
+  postFindRelationsAction
+}) {
+  return function PostRelationsLayout({
+    children
+  }) {
+    const { t } = useTranslator();
+    const { id } = useParams();
+    const {
+      data: relations,
+      isFetching,
+      isNotFound
+    } = useCmsQuery(
+      () => postFindRelationsAction({ id }),
+      ["postFindRelationsAction", id],
+      { select: (data) => data?.relations }
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        PageHeaderLayout,
+        {
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true }),
+          titleProps: {
+            icon: Network,
+            title: t("resources.related-resources.text")
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(ContentContainer, { isNotFound, children: isFetching ? null : relations ? children(relations) : null })
+    ] });
+  };
+}
+
+export { createPostRelationsLayout };

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Network } from 'lucide-react';
+import Link from 'next/link';
+
+function PostRelationsLink({ href }) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href,
+      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 { PostRelationsLink };

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

@@ -7,7 +7,6 @@ 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 PostStateIcons({ post }) {
   const { isActive, isSlugActive, index, isFeatured, isShownOnHome } = post;

package/dist/src/cms/client/interfaces/components/resources/post/post-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, File } 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,51 +33,92 @@ 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 { extractSummaryText } from '../../ui/display/html-display/helpers.js';
+import { TextDisplay } from '../../ui/display/text-display.js';
 import { Tick } from '../../ui/features/tick.js';
 import 'next/image';
+import { resolvePostPresentation } from './post-presentation.js';
 import { PostStateIcons } from './post-state-icons.js';
 
-function PostTable({ posts, pickedItems, handleClick }) {
-  const { t, locale } = useTranslator();
+function PostTable({
+  posts,
+  contentLocale,
+  strategies,
+  pickedItems,
+  onSelect,
+  openNewTab
+}) {
+  const { t } = useTranslator();
   const router = useRouter();
-  return /* @__PURE__ */ jsxs(Table, { children: [
+  return /* @__PURE__ */ jsxs(Table, { className: "min-w-[800px] table-fixed", children: [
     /* @__PURE__ */ jsx(TableHeader, { className: "text-muted-foreground", children: /* @__PURE__ */ jsxs(TableRow, { children: [
-      /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
-      /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.topic.text") }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.states.text") }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.post.title.text") })
+      onSelect && /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-12", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("resources.post.text") }) }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-40", children: t("resources.topic.text") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-40", children: t("resources.states.text") }),
+      /* @__PURE__ */ jsx(TableHead, { children: t("resources.post.title.text") }),
+      /* @__PURE__ */ jsx(TableHead, { children: t("resources.post.excerpt.text") })
     ] }) }),
     /* @__PURE__ */ jsx(TableBody, { children: posts.map((post) => {
       const topic = post.topic;
-      const topicT = findTranslation(topic?.translations, locale);
+      const topicT = findTranslation(topic?.translations, contentLocale);
       const isPicked = !!pickedItems?.some((item) => item.id === post.id);
-      const postT = findTranslation(post.translations, locale);
+      const postT = findTranslation(post.translations, contentLocale);
+      const strategy = strategies?.[post.type]?.[topic?.slug ?? ""] ?? {};
+      const presentation = resolvePostPresentation(postT, strategy);
       const href = joinUrl(
         CMS_PATHS.content["content-management"].post.pathname(topic?.slug),
         post?.id
       );
+      const title = presentation.title;
+      const isSelecting = onSelect !== void 0;
+      const selectionLabel = t(
+        isPicked ? "ui.picked.text" : "ui.pick.text"
+      );
+      function activateRow() {
+        if (onSelect) {
+          onSelect(post);
+          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) {
-              router.push(href);
-            } else {
-              handleClick(post);
-            }
+          tabIndex: 0,
+          "aria-label": `${isSelecting ? selectionLabel : t("resources.post.text")}: ${title ?? t("ui.no-data.text")}`,
+          onClick: activateRow,
+          onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            activateRow();
           },
           children: [
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Tick, { isPicked }) }),
+            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(File, { className: "text-muted-foreground" }) }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { children: topicT.title }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(PostStateIcons, { post }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: postT.title })
+            /* @__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: topicT.title }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(PostStateIcons, { post }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: title ? /* @__PURE__ */ jsx("p", { className: "truncate", children: title }) : /* @__PURE__ */ jsx(NoData, {}) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[320px]", children: presentation.excerpt ? /* @__PURE__ */ jsx(
+              TextDisplay,
+              {
+                value: presentation.excerptFormat === "html" ? extractSummaryText(presentation.excerpt) : presentation.excerpt,
+                className: "text-muted-foreground block truncate whitespace-nowrap"
+              }
+            ) : /* @__PURE__ */ jsx(NoData, {}) })
           ]
         },
         post.id

package/dist/src/cms/client/interfaces/components/resources/post/search/control-field-filter-state.js

@@ -0,0 +1,20 @@
+const BUILT_IN_KEYS = [
+  "isActive",
+  "isIndexActive",
+  "isSlugActive",
+  "isFeatured",
+  "isShownOnHome"
+];
+function toActiveControlFieldFilters(controlFields, customControlFields, usableFields) {
+  const result = {};
+  const keys = [...BUILT_IN_KEYS, ...customControlFields.map(({ key }) => key)];
+  for (const key of keys) {
+    const value = controlFields[key];
+    if (typeof value === "boolean" && (!usableFields || usableFields.includes(key))) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+export { toActiveControlFieldFilters };

package/dist/src/cms/client/interfaces/components/resources/post/search/control-fields-filters.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Eye, Binary, MapPinCheckInside, Star, House } from 'lucide-react';
+import { BooleanFilter } from '../../../ui/features/boolean-filter.js';
+import { resolveControlFieldLabel } from '../content/resolve-control-field-label.js';
+
+const CONTROL_FIELDS = [
+  {
+    key: "isActive",
+    label: "ui.control-fields.is-active.text",
+    icon: Eye
+  },
+  {
+    key: "isIndexActive",
+    label: "ui.control-fields.is-index-active.text",
+    icon: Binary
+  },
+  {
+    key: "isSlugActive",
+    label: "ui.control-fields.is-slug-active.text",
+    icon: MapPinCheckInside
+  },
+  {
+    key: "isFeatured",
+    label: "ui.control-fields.is-featured.text",
+    icon: Star
+  },
+  {
+    key: "isShownOnHome",
+    label: "ui.control-fields.is-shown-on-home.text",
+    icon: House
+  }
+];
+function ControlFieldsFilters({
+  usableFields,
+  customControlFields = [],
+  controlFields,
+  setControlFields
+}) {
+  const { t, locale } = useTranslator();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+    CONTROL_FIELDS.filter(
+      ({ key }) => !usableFields || usableFields.includes(key)
+    ).map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsx(
+      BooleanFilter,
+      {
+        value: controlFields[key] ?? null,
+        onChange: (value) => setControlFields((previous) => ({ ...previous, [key]: value })),
+        label: t(label),
+        icon: Icon
+      },
+      key
+    )),
+    customControlFields.filter(({ key }) => !usableFields || usableFields.includes(key)).map(({ key, label, icon }) => /* @__PURE__ */ jsx(
+      BooleanFilter,
+      {
+        value: controlFields[key] ?? null,
+        onChange: (value) => setControlFields((previous) => ({ ...previous, [key]: value })),
+        label: resolveControlFieldLabel(label, locale),
+        icon
+      },
+      key
+    ))
+  ] });
+}
+
+export { ControlFieldsFilters };