sitero 0.2.0 → 0.4.0

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

@@ -13,7 +13,6 @@ import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../shadcn/badge.js';
 import '../../../shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -30,38 +29,48 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'next/link';
 import { Field } from '../../../ui/form/field.js';
 import { FieldBody } from '../../../ui/form/field-body.js';
 import { FieldsContainer } from '../../../ui/form/containers/fields-container.js';
 import { MainFields } from '../../../ui/form/containers/main-fields.js';
 import { SideFields } from '../../../ui/form/containers/side-fields.js';
+import '../../../ui/inputs/input.js';
+import '../../../ui/inputs/textarea.js';
 import { ControlFields } from '../../../ui/form/control-fields/control-fields.js';
+import { HtmlDisplay } from '../../../ui/display/html-display/html-display.js';
+import { ObjectArrayList } from '../../../ui/display/object-array-list.js';
+import { TextDisplay } from '../../../ui/display/text-display.js';
+import { I18nDisplayField } from '../../../ui/i18n/i18n-display-field.js';
 import '../../../../../infrastructure/admin-session/admin-context.js';
 import 'next/navigation';
 import 'intor/next';
-import 'next/link';
+import 'zod';
 import { ContentContainer } from '../../../ui/layouts/content-container.js';
-import { AdminCard } from '../../admin/admin-card.js';
-import { CategoryCard } from '../category/category-card.js';
-import { TagCard } from '../tag/tag-card.js';
+import { resolveControlFieldLabel } from './resolve-control-field-label.js';
 
 function createPostShowContent({
+  customControlFields: defaultCustomControlFields = [],
   contentMaxWidth,
+  AdminCard,
   PostCard,
   FileCard,
-  I18nDisplay,
-  I18nObjectArrayDisplay
+  CategoryCard: DefaultCategoryCard,
+  TagCard,
+  webLocales
 }) {
   return function PostShowContent({
     post,
     isFetching,
     isNotFound,
     children,
+    topChildren,
     subcategoryType,
-    CategoryCard: CategoryCard$1 = CategoryCard,
-    allowField
+    CategoryCard = DefaultCategoryCard,
+    allowField,
+    customControlFields = defaultCustomControlFields
   }) {
-    const { t, format } = useTranslator();
+    const { t, format, locale: cmsLocale } = useTranslator();
     const type = post?.type;
     const topicSlug = post?.topic?.slug;
     const categories = post?.parents;
@@ -69,6 +78,7 @@ function createPostShowContent({
     const isFieldAllowed = (type2, field, fieldRuleKey) => allowField({ topicSlug, type: type2, field, fieldRuleKey });
     return /* @__PURE__ */ jsx(ContentContainer, { isNotFound, children: /* @__PURE__ */ jsxs(FieldsContainer, { children: [
       /* @__PURE__ */ jsxs(MainFields, { children: [
+        topChildren,
         /* @__PURE__ */ jsxs(Fragment, { children: [
           isFieldAllowed(type, "author", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t("resources.post.author.text"), children: /* @__PURE__ */ jsx(FieldBody, { isLoading: isFetching, isEmpty: !post?.author, children: /* @__PURE__ */ jsx(AdminCard, { admin: post?.author || null, openNewTab: true }) }) }),
           isFieldAllowed(type, "parents", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t(parentLabelKey), children: /* @__PURE__ */ jsx(
@@ -77,7 +87,7 @@ function createPostShowContent({
               isLoading: isFetching,
               isEmpty: categories?.length === 0,
               children: categories?.map((p) => /* @__PURE__ */ jsx(
-                CategoryCard$1,
+                CategoryCard,
                 {
                   post: p,
                   topicSlug,
@@ -100,78 +110,157 @@ function createPostShowContent({
         ] }),
         /* @__PURE__ */ jsxs(Fragment, { children: [
           isFieldAllowed(type, "text-content-separator", post?.slug) && /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
-          isFieldAllowed(type, "title", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t("resources.post.title.text"), children: /* @__PURE__ */ jsx(
-            I18nDisplay,
+          isFieldAllowed(type, "title", post?.slug) && /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "title",
+              label: t("resources.post.title.text"),
+              locales: webLocales,
               translations: post?.translations,
-              isLoading: isFetching
+              children: ({ value }) => /* @__PURE__ */ jsx(
+                FieldBody,
+                {
+                  isLoading: isFetching,
+                  isEmpty: !value,
+                  className: "whitespace-pre-line",
+                  children: value
+                }
+              )
             }
-          ) }),
-          isFieldAllowed(type, "subtitle", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t("resources.post.subtitle.text"), children: /* @__PURE__ */ jsx(
-            I18nDisplay,
+          ),
+          isFieldAllowed(type, "subtitle", post?.slug) && /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "subtitle",
+              label: t("resources.post.subtitle.text"),
+              locales: webLocales,
               translations: post?.translations,
-              isLoading: isFetching
+              children: ({ value }) => /* @__PURE__ */ jsx(
+                FieldBody,
+                {
+                  isLoading: isFetching,
+                  isEmpty: !value,
+                  className: "whitespace-pre-line",
+                  children: value
+                }
+              )
             }
-          ) }),
-          isFieldAllowed(type, "summary", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t("resources.post.summary.text"), children: /* @__PURE__ */ jsx(
-            I18nDisplay,
+          ),
+          isFieldAllowed(type, "summary", post?.slug) && /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "summary",
+              label: t("resources.post.summary.text"),
+              locales: webLocales,
               translations: post?.translations,
-              isLoading: isFetching
+              children: ({ value }) => /* @__PURE__ */ jsx(FieldBody, { isLoading: isFetching, isEmpty: !value, children: /* @__PURE__ */ jsx(TextDisplay, { value }) })
             }
-          ) }),
-          isFieldAllowed(type, "description", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t("resources.post.description.text"), children: /* @__PURE__ */ jsx(
-            I18nDisplay,
+          ),
+          isFieldAllowed(type, "description", post?.slug) && /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "description",
+              label: t("resources.post.description.text"),
+              locales: webLocales,
               translations: post?.translations,
-              isLoading: isFetching
+              children: ({ value }) => /* @__PURE__ */ jsx(FieldBody, { isLoading: isFetching, isEmpty: !value, children: /* @__PURE__ */ jsx(TextDisplay, { value }) })
             }
-          ) }),
-          isFieldAllowed(type, "content", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t("resources.post.content.text"), children: /* @__PURE__ */ jsx(
-            I18nDisplay,
+          ),
+          isFieldAllowed(type, "content", post?.slug) && /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "content",
+              label: t("resources.post.content.text"),
+              locales: webLocales,
               translations: post?.translations,
-              isLoading: isFetching,
-              isHtml: true,
-              style: { maxWidth: contentMaxWidth },
-              className: "mx-auto"
+              children: ({ value }) => /* @__PURE__ */ jsx(
+                FieldBody,
+                {
+                  isLoading: isFetching,
+                  isEmpty: !value,
+                  style: { maxWidth: contentMaxWidth },
+                  className: "mx-auto",
+                  children: /* @__PURE__ */ jsx(HtmlDisplay, { html: value ?? "" })
+                }
+              )
             }
-          ) })
+          )
         ] }),
         /* @__PURE__ */ jsxs(Fragment, { children: [
           isFieldAllowed(type, "better-seo-separator", post?.slug) && /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
-          isFieldAllowed(type, "externalLinks", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t("resources.post.external-links.text"), children: /* @__PURE__ */ jsx(
-            I18nObjectArrayDisplay,
+          isFieldAllowed(type, "externalLinks", post?.slug) && /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "externalLinks",
+              label: t("resources.post.external-links.text"),
+              locales: webLocales,
               translations: post?.translations,
-              fields: [{ key: "name" }, { key: "href", isLink: true }],
-              isLoading: isFetching
+              children: ({ value }) => /* @__PURE__ */ jsx(
+                ObjectArrayList,
+                {
+                  items: value?.map(({ name, href }) => ({ name, href })) ?? [],
+                  fields: [
+                    {
+                      key: "name",
+                      label: t("resources.post.external-links.name.text")
+                    },
+                    {
+                      key: "href",
+                      label: t("resources.post.external-links.href.text"),
+                      isLink: true
+                    }
+                  ],
+                  isLoading: isFetching
+                }
+              )
             }
-          ) }),
-          isFieldAllowed(type, "faq", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t("resources.post.faq.text"), children: /* @__PURE__ */ jsx(
-            I18nObjectArrayDisplay,
+          ),
+          isFieldAllowed(type, "faq", post?.slug) && /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "faq",
+              label: t("resources.post.faq.text"),
+              locales: webLocales,
               translations: post?.translations,
-              fields: [{ key: "question" }, { key: "answer" }],
-              isLoading: isFetching
+              children: ({ value }) => /* @__PURE__ */ jsx(
+                ObjectArrayList,
+                {
+                  items: value?.map(({ question, answer }) => ({
+                    question,
+                    answer
+                  })) ?? [],
+                  fields: [
+                    {
+                      key: "question",
+                      label: t("resources.post.faq.question.text")
+                    },
+                    {
+                      key: "answer",
+                      label: t("resources.post.faq.answer.text")
+                    }
+                  ],
+                  isLoading: isFetching
+                }
+              )
             }
-          ) }),
-          isFieldAllowed(type, "readTime", post?.slug) && /* @__PURE__ */ jsx(Field, { label: t("resources.post.read-time.text"), children: /* @__PURE__ */ jsx(
-            I18nDisplay,
+          ),
+          isFieldAllowed(type, "readTime", post?.slug) && /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "readTime",
+              label: t("resources.post.read-time.text"),
+              locales: webLocales,
               translations: post?.translations,
-              isLoading: isFetching
+              children: ({ value }) => /* @__PURE__ */ jsx(
+                FieldBody,
+                {
+                  isLoading: isFetching,
+                  isEmpty: value == null || value === 0,
+                  children: value != null && value !== 0 ? `${value} ${t("resources.post.read-time.unit.text")}` : void 0
+                }
+              )
             }
-          ) })
+          )
         ] }),
         /* @__PURE__ */ jsxs(Fragment, { children: [
           isFieldAllowed(type, "related-posts-separator", post?.slug) && /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
@@ -194,12 +283,12 @@ function createPostShowContent({
         ] }),
         children
       ] }),
