@carlonicora/nextjs-jsonapi 5.3.0 → 5.4.0

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

@@ -0,0 +1,123 @@
+"use client";
+
+import { UploadIcon } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useMemo, useState } from "react";
+import { DropzoneOptions } from "react-dropzone";
+import { FileInput, FileUploader, FormFieldWrapper } from "../../../../components";
+import { isRemoteImageSrc } from "../../../../utils";
+import { S3Service } from "../../../s3/data/s3.service";
+
+/** A picked image waiting to be uploaded: the S3 key is already in the form field. */
+export type BlogImageSelection = { file: File; contentType: string } | null;
+
+const dropzone = {
+  multiple: false,
+  maxSize: 100 * 1024 * 1024,
+  preventDropOnDocument: false,
+  accept: {
+    "application/images": [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg"],
+  },
+} satisfies DropzoneOptions;
+
+/** Uploads a picked image to its presigned S3 key. */
+export async function uploadBlogImage(params: { key: string; selection: BlogImageSelection }): Promise<void> {
+  if (!params.selection || !params.key) return;
+
+  await S3Service.upload({
+    key: params.key,
+    contentType: params.selection.contentType,
+    file: params.selection.file,
+    isPublic: true,
+  });
+}
+
+type BlogCoverImageFieldProps = {
+  form: any;
+  /** The form field that receives the new S3 key ("coverImage" or "image"). */
+  id: string;
+  label: string;
+  /** BLOG_POST_UPLOAD_PREFIX or BLOG_CATEGORY_UPLOAD_PREFIX. */
+  keyPrefix: string;
+  /** The id of the post or category the image belongs to. */
+  entityId: string;
+  /** The signed URL of the image already stored, for the preview. */
+  currentUrl?: string;
+  alt?: string;
+  selection: BlogImageSelection;
+  onSelectionChange: (selection: BlogImageSelection) => void;
+};
+
+/**
+ * Dropzone for a post cover or a category image. Picking a file writes its S3
+ * key (`<keyPrefix>/<id>/<id>.<timestamp>.<ext>`, under the platform blog root,
+ * see BLOG_UPLOAD_ROOT) into the form field and hands
+ * the file to the editor, which uploads it with `uploadBlogImage` on submit.
+ */
+export function BlogCoverImageField({
+  form,
+  id,
+  label,
+  keyPrefix,
+  entityId,
+  currentUrl,
+  alt,
+  selection,
+  onSelectionChange,
+}: BlogCoverImageFieldProps) {
+  const [files, setFiles] = useState<File[] | null>(null);
+
+  useEffect(() => {
+    if (selection === null) setFiles(null);
+  }, [selection]);
+
+  const previewUrl = useMemo(() => (selection ? URL.createObjectURL(selection.file) : undefined), [selection]);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+
+  const src = previewUrl ?? currentUrl;
+
+  return (
+    <FormFieldWrapper form={form} name={id} label={label}>
+      {(field) => (
+        <FileUploader
+          value={files}
+          onValueChange={(value: File[] | null) => {
+            setFiles(value);
+            const file = value?.[0];
+            if (!file) return;
+            const extension = file.type.split("/").pop() ?? "";
+            field.onChange(`${keyPrefix}/${entityId}/${entityId}.${Date.now()}.${extension}`);
+            onSelectionChange({ file, contentType: file.type });
+          }}
+          dropzoneOptions={dropzone}
+          className="w-full"
+        >
+          <FileInput className="text-muted-foreground/50 rounded-lg outline-1 outline-dashed">
+            <div className="flex w-full flex-col items-center justify-center p-4">
+              {src ? (
+                <Image
+                  src={src}
+                  alt={alt ?? label}
+                  width={320}
+                  height={180}
+                  className="h-auto max-h-48 w-auto rounded-md object-cover"
+                  unoptimized={isRemoteImageSrc(previewUrl ? undefined : currentUrl)}
+                />
+              ) : (
+                <>
+                  <UploadIcon className="my-4 h-8 w-8" />
+                  <span className="text-muted-foreground text-xs">{label}</span>
+                </>
+              )}
+            </div>
+          </FileInput>
+        </FileUploader>
+      )}
+    </FormFieldWrapper>
+  );
+}

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { errorToast, SectionHeader } from "../../../../components";
+import { RadioGroup, RadioGroupItem } from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { BlogSettingsService } from "../../data";
+import { BLOG_LIST_LAYOUTS, BLOG_SETTINGS_ID, BlogListLayout } from "../../types/blog.constants";
+
+/**
+ * Picks the public list layout (featured / column / rail). The choice is saved
+ * at once and the public blog uses it within the cache window.
+ */
+export function BlogLayoutSetting() {
+  const t = useTranslations();
+  const [layout, setLayout] = useState<BlogListLayout | undefined>(undefined);
+  const [saving, setSaving] = useState<boolean>(false);
+
+  useEffect(() => {
+    let active = true;
+    BlogSettingsService.get()
+      .then((settings) => {
+        if (active) setLayout(settings?.listLayout ?? "featured");
+      })
+      .catch(() => {
+        if (active) setLayout("featured");
+      });
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const options: Record<BlogListLayout, { label: string; description: string }> = {
+    featured: { label: t("blog.layout.featured"), description: t("blog.layout.featuredDescription") },
+    column: { label: t("blog.layout.column"), description: t("blog.layout.columnDescription") },
+    rail: { label: t("blog.layout.rail"), description: t("blog.layout.railDescription") },
+  };
+
+  const save = async (next: BlogListLayout) => {
+    const previous = layout;
+    setLayout(next);
+    setSaving(true);
+    try {
+      await BlogSettingsService.save({ id: BLOG_SETTINGS_ID, listLayout: next });
+      showToast(t("blog.layout.saved"));
+    } catch (error) {
+      setLayout(previous);
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="flex w-full max-w-3xl flex-col gap-y-4 p-4">
+      <SectionHeader>{t("blog.layout.title")}</SectionHeader>
+      {layout && (
+        <RadioGroup
+          value={layout}
+          onValueChange={(value) => {
+            // Base UI can emit a null value; ignore it and an unchanged choice.
+            if (!value || value === layout) return;
+            void save(value as BlogListLayout);
+          }}
+          disabled={saving}
+          className="grid grid-cols-1 gap-3 md:grid-cols-3"
+        >
+          {BLOG_LIST_LAYOUTS.map((option) => (
+            <label
+              key={option}
+              htmlFor={`blog-layout-${option}`}
+              className="has-data-checked:border-primary flex cursor-pointer items-start gap-x-3 rounded-lg border p-4"
+            >
+              <RadioGroupItem value={option} id={`blog-layout-${option}`} className="mt-0.5" />
+              <span className="flex flex-col gap-y-1">
+                <span className="text-sm font-medium">{options[option].label}</span>
+                <span className="text-muted-foreground text-xs/relaxed">{options[option].description}</span>
+              </span>
+            </label>
+          ))}
+        </RadioGroup>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { BlockNoteEditorContainer, DetailField, MicroLabel } from "../../../../components";
+import { Badge } from "../../../../shadcnui";
+import { BlogPostTranslationInterface } from "../../data";
+import { useBlogLanguageName } from "./BlogTranslationStatus";
+
+type BlogPostComparisonProps = {
+  original: BlogPostTranslationInterface;
+  translation: BlogPostTranslationInterface;
+};
+
+/** One language's text fields, read-only. Shared by both sides of the comparison. */
+export function BlogPostTranslationFields({ translation }: { translation: BlogPostTranslationInterface }) {
+  const t = useTranslations();
+
+  return (
+    <div className="flex flex-col gap-y-4">
+      <DetailField label={t("blog.fields.title")} value={translation.title} />
+      <DetailField label={t("blog.fields.slug")} value={translation.slug} />
+      <DetailField label={t("blog.fields.summary")} value={translation.summary} />
+      <DetailField label={t("blog.fields.coverImageAlt")} value={translation.coverImageAlt} />
+      <DetailField label={t("blog.fields.body")}>
+        <BlockNoteEditorContainer id={translation.id} type="blog-post" initialContent={translation.body} />
+      </DetailField>
+    </div>
+  );
+}
+
+/** Original on the inline start, translation on the inline end, same fields (mockup A → B's split view). */
+export function BlogPostComparison({ original, translation }: BlogPostComparisonProps) {
+  const t = useTranslations();
+  const languageName = useBlogLanguageName();
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div className="bg-muted/40 flex flex-col gap-y-4 rounded-lg border p-4">
+        <div className="flex items-center gap-x-2">
+          <MicroLabel as="h3">{languageName(original.language)}</MicroLabel>
+          <Badge variant="softGray">{t("blog.translation.original")}</Badge>
+        </div>
+        <BlogPostTranslationFields translation={original} />
+      </div>
+      <div className="flex flex-col gap-y-4 rounded-lg border p-4">
+        <div className="flex items-center gap-x-2">
+          <MicroLabel as="h3">{languageName(translation.language)}</MicroLabel>
+          {translation.source === "manual" && <Badge variant="softAmber">{t("blog.translation.editedByHand")}</Badge>}
+        </div>
+        <BlogPostTranslationFields translation={translation} />
+      </div>
+    </div>
+  );
+}

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