@carlonicora/nextjs-jsonapi 5.2.0 → 5.4.0

package/src/features/blog/components/admin/BlogPostContainer.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { RoundPageContainer } from "../../../../components";
+import { SharedProvider } from "../../../../contexts/SharedContext";
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { BreadcrumbItemData } from "../../../../interfaces";
+import { Badge } from "../../../../shadcnui";
+import { BlogPostProvider, useBlogPost } from "../../contexts/BlogPostContext";
+import { BlogPostDeleter } from "./BlogPostDeleter";
+import { BlogPostPublishButton } from "./BlogPostPublishButton";
+import { BlogPostTranslationPanel } from "./BlogPostTranslationPanel";
+import { BLOG_STATUS_BADGE, useBlogLanguageName } from "./BlogTranslationStatus";
+
+export type BlogPostContainerProps = {
+  postId: string;
+};
+
+/**
+ * Admin post page: one tab per language, the original first and marked
+ * "Original" (approved mockup A). Mirrors
+ * features/email-automation/components/containers/EmailAutomationContainer.tsx.
+ */
+export function BlogPostContainer({ postId }: BlogPostContainerProps) {
+  return (
+    <BlogPostProvider postId={postId}>
+      <BlogPostShell />
+    </BlogPostProvider>
+  );
+}
+
+function BlogPostShell() {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const languageName = useBlogLanguageName();
+  const { post, reload } = useBlogPost();
+
+  const translations = useMemo(() => {
+    const all = post?.translations ?? [];
+    return [
+      ...all.filter((translation) => translation.isOriginal),
+      ...all.filter((translation) => !translation.isOriginal),
+    ];
+  }, [post]);
+
+  if (!post) return null;
+
+  const title = post.original?.title ?? post.title ?? "";
+
+  const breadcrumbs: BreadcrumbItemData[] = [
+    { name: t("blog.admin.title"), href: generateUrl({ page: Modules.BlogPost }) },
+    { name: title },
+  ];
+
+  const statusLabel = {
+    draft: t("blog.status.draft"),
+    published: t("blog.status.published"),
+    unpublished: t("blog.status.unpublished"),
+  }[post.status];
+
+  const tabLabel = (translation: (typeof translations)[number]) => {
+    const parts = [languageName(translation.language)];
+    if (translation.isOriginal) parts.push(t("blog.translation.original"));
+    if (translation.aiStatus === "pending" || translation.aiStatus === "in_progress")
+      parts.push(t("blog.translation.translating"));
+    if (translation.aiStatus === "failed") parts.push(t("blog.translation.failed"));
+    return parts.join(" · ");
+  };
+
+  return (
+    <SharedProvider
+      value={{
+        breadcrumbs,
+        title: {
+          type: t("blog.admin.title"),
+          element: title,
+          functions: [
+            <Badge key="blogPostStatus" variant={BLOG_STATUS_BADGE[post.status]}>
+              {statusLabel}
+            </Badge>,
+            <BlogPostPublishButton key="blogPostPublish" />,
+            <BlogPostDeleter key="blogPostDeleter" />,
+          ],
+        },
+      }}
+    >
+      <RoundPageContainer
+        module={Modules.BlogPost}
+        id={post.id}
+        fullWidth
+        forceHeader
+        tabs={translations.map((translation) => ({
+          sectionKey: translation.language,
+          label: tabLabel(translation),
+          content: <BlogPostTranslationPanel post={post} translation={translation} onChanged={reload} />,
+        }))}
+      />
+    </SharedProvider>
+  );
+}

package/src/features/blog/components/admin/BlogPostDeleter.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { CommonDeleter } from "../../../../components";
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { useBlogPost } from "../../contexts/BlogPostContext";
+import { BlogPostService } from "../../data";
+
+/**
+ * Deletes the post and returns to the blog admin page.
+ * Mirrors features/how-to/components/forms/HowToDeleter.tsx. The dialog texts
+ * are passed explicitly: CommonDeleter's default reads `entities.<type>`, a
+ * namespace only the app may fill, so the blog's own entity name is used.
+ */
+export function BlogPostDeleter() {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const { post } = useBlogPost();
+
+  if (!post) return null;
+
+  const type = t("blog.entities.post");
+
+  return (
+    <CommonDeleter
+      title={t("common.delete.title", { type })}
+      subtitle={t("common.delete.subtitle", { type })}
+      description={<div className="text-destructive p-4 text-sm">{t("common.delete.description", { type })}</div>}
+      showLabel
+      deleteFunction={() => BlogPostService.delete({ id: post.id })}
+      redirectTo={generateUrl({ page: Modules.BlogPost })}
+    />
+  );
+}