-      /* @__PURE__ */ jsxs(SideFields, { children: [
+      /* @__PURE__ */ jsxs(SideFields, { className: "lg:max-h-[calc(100dvh-7rem)]", children: [
         /* @__PURE__ */ jsx(
           Field,
           {
             label: t("resources.post.created-at.text"),
-            wrapperClassName: "max-lg:hidden",
+            wrapperClassName: "shrink-0 max-lg:hidden",
             children: /* @__PURE__ */ jsx(FieldBody, { isLoading: isFetching, children: post?.createdAt && format.date(new Date(post?.createdAt), DATE_FORMAT_OPTIONS) })
           }
         ),
@@ -212,7 +301,12 @@ function createPostShowContent({
               ...isFieldAllowed(type, "isIndexActive", post?.slug) ? [{ key: "isIndexActive" }] : [],
               ...isFieldAllowed(type, "isSlugActive", post?.slug) ? [{ key: "isSlugActive" }] : [],
               ...isFieldAllowed(type, "isFeatured", post?.slug) ? [{ key: "isFeatured" }] : [],
-              ...isFieldAllowed(type, "isShownOnHome", post?.slug) ? [{ key: "isShownOnHome" }] : []
+              ...isFieldAllowed(type, "isShownOnHome", post?.slug) ? [{ key: "isShownOnHome" }] : [],
+              ...customControlFields.filter(({ key }) => isFieldAllowed(type, key, post?.slug)).map(({ key, icon, label }) => ({
+                key,
+                icon,
+                label: resolveControlFieldLabel(label, cmsLocale)
+              }))
             ],
             formData: { ...post },
             isDisplay: true,

package/dist/src/cms/client/interfaces/components/resources/post/content/resolve-control-field-label.js

@@ -0,0 +1,9 @@
+import { CMS_LOCALES_ARRAY, CMS_DEFAULT_LOCALE } from '../../../../../../../constants/cms-locale.js';
+
+function resolveControlFieldLabel(label, locale) {
+  if (typeof label === "string") return label;
+  const cmsLocale = CMS_LOCALES_ARRAY.find((supported) => supported === locale) ?? CMS_DEFAULT_LOCALE;
+  return label[cmsLocale] ?? label[CMS_DEFAULT_LOCALE];
+}
+
+export { resolveControlFieldLabel };

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

@@ -1,6 +1,5 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useTranslator } from 'intor/react';
+import { jsx } from 'react/jsx-runtime';
 import { File } from 'lucide-react';
 import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../constants/paths/redirect.js';
@@ -14,8 +13,8 @@ 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 { 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';
@@ -32,22 +31,23 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'next/navigation';
 import 'next/link';
-import { HtmlDisplay } from '../../ui/display/html-display.js';
-import 'next/image';
-import { Tick } from '../../ui/features/tick.js';
+import 'next/navigation';
+import { NoData } from '../../ui/display/no-data.js';
+import '../../ui/inputs/input.js';
+import '../../ui/inputs/textarea.js';
+import { extractSummaryText } from '../../ui/display/html-display/helpers.js';
+import { TextDisplay } from '../../ui/display/text-display.js';
+import { resolvePostPresentation } from './post-presentation.js';
 import { PostStateIcons } from './post-state-icons.js';
 
 const WIDTH = "256px";
 const HEIGHT = "256px";
-const CARD_CHILDREN_STYLES = {
-  WebkitMaskImage: "linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%)",
-  maskImage: "linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%)"
-};
 function createPostCard({
   SmartImage,
-  strategies
+  storageUrl,
+  strategies,
+  defaultWebLocale
 }) {
   return function PostCard({
     post,
@@ -56,87 +56,77 @@ function createPostCard({
     openNewTab,
     // pick
     isPicked,
+    onSelect,
     // base
-    anchorProps,
     className = ""
   }) {
-    const { locale } = useTranslator();
     const topic = "topic" in post ? post.topic : null;
     const resolvedTopicSlug = topic?.slug ?? topicSlug;
-    const topicT = findTranslation(topic?.translations, locale);
-    const postT = findTranslation(post.translations, locale);
-    const strategy = strategies?.[post.type]?.[topic?.slug ?? ""] ?? {};
-    const titleFields = strategy.titleFields ?? ["title"];
-    const contentFields = strategy.contentFields ?? [
-      "summary",
-      "description",
-      "content"
-    ];
-    const hasTitle = titleFields.length > 0;
-    const hasContent = contentFields.length > 0;
-    const title = resolveTranslationFields(postT, titleFields);
-    const childrenRaw = resolveTranslationFields(postT, contentFields);
+    const topicT = findTranslation(topic?.translations, defaultWebLocale);
+    const postT = findTranslation(post.translations, defaultWebLocale);
+    const strategy = strategies?.[post.type]?.[resolvedTopicSlug ?? ""] ?? {};
+    const presentation = resolvePostPresentation(postT, strategy);
+    const coverImage = "coverImage" in post ? post.coverImage : null;
     const href = joinUrl(
       CMS_PATHS.content["content-management"].post.pathname(resolvedTopicSlug),
       post?.id
     );
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        ResourceCard,
-        {
-          className: cn(className),
-          style: {
-            width: WIDTH,
-            height: strategy.removeCoverImage ? "none" : HEIGHT
-          },
+    return /* @__PURE__ */ jsx(
+      ResourceCard,
+      {
+        interaction: onSelect ? {
+          type: "select",
+          isSelected: !!isPicked,
+          onSelect
+        } : {
+          type: "navigate",
           href,
-          openNewTab,
-          anchorProps,
-          modelIcon: /* @__PURE__ */ jsx(File, {}),
-          badge: topicT.title,
-          statesChildren: /* @__PURE__ */ jsx(PostStateIcons, { post }),
-          titleChildren: hasTitle ? title : null,
-          contentChildren: hasContent && /* @__PURE__ */ jsx("div", { className: "line-clamp-2 h-10", style: CARD_CHILDREN_STYLES, children: childrenRaw && /* @__PURE__ */ jsx(
-            HtmlDisplay,
-            {
-              html: childrenRaw,
-              textOnly: true,
-              className: "text-sm!"
-            }
-          ) }),
-          children: !strategy.removeCoverImage && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "flex-center size-full",
-                "absolute z-0",
-                "overflow-hidden rounded-xl",
-                `${!post.isActive ? "opacity-50" : ""}`
-              ),
-              children: "coverImage" in post && post.coverImage && /* @__PURE__ */ jsx(
-                SmartImage,
-                {
-                  fileKey: post.coverImage?.key,
-                  width: 256,
-                  height: 256,
-                  fill: false
-                }
-              )
-            }
-          )
+          openNewTab
+        },
+        identity: { icon: /* @__PURE__ */ jsx(File, {}), badge: topicT.title },
+        state: /* @__PURE__ */ jsx(PostStateIcons, { post }),
+        media: strategy.media !== false ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex-center size-full overflow-hidden",
+              !post.isActive && "opacity-50"
+            ),
+            children: coverImage?.type === "VIDEO" ? /* @__PURE__ */ jsx(
+              "video",
+              {
+                src: joinUrl(storageUrl, coverImage.key),
+                autoPlay: true,
+                loop: true,
+                muted: true
+              }
+            ) : coverImage ? /* @__PURE__ */ jsx(
+              SmartImage,
+              {
+                fileKey: coverImage.key,
+                width: 256,
+                height: 256,
+                fill: false
+              }
+            ) : /* @__PURE__ */ jsx(NoData, {})
+          }
+        ) : void 0,
+        title: presentation.title || /* @__PURE__ */ jsx(NoData, {}),
+        secondary: 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, {}),
+        className,
+        style: {
+          width: WIDTH,
+          height: strategy.media === false ? void 0 : HEIGHT
         }
-      ),
-      /* @__PURE__ */ jsx(Tick, { isPicked, className: "absolute top-1 right-1" })
-    ] });
+      }
+    );
   };
 }
-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 value;
-  }
-  return void 0;
-}
 
 export { createPostCard };