@yimingliao/cms 0.0.155 → 0.0.157

package/dist/src/client/interfaces/components/resources/seo-metadata/seo-form/seo-form-side-fields.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import 'intor/react';
+import 'lucide-react';
+import '@radix-ui/react-avatar';
+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 '../../../shadcn/item.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'next/link';
+import '../../../../../../constants/paths/auth.js';
+import '../../../../../../constants/paths/main.js';
+import '../../../../../../constants/paths/resources.js';
+import '../../../../../../constants/redirect-paths.js';
+import 'mime-types';
+import { ActionButtonsCard } from '../../../ui/cards/action-buttons-card.js';
+import '../../../../../../domain/resources/admin/constants.js';
+import 'next/image';
+import { ReferenceCard } from './reference-card.js';
+
+function SeoFormSideFields({
+  hasBeenCreated,
+  isLoading,
+  isTriggering,
+  setIsOpen
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("sticky top-0", "h-fit w-max", "flex flex-col gap-6"), children: [
+    /* @__PURE__ */ jsx(
+      ActionButtonsCard,
+      {
+        action: hasBeenCreated ? "update" : "create",
+        isInitializing: isLoading,
+        isProcessing: isTriggering,
+        cancelButtonProps: { onClick: () => setIsOpen(false) }
+      }
+    ),
+    /* @__PURE__ */ jsx(ReferenceCard, {})
+  ] });
+}
+
+export { SeoFormSideFields };