package/src/features/blog/components/admin/BlogPostEditor.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import {
+  EditorSheet,
+  EntityMultiSelector,
+  FormBlockNote,
+  FormInput,
+  FormSelect,
+  FormTextarea,
+} from "../../../../components";
+import { Modules } from "../../../../core";
+import { getI18nSupportedLocales, useI18nLocale, useI18nRouter } from "../../../../i18n";
+import {
+  BlogCategoryInterface,
+  BlogCategoryService,
+  BlogPostInput,
+  BlogPostInterface,
+  BlogPostService,
+} from "../../data";
+import { BlogCoverImageField, BlogImageSelection, uploadBlogImage } from "./BlogCoverImageField";
+import { blogCategoryAdminName, useBlogLanguageName } from "./BlogTranslationStatus";
+import { BLOG_POST_UPLOAD_PREFIX } from "../../types/blog.constants";
+import { useBlogCategoryNames } from "../../hooks/useBlogCategoryNames";
+
+type BlogPostEditorProps = {
+  /** Edit mode when present: the post's original translation and shared fields. */
+  post?: BlogPostInterface;
+  trigger?: ReactNode;
+  onSuccess?: () => void | Promise<void>;
+};
+
+const isBodyEmpty = (body: any) => !body || (Array.isArray(body) && body.length === 0);
+
+/**
+ * Creates a post, or edits its original-language text plus the fields every
+ * language shares (cover image, categories). Saving the original makes the
+ * worker translate it again. Mirrors features/how-to/components/forms/HowToEditor.tsx.
+ */
+export function BlogPostEditor({ post, trigger, onSuccess }: BlogPostEditorProps) {
+  const t = useTranslations();
+  const categoryName = useBlogCategoryNames();
+  const router = useI18nRouter();
+  const locale = useI18nLocale();
+  const languageName = useBlogLanguageName();
+  const original = post?.original;
+  const [cover, setCover] = useState<BlogImageSelection>(null);
+  const [isBodyEmptyState, setIsBodyEmptyState] = useState<boolean>(isBodyEmpty(original?.body));
+
+  const languages = useMemo(() => getI18nSupportedLocales(), []);
+
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        id: z.string().uuid(),
+        originalLanguage: z.string().min(1, { message: t("blog.errors.language") }),
+        title: z.string().min(1, { message: t("blog.errors.title") }),
+        slug: z.string().optional(),
+        summary: z.string().optional(),
+        body: z.any(),
+        coverImage: z.string().optional(),
+        coverImageAlt: z.string().optional(),
+        categories: z.array(z.object({ id: z.string(), name: z.string() })),
+      }),
+    [],
+  );
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: post?.id || v4(),
+      originalLanguage: post?.originalLanguage ?? (languages.includes(locale) ? locale : languages[0]),
+      title: original?.title ?? "",
+      slug: original?.slug ?? "",
+      summary: original?.summary ?? "",
+      body: original?.body || [],
+      // The stored value is a signed URL, not a key: only a newly picked file
+      // writes a key here, and only then is the field sent.
+      coverImage: "",
+      coverImageAlt: original?.coverImageAlt ?? "",
+      categories: (post?.categories ?? []).map((category) => ({
+        id: category.id,
+        name: blogCategoryAdminName(category),
+      })),
+    }),
+    [post, original, languages, locale],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  const { dirtyFields } = form.formState;
+  const isFormDirty = useCallback(() => {
+    const dirty: Record<string, unknown> = { ...dirtyFields };
+    if (dirty.body && isBodyEmptyState) delete dirty.body;
+    return Object.keys(dirty).length > 0;
+  }, [dirtyFields, isBodyEmptyState]);
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("blog.entities.post")}
+      entityName={original?.title}
+      title={post ? t("blog.admin.editPost") : t("blog.admin.newPost")}
+      isEdit={!!post}
+      module={Modules.BlogPost}
+      size="lg"
+      isFormDirty={isFormDirty}
+      onSubmit={async (values) => {
+        if (values.coverImage && cover) await uploadBlogImage({ key: values.coverImage, selection: cover });
+
+        const payload: BlogPostInput = {
+          id: values.id,
+          title: values.title,
+          // An empty summary lets the worker write one; on edit the summary is
+          // sent only when changed here, so an untouched AI summary is regenerated.
+          summary: post
+            ? form.getFieldState("summary").isDirty
+              ? values.summary
+              : undefined
+            : values.summary || undefined,
+          body: values.body,
+          coverImage: values.coverImage && cover ? values.coverImage : undefined,
+          coverImageAlt: values.coverImageAlt,
+          categoryIds: values.categories.map((category) => category.id),
+        };
+
+        if (post) {
+          return BlogPostService.update({
+            ...payload,
+            originalLanguage: post.originalLanguage,
+            slug: values.slug || undefined,
+          });
+        }
+        return BlogPostService.create({ ...payload, originalLanguage: values.originalLanguage });
+      }}
+      onReset={() => {
+        setCover(null);
+        setIsBodyEmptyState(isBodyEmpty(original?.body));
+        return getDefaultValues();
+      }}
+      onSuccess={onSuccess}
+      onNavigate={(url) => router.push(url)}
+      trigger={trigger}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        {!post && (
+          <FormSelect
+            form={form}
+            id="originalLanguage"
+            name={t("blog.fields.originalLanguage")}
+            values={languages.map((language) => ({ id: language, text: languageName(language) }))}
+            isRequired
+          />
+        )}
+        <FormInput form={form} id="title" name={t("blog.fields.title")} isRequired />
+        {post && (
+          <FormInput form={form} id="slug" name={t("blog.fields.slug")} description={t("blog.fields.slugHelp")} />
+        )}
+        <FormTextarea
+          form={form}
+          id="summary"
+          name={t("blog.fields.summary")}
+          description={t("blog.fields.summaryHelp")}
+        />
+        <BlogCoverImageField
+          form={form}
+          id="coverImage"
+          label={t("blog.fields.coverImage")}
+          keyPrefix={BLOG_POST_UPLOAD_PREFIX}
+          entityId={form.getValues("id")}
+          currentUrl={post?.coverImage}
+          alt={original?.coverImageAlt}
+          selection={cover}
+          onSelectionChange={setCover}
+        />
+        <FormInput form={form} id="coverImageAlt" name={t("blog.fields.coverImageAlt")} />
+        <EntityMultiSelector<BlogCategoryInterface>
+          id="categories"
+          form={form}
+          label={t("blog.fields.categories")}
+          retriever={(params) => BlogCategoryService.findMany(params)}
+          module={Modules.BlogCategory}
+          getLabel={blogCategoryAdminName}
+          // A post's included categories carry no translations, so the stored chip
+          // names come from the category list.
+          getFormValueLabel={(value: { id: string; name?: string }) => value.name || categoryName(value.id)}
+        />
+        <FormBlockNote
+          uploadKeyPrefix={BLOG_POST_UPLOAD_PREFIX}
+          form={form}
+          id="body"
+          name={t("blog.fields.body")}
+          type="blog-post"
+          isRequired
+          onEmptyChange={setIsBodyEmptyState}
+        />
+      </div>
+    </EditorSheet>
+  );
+}

package/src/features/blog/components/admin/BlogPostPublishButton.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { errorToast } from "../../../../components";
+import { Button } from "../../../../shadcnui";
+import { useBlogPost } from "../../contexts/BlogPostContext";
+import { BlogPostService } from "../../data";
+
+/**
+ * Publish / Unpublish in the post page header. Publishing an unpublished post
+ * republishes it (the first publish date is kept server-side).
+ * Mirrors features/email-automation/components/canvas/EmailAutomationActiveSwitch.tsx.
+ */
+export function BlogPostPublishButton() {
+  const t = useTranslations();
+  const { post, reload } = useBlogPost();
+  const [saving, setSaving] = useState<boolean>(false);
+
+  if (!post) return null;
+
+  const isPublished = post.status === "published";
+
+  const toggle = async () => {
+    setSaving(true);
+    try {
+      if (isPublished) await BlogPostService.unpublish({ id: post.id });
+      else await BlogPostService.publish({ id: post.id });
+      await reload();
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant={isPublished ? "outline" : "default"}
+      onClick={() => void toggle()}
+      disabled={saving}
+    >
+      {isPublished ? <EyeOffIcon /> : <EyeIcon />}
+      {isPublished ? t("blog.actions.unpublish") : t("blog.actions.publish")}
+    </Button>
+  );
+}

package/src/features/blog/components/admin/BlogPostTranslationEditor.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { EditorSheet, FormBlockNote, FormInput, FormTextarea } from "../../../../components";
+import { Modules } from "../../../../core";
+import { BlogPostTranslationInterface, BlogPostTranslationService } from "../../data";
+import { useBlogLanguageName } from "./BlogTranslationStatus";
+import { BLOG_POST_UPLOAD_PREFIX } from "../../types/blog.constants";
+
+type BlogPostTranslationEditorProps = {
+  translation: BlogPostTranslationInterface;
+  trigger?: ReactNode;
+  onSuccess?: () => void | Promise<void>;
+};
+
+const isBodyEmpty = (body: any) => !body || (Array.isArray(body) && body.length === 0);
+
+const buildFormSchema = (t: (key: string) => string) =>
+  z.object({
+    id: z.string().uuid(),
+    title: z.string().min(1, { message: t("blog.errors.title") }),
+    slug: z.string().optional(),
+    summary: z.string().optional(),
+    body: z.any(),
+    coverImageAlt: z.string().optional(),
+  });
+
+/**
+ * Edits one non-original translation by hand. Saving marks it `manual` and
+ * re-runs nothing. Mirrors features/how-to/components/forms/HowToEditor.tsx.
+ */
+export function BlogPostTranslationEditor({ translation, trigger, onSuccess }: BlogPostTranslationEditorProps) {
+  const t = useTranslations();
+  const formSchema = useMemo(() => buildFormSchema(t), [t]);
+  const languageName = useBlogLanguageName();
+  const [isBodyEmptyState, setIsBodyEmptyState] = useState<boolean>(isBodyEmpty(translation.body));
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: translation.id,
+      title: translation.title ?? "",
+      slug: translation.slug ?? "",
+      summary: translation.summary ?? "",
+      body: translation.body || [],
+      coverImageAlt: translation.coverImageAlt ?? "",
+    }),
+    [translation],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  const { dirtyFields } = form.formState;
+  const isFormDirty = useCallback(() => {
+    const dirty: Record<string, unknown> = { ...dirtyFields };
+    if (dirty.body && isBodyEmptyState) delete dirty.body;
+    return Object.keys(dirty).length > 0;
+  }, [dirtyFields, isBodyEmptyState]);
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("blog.entities.post")}
+      entityName={translation.title}
+      title={`${t("blog.admin.editPost")} · ${languageName(translation.language)}`}
+      isEdit
+      module={Modules.BlogPostTranslation}
+      size="lg"
+      isFormDirty={isFormDirty}
+      onSubmit={async (values) =>
+        BlogPostTranslationService.update({
+          id: values.id,
+          title: values.title,
+          slug: values.slug || undefined,
+          summary: values.summary,
+          body: values.body,
+          coverImageAlt: values.coverImageAlt,
+        })
+      }
+      onReset={() => {
+        setIsBodyEmptyState(isBodyEmpty(translation.body));
+        return getDefaultValues();
+      }}
+      onSuccess={onSuccess ?? (() => {})}
+      trigger={trigger}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        <FormInput form={form} id="title" name={t("blog.fields.title")} isRequired />
+        <FormInput form={form} id="slug" name={t("blog.fields.slug")} description={t("blog.fields.slugHelp")} />
+        <FormTextarea form={form} id="summary" name={t("blog.fields.summary")} />
+        <FormInput form={form} id="coverImageAlt" name={t("blog.fields.coverImageAlt")} />
+        <FormBlockNote
+          uploadKeyPrefix={BLOG_POST_UPLOAD_PREFIX}
+          form={form}
+          id="body"
+          name={t("blog.fields.body")}
+          type="blog-post"
+          isRequired
+          onEmptyChange={setIsBodyEmptyState}
+        />
+      </div>
+    </EditorSheet>
+  );
+}