package/dist/src/client/interfaces/components/resources/seo-metadata/seo-form/seo-form.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect } 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 { POST_TYPES } from '../../../../../../domain/resources/post/props.js';
+import 'mime-types';
+import { datetimeToUi } from '../../../../../../shared/form/normalizers/datetime-to-ui.js';
+import { jsonArrayToUi } from '../../../../../../shared/form/normalizers/json-array-to-ui.js';
+import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
+import { useSeoMetadataUpsertFormData } from '../../../../../applications/resources/seo-metadata/use-upsert-form-data.js';
+import 'intor/react';
+import 'lucide-react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+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 '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '../../../shadcn/item.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'next/link';
+import { Form } from '../../../ui/form/form.js';
+import { FieldsContainer } from '../../../ui/form/containers/fields-container.js';
+import 'next/image';
+import { SeoFormSideFields } from './seo-form-side-fields.js';
+
+function createSeoForm({
+  postFindFullAction,
+  seoMetadataUpsertAction,
+  useQuery,
+  useCommand,
+  buildTranslations,
+  BaseTags,
+  JsonLdTags,
+  OpenGraphTags,
+  TwitterTags
+}) {
+  return function SeoForm({
+    id,
+    type = POST_TYPES.POST,
+    slug,
+    setIsOpen
+  }) {
+    const {
+      data: post,
+      isFetching,
+      refetch
+    } = useQuery(
+      () => postFindFullAction({
+        ...id && { id },
+        type,
+        ...slug && { slug }
+      }),
+      [CACHE_KEYS.findFull, id, type, slug],
+      { select: (data) => data?.post, enabled: !!(id || slug) }
+    );
+    const postTranslations = ensureArray(post?.translations);
+    const seoMetadatas = ensureArray(post?.seoMetadatas);
+    const hasBeenCreated = seoMetadatas.length > 0;
+    const { formData, setFormData } = useSeoMetadataUpsertFormData({
+      ...id && { id },
+      buildTranslations
+    });
+    const { execute, isPending, errors } = useCommand(
+      () => seoMetadataUpsertAction({ formData }),
+      { onSuccess: () => void refetch() }
+    );
+    useEffect(() => {
+      if (post && seoMetadatas.length > 0) {
+        queueMicrotask(
+          () => setFormData({
+            postId: post.id,
+            translations: seoMetadatas.map((s) => {
+              return {
+                ...s,
+                ogType: s.ogType,
+                twitterCard: s.twitterCard,
+                // Datetime to UI
+                ogArticlePublishedTime: datetimeToUi(s.ogArticlePublishedTime),
+                ogArticleModifiedTime: datetimeToUi(s.ogArticleModifiedTime),
+                // Json Array to UI
+                jsonLd: jsonArrayToUi(s.jsonLd)
+              };
+            })
+          })
+        );
+      }
+    }, [post, seoMetadatas, setFormData]);
+    useEffect(() => {
+      if (post && !hasBeenCreated && postTranslations) {
+        queueMicrotask(
+          () => setFormData((prev) => ({
+            ...prev,
+            postId: post.id,
+            translations: prev.translations.map((prevTranslation) => {
+              const t = postTranslations.find(
+                (pt) => pt.locale === prevTranslation.locale
+              );
+              if (!t)
+                return {
+                  ...prevTranslation,
+                  ogArticlePublishedTime: datetimeToUi(
+                    (/* @__PURE__ */ new Date()).toISOString()
+                  ),
+                  ogArticleModifiedTime: datetimeToUi((/* @__PURE__ */ new Date()).toISOString())
+                };
+              const title = t.title ?? prevTranslation.title;
+              const description = t.description ?? prevTranslation.description;
+              return {
+                ...prevTranslation,
+                title,
+                description,
+                ogArticlePublishedTime: datetimeToUi((/* @__PURE__ */ new Date()).toISOString()),
+                ogArticleModifiedTime: datetimeToUi((/* @__PURE__ */ new Date()).toISOString())
+              };
+            })
+          }))
+        );
+      }
+    }, [post, hasBeenCreated, postTranslations, type, setFormData]);
+    return /* @__PURE__ */ jsx(Form, { onSubmit: () => void execute(), children: /* @__PURE__ */ jsxs(FieldsContainer, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-6 pb-64", children: [
+        /* @__PURE__ */ jsx(
+          BaseTags,
+          {
+            formData,
+            setFormData,
+            errors
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          OpenGraphTags,
+          {
+            formData,
+            setFormData,
+            errors
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TwitterTags,
+          {
+            formData,
+            setFormData,
+            errors
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          JsonLdTags,
+          {
+            formData,
+            setFormData,
+            errors
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        SeoFormSideFields,
+        {
+          hasBeenCreated,
+          isLoading: isFetching,
+          isTriggering: isPending,
+          setIsOpen
+        }
+      )
+    ] }) });
+  };
+}
+
+export { createSeoForm };

package/dist/src/client/interfaces/components/resources/seo-metadata/seo-metadata-dialog.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+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, DialogTrigger, DialogContent, DialogTitle } from '../../shadcn/dialog.js';
+import '@radix-ui/react-dropdown-menu';
+import 'lucide-react';
+import '../../shadcn/input-group.js';
+import '../../shadcn/item.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 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { Button } from '../../ui/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 'mime-types';
+import '../../../../../domain/resources/admin/constants.js';
+import 'next/image';
+
+function createSeoMetadataDialog({
+  SeoForm
+}) {
+  return function SeoMetadataDialog({
+    id,
+    type,
+    slug,
+    // ui states
+    isLoading = false,
+    isDisabled = false
+  }) {
+    const { t } = useTranslator();
+    const [isOpen, setIsOpen] = useState(false);
+    return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          isLoading,
+          isDisabled,
+          onClick: () => setIsOpen(true),
+          children: t("resources.seo-metadata.text")
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DialogContent, { className: "container h-[80%]", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Dialog" }),
+        /* @__PURE__ */ jsx("div", { className: "size-full overflow-y-scroll pr-6", children: !!(id || type && slug) && /* @__PURE__ */ jsx(SeoForm, { id, type, slug, setIsOpen }) })
+      ] })
+    ] });
+  };
+}
+
+export { createSeoMetadataDialog };

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

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { File, Tag } from 'lucide-react';
+import { PATHS } from '../../../../../constants/paths/index.js';
+import '../../../../../constants/redirect-paths.js';
+import 'mime-types';
+import { findTranslation } from '../../../../../shared/translation/find-translation.js';
+import '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 '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '../../shadcn/item.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { ResourceCard } from '../../ui/cards/resource-card/resource-card.js';
+import 'next/link';
+import '../../../../../domain/resources/admin/constants.js';
+import 'next/image';
+import { PostStatusBarIcons } from '../post/post-status-bar-icons.js';
+
+function TagCard({
+  tag,
+  // Link Props
+  openNewTab = false,
+  anchorProps,
+  // Base
+  className = ""
+}) {
+  const { t, locale } = useTranslator();
+  const title = findTranslation(tag?.translations, locale)?.title ?? "";
+  const { isActive, isSlugActive, index } = tag || {};
+  return /* @__PURE__ */ jsx(
+    ResourceCard,
+    {
+      className: cn(className, "w-72!"),
+      href: `${PATHS.resources.tag.path}/${tag?.id}`,
+      openNewTab,
+      anchorProps,
+      cardStatusBarProps: {
+        badge: /* @__PURE__ */ jsx("span", { className: "flex-center px-4", children: /* @__PURE__ */ jsx(Tag, { className: "size-4" }) }),
+        children: /* @__PURE__ */ jsx(
+          PostStatusBarIcons,
+          {
+            isActive,
+            index,
+            isSlugActive
+          }
+        )
+      },
+      cardTextContentProps: {
+        title,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(File, { className: "size-4" }),
+          /* @__PURE__ */ jsxs("p", { className: "truncate", children: [
+            ":\xA0",
+            tag && "taggedPosts" in tag ? tag.taggedPosts?.length : /* @__PURE__ */ jsx("span", { className: "text-xs opacity-50", children: t("resources.see-in-details.text") })
+          ] })
+        ] })
+      }
+    }
+  );
+}
+
+export { TagCard };

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

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } 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 'mime-types';
+import { debounce } from '../../../../../shared/utils/debounce.js';
+import { ensureArray } from '../../../../../shared/utils/ensure-array.js';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import 'intor/react';
+import 'lucide-react';
+import '@radix-ui/react-avatar';
+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 '../../shadcn/item.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { ListCardsContainer } from '../../ui/blocks/list-cards-container/list-cards-container.js';
+import 'next/link';
+import '../../../../../domain/resources/admin/constants.js';
+import 'next/image';
+import { Tick } from '../../ui/features/tick.js';
+import { ControlFieldsButtons } from '../post/control-fields-buttons.js';
+import { TagCard } from './tag-card.js';
+
+function createTagList({
+  useQuery,
+  postFindListCardsAction
+}) {
+  return function TagList({
+    usableFields,
+    //
+    setItemStates,
+    // Link Props
+    openNewTab = false,
+    // Pick Mode
+    pickedItems,
+    handleClick
+  }) {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(20);
+    const [searchString, setSearchString] = useState("");
+    const debouncedSetSearchString = useMemo(
+      () => debounce((v) => setSearchString(v), 300),
+      []
+    );
+    const [controlFields, setControlFields] = useState({
+      isActive: false,
+      isIndexActive: false,
+      isSlugActive: false
+    });
+    useEffect(() => {
+      queueMicrotask(() => setPage(1));
+    }, [controlFields, setPage]);
+    const { data, isFetching } = useQuery(
+      () => postFindListCardsAction({
+        type: "TAG",
+        page,
+        pageSize,
+        searchString
+      }),
+      [
+        CACHE_KEYS.findListCards("tag"),
+        page,
+        pageSize,
+        searchString,
+        JSON.stringify(controlFields)
+      ]
+    );
+    const tags = useMemo(() => ensureArray(data?.items), [data?.items]);
+    useEffect(() => {
+      setItemStates?.({
+        items: tags,
+        count: data?.total ?? 0,
+        isFetching
+      });
+    }, [data?.total, isFetching, tags, setItemStates]);
+    return /* @__PURE__ */ jsx(
+      ListCardsContainer,
+      {
+        page,
+        setPage,
+        pageSize,
+        setPageSize,
+        total: data?.total ?? 0,
+        searchString,
+        setSearchString: debouncedSetSearchString,
+        isFetching,
+        headerChildren: /* @__PURE__ */ jsx(
+          ControlFieldsButtons,
+          {
+            usableFields,
+            controlFields,
+            setControlFields
+          }
+        ),
+        children: tags.map((tag) => {
+          const isPicked = pickedItems?.some((item) => item.id === tag.id);
+          return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              TagCard,
+              {
+                tag,
+                openNewTab,
+                className: cn(pickedItems && !isPicked && "opacity-50"),
+                anchorProps: handleClick && {
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleClick(tag);
+                  }
+                }
+              }
+            ),
+            pickedItems && /* @__PURE__ */ jsx(
+              Tick,
+              {
+                isPicked: isPicked ?? false,
+                className: "absolute top-2 right-2"
+              }
+            )
+          ] }, tag.id);
+        })
+      }
+    );
+  };
+}
+
+export { createTagList };