package/src/features/blog/components/admin/BlogPostTranslationPanel.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { PencilIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useState } from "react";
+import { DetailField } from "../../../../components";
+import { Alert, AlertDescription, Badge, Button } from "../../../../shadcnui";
+import { isRemoteImageSrc } from "../../../../utils";
+import { BlogPostInterface, BlogPostTranslationInterface, BlogPostTranslationService } from "../../data";
+import { BlogPostComparison, BlogPostTranslationFields } from "./BlogPostComparison";
+import { BlogPostEditor } from "./BlogPostEditor";
+import { BlogPostTranslationEditor } from "./BlogPostTranslationEditor";
+import { useBlogCategoryNames } from "../../hooks/useBlogCategoryNames";
+import { BlogTranslationStatus, useBlogDateFormatter, useBlogLanguageName } from "./BlogTranslationStatus";
+
+type BlogPostTranslationPanelProps = {
+  post: BlogPostInterface;
+  translation: BlogPostTranslationInterface;
+  /** Re-reads the post after an edit or a re-translation request. */
+  onChanged?: () => Promise<void>;
+};
+
+/**
+ * One language tab of the admin post page (approved mockup A).
+ * - Original tab: cover image, categories, status, the text fields and an Edit
+ *   that opens BlogPostEditor (which re-translates every other language).
+ * - Translation tab: where the text came from, whether it was edited by hand,
+ *   the overwrite warning, "Compare with original", the job status, the text
+ *   fields and an Edit that opens BlogPostTranslationEditor.
+ */
+export function BlogPostTranslationPanel({ post, translation, onChanged }: BlogPostTranslationPanelProps) {
+  const t = useTranslations();
+  const categoryName = useBlogCategoryNames();
+  const languageName = useBlogLanguageName();
+  const formatDate = useBlogDateFormatter();
+  const [isComparing, setIsComparing] = useState<boolean>(false);
+
+  const original = post.original;
+  const reload = onChanged ?? (async () => {});
+
+  const editTrigger = (
+    <Button render={<div />} nativeButton={false} size="sm" variant="outline">
+      <PencilIcon />
+      {t("blog.actions.edit")}
+    </Button>
+  );
+
+  if (translation.isOriginal) {
+    const statusLabel = {
+      draft: t("blog.status.draft"),
+      published: t("blog.status.published"),
+      unpublished: t("blog.status.unpublished"),
+    }[post.status];
+
+    return (
+      <div className="flex w-full flex-col gap-y-6 p-4">
+        <div className="flex items-center justify-between gap-x-4">
+          <Badge variant="softGray">{t("blog.translation.original")}</Badge>
+          <BlogPostEditor post={post} trigger={editTrigger} onSuccess={reload} />
+        </div>
+        {post.coverImage && (
+          <Image
+            src={post.coverImage}
+            alt={translation.coverImageAlt ?? translation.title}
+            width={640}
+            height={360}
+            className="h-auto max-h-72 w-auto rounded-lg object-cover"
+            unoptimized={isRemoteImageSrc(post.coverImage)}
+          />
+        )}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+          <DetailField label={t("blog.fields.status")} value={statusLabel} />
+          <DetailField label={t("blog.fields.publishedAt")} value={formatDate(post.publishedAt) || "—"} />
+          <DetailField
+            label={t("blog.fields.categories")}
+            value={
+              post.categories
+                .map((category) => categoryName(category.id))
+                .filter(Boolean)
+                .join(", ") || "—"
+            }
+          />
+        </div>
+        <BlogPostTranslationFields translation={translation} />
+      </div>
+    );
+  }
+
+  const isWorking = translation.aiStatus === "pending" || translation.aiStatus === "in_progress";
+
+  return (
+    <div className="flex w-full flex-col gap-y-6 p-4">
+      <Alert>
+        <AlertDescription className="flex flex-col gap-y-2">
+          <div className="flex flex-wrap items-center gap-2">
+            {translation.source === "manual" && <Badge variant="softAmber">{t("blog.translation.editedByHand")}</Badge>}
+            {original && translation.translatedAt && (
+              <span>
+                {t("blog.translation.translatedFrom", {
+                  language: languageName(original.language),
+                  date: formatDate(translation.translatedAt),
+                })}
+              </span>
+            )}
+          </div>
+          <span>{t("blog.translation.overwriteWarning")}</span>
+          {original && (
+            <div>
+              <Button type="button" size="sm" variant="ghost" onClick={() => setIsComparing((value) => !value)}>
+                {isComparing ? t("blog.actions.hideComparison") : t("blog.actions.compareWithOriginal")}
+              </Button>
+            </div>
+          )}
+        </AlertDescription>
+      </Alert>
+
+      <div className="flex items-center justify-between gap-x-4">
+        <BlogTranslationStatus
+          aiStatus={translation.aiStatus}
+          onRetranslate={async () => {
+            await BlogPostTranslationService.retranslate({ id: translation.id });
+            await reload();
+          }}
+        />
+        {!isWorking && <BlogPostTranslationEditor translation={translation} trigger={editTrigger} onSuccess={reload} />}
+      </div>
+
+      {isComparing && original ? (
+        <BlogPostComparison original={original} translation={translation} />
+      ) : (
+        <BlogPostTranslationFields translation={translation} />
+      )}
+    </div>
+  );
+}