package/dist/src/client/interfaces/components/resources/tag/tag-relations-section.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import 'mime-types';
+import { ensureArray } from '../../../../../shared/utils/ensure-array.js';
+import 'lucide-react';
+import 'react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+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 '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '../../shadcn/item.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'next/link';
+import '../../../../../constants/paths/auth.js';
+import '../../../../../constants/paths/main.js';
+import '../../../../../constants/paths/resources.js';
+import '../../../../../constants/redirect-paths.js';
+import { Accordion } from '../../ui/features/accordion/accordion.js';
+import { AccordionContainer } from '../../ui/features/accordion/accordion-container.js';
+import '../../../../../domain/resources/admin/constants.js';
+import 'next/image';
+
+function createTagRelationsSection({
+  PostList
+}) {
+  return function TagRelationsSection({
+    tag,
+    usableFields = ["isActive", "isIndexActive", "isSlugActive"]
+  }) {
+    const { t } = useTranslator();
+    const posts = ensureArray(tag?.taggedPosts);
+    return /* @__PURE__ */ jsx(AccordionContainer, { children: /* @__PURE__ */ jsx(
+      Accordion,
+      {
+        hasBorder: true,
+        accordionHeaderProps: {
+          count: posts.length,
+          isRelated: true,
+          children: t("resources.post.text")
+        },
+        children: /* @__PURE__ */ jsx(
+          PostList,
+          {
+            postIds: posts.map((p) => p.id),
+            openNewTab: true,
+            type: null,
+            usableFields
+          }
+        )
+      }
+    ) });
+  };
+}
+
+export { createTagRelationsSection };