@carlonicora/nextjs-jsonapi 5.3.0 → 5.5.0

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { RoundPageContainer } from "../../../../components";
+import { SharedProvider } from "../../../../contexts/SharedContext";
+import { Modules } from "../../../../core";
+import { BreadcrumbItemData } from "../../../../interfaces";
+import { BlogCategoriesList } from "./BlogCategoriesList";
+import { BlogLayoutSetting } from "./BlogLayoutSetting";
+import { BlogPostsList } from "./BlogPostsList";
+
+/**
+ * Blog admin page: posts, categories and the public list layout, one tab each.
+ * Client component because `module={Modules.BlogPost}` carries an icon component.
+ * Mirrors features/email-automation/components/containers/EmailAutomationsListContainer.tsx.
+ *
+ * Publishes its own breadcrumb, as CompanyProvider does for the companies list:
+ * the list root comes first and has no href because it is the current page.
+ * The lists inside the tabs omit `fullWidth` so they keep their bordered card,
+ * as PricesList does inside ProductContainer.
+ */
+export function BlogAdminContainer() {
+  const t = useTranslations();
+
+  const breadcrumbs: BreadcrumbItemData[] = [{ name: t("blog.admin.title") }];
+
+  return (
+    <SharedProvider value={{ breadcrumbs, title: { type: t("blog.admin.title") } }}>
+      <RoundPageContainer
+        module={Modules.BlogPost}
+        tabs={[
+          { sectionKey: "posts", label: t("blog.tabs.posts"), content: <BlogPostsList /> },
+          { sectionKey: "categories", label: t("blog.tabs.categories"), content: <BlogCategoriesList /> },
+          { sectionKey: "layout", label: t("blog.tabs.layout"), content: <BlogLayoutSetting /> },
+        ]}
+      />
+    </SharedProvider>
+  );
+}

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { TagIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { Button, EmptyState } from "../../../../shadcnui";
+import { BlogCategoryFields, BlogCategoryInterface, BlogCategoryService } from "../../data";
+import "../../hooks/useBlogCategoryTableStructure";
+import { BlogCategoryEditor } from "./BlogCategoryEditor";
+
+type BlogCategoriesListProps = {
+  /** Pass only when the list is the page's whole content inside a `RoundPageContainer fullWidth`; omit it in a tab so the list keeps its bordered card. */
+  fullWidth?: boolean;
+};
+
+/**
+ * Admin categories table. Categories have no page of their own: creating and
+ * editing both stay on this tab and refresh the list.
+ * Mirrors features/email-automation/components/lists/EmailAutomationsList.tsx.
+ */
+export function BlogCategoriesList({ fullWidth }: BlogCategoriesListProps = {}) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<BlogCategoryInterface> = useDataListRetriever({
+    retriever: (params) => BlogCategoryService.findMany(params),
+    retrieverParams: {},
+    module: Modules.BlogCategory,
+  });
+
+  const functions: ReactNode[] = [
+    <BlogCategoryEditor
+      key="create-blog-category"
+      onSuccess={data.refresh}
+      trigger={
+        <Button render={<div />} nativeButton={false} size="sm" variant="outline">
+          {t("blog.admin.newCategory")}
+        </Button>
+      }
+    />,
+  ];
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[BlogCategoryFields.name, BlogCategoryFields.languages]}
+      tableGeneratorType={Modules.BlogCategory}
+      functions={functions}
+      fullWidth={fullWidth}
+      title={t("blog.entities.categories")}
+      emptyState={<EmptyState icon={TagIcon} title={t("blog.admin.emptyCategories")} />}
+    />
+  );
+}

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

@@ -0,0 +1,230 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ChevronDownIcon } from "lucide-react";
+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, FormInput, FormSelect, FormTextarea, SectionHeader } from "../../../../components";
+import { Modules } from "../../../../core";
+import { getI18nSupportedLocales, useI18nLocale } from "../../../../i18n";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../shadcnui";
+import {
+  BlogCategoryInterface,
+  BlogCategoryService,
+  BlogCategoryTranslationInterface,
+  BlogCategoryTranslationService,
+} from "../../data";
+import { BlogCoverImageField, BlogImageSelection, uploadBlogImage } from "./BlogCoverImageField";
+import { BlogTranslationStatus, useBlogLanguageName } from "./BlogTranslationStatus";
+import { BLOG_CATEGORY_UPLOAD_PREFIX } from "../../types/blog.constants";
+
+type BlogCategoryEditorProps = {
+  /** Edit mode when present. */
+  category?: BlogCategoryInterface;
+  trigger?: ReactNode;
+  onSuccess?: () => void | Promise<void>;
+};
+
+const buildTranslationSchema = (t: (key: string) => string) =>
+  z.object({
+    id: z.string(),
+    name: z.string().min(1, { message: t("blog.errors.name") }),
+    slug: z.string().optional(),
+    description: z.string().optional(),
+  });
+
+const buildFormSchema = (t: (key: string) => string) =>
+  z.object({
+    id: z.string().uuid(),
+    originalLanguage: z.string().min(1, { message: t("blog.errors.language") }),
+    name: z.string().min(1, { message: t("blog.errors.name") }),
+    slug: z.string().optional(),
+    description: z.string().optional(),
+    image: z.string().optional(),
+    translations: z.array(buildTranslationSchema(t)),
+  });
+
+type TranslationValues = z.infer<ReturnType<typeof buildTranslationSchema>>;
+
+const sameTranslation = (a: TranslationValues, b?: TranslationValues) =>
+  !!b && a.name === b.name && (a.slug ?? "") === (b.slug ?? "") && (a.description ?? "") === (b.description ?? "");
+
+/**
+ * Creates a category, or edits its original-language text and image plus, in
+ * edit mode, each AI translation by hand (one collapsible section per language).
+ * Submit updates the category when the original changed (which re-translates
+ * every other language) and each translation that changed (marked `manual`).
+ * Mirrors features/how-to/components/forms/HowToEditor.tsx.
+ */
+export function BlogCategoryEditor({ category, trigger, onSuccess }: BlogCategoryEditorProps) {
+  const t = useTranslations();
+  const formSchema = useMemo(() => buildFormSchema(t), [t]);
+  const locale = useI18nLocale();
+  const languageName = useBlogLanguageName();
+  const [image, setImage] = useState<BlogImageSelection>(null);
+
+  const languages = useMemo(() => getI18nSupportedLocales(), []);
+  const original = category?.original;
+  const translations: BlogCategoryTranslationInterface[] = useMemo(
+    () => (category?.translations ?? []).filter((translation) => !translation.isOriginal),
+    [category],
+  );
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: category?.id || v4(),
+      originalLanguage: category?.originalLanguage ?? (languages.includes(locale) ? locale : languages[0]),
+      name: original?.name ?? category?.name ?? "",
+      slug: original?.slug ?? "",
+      description: original?.description ?? "",
+      // The stored value is a signed URL, not a key: only a newly picked file writes a key.
+      image: "",
+      translations: translations.map((translation) => ({
+        id: translation.id,
+        name: translation.name ?? "",
+        slug: translation.slug ?? "",
+        description: translation.description ?? "",
+      })),
+    }),
+    [category, original, translations, languages, locale],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("blog.entities.category")}
+      entityName={original?.name ?? category?.name}
+      title={category ? t("blog.admin.editCategory") : t("blog.admin.newCategory")}
+      isEdit={!!category}
+      module={Modules.BlogCategory}
+      size="md"
+      onSubmit={async (values) => {
+        if (values.image && image) await uploadBlogImage({ key: values.image, selection: image });
+        const imageKey = values.image && image ? values.image : undefined;
+
+        if (!category) {
+          return BlogCategoryService.create({
+            id: values.id,
+            originalLanguage: values.originalLanguage,
+            name: values.name,
+            description: values.description,
+            image: imageKey,
+          });
+        }
+
+        const defaults = getDefaultValues();
+        const originalChanged =
+          !!imageKey ||
+          !sameTranslation(
+            { id: values.id, name: values.name, slug: values.slug, description: values.description },
+            { id: defaults.id, name: defaults.name, slug: defaults.slug, description: defaults.description },
+          );
+
+        if (originalChanged) {
+          await BlogCategoryService.update({
+            id: values.id,
+            originalLanguage: category?.originalLanguage,
+            name: values.name,
+            slug: values.slug || undefined,
+            description: values.description,
+            image: imageKey,
+          });
+        }
+
+        for (const translation of values.translations) {
+          const before = defaults.translations.find((candidate) => candidate.id === translation.id);
+          if (sameTranslation(translation, before)) continue;
+          await BlogCategoryTranslationService.update({
+            id: translation.id,
+            name: translation.name,
+            slug: translation.slug || undefined,
+            description: translation.description,
+          });
+        }
+
+        return { id: values.id };
+      }}
+      onReset={() => {
+        setImage(null);
+        return getDefaultValues();
+      }}
+      onSuccess={onSuccess ?? (() => {})}
+      trigger={trigger}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        {!category && (
+          <FormSelect
+            form={form}
+            id="originalLanguage"
+            name={t("blog.fields.originalLanguage")}
+            values={languages.map((language) => ({ id: language, text: languageName(language) }))}
+            isRequired
+          />
+        )}
+        <FormInput form={form} id="name" name={t("blog.fields.name")} isRequired />
+        {category && (
+          <FormInput form={form} id="slug" name={t("blog.fields.slug")} description={t("blog.fields.slugHelp")} />
+        )}
+        <FormTextarea form={form} id="description" name={t("blog.fields.description")} />
+        <BlogCoverImageField
+          form={form}
+          id="image"
+          label={t("blog.fields.image")}
+          keyPrefix={BLOG_CATEGORY_UPLOAD_PREFIX}
+          entityId={form.getValues("id")}
+          currentUrl={category?.image}
+          selection={image}
+          onSelectionChange={setImage}
+        />
+
+        {translations.length > 0 && (
+          <div className="flex flex-col gap-y-2">
+            <SectionHeader className="mt-2">{t("blog.fields.languages")}</SectionHeader>
+            {translations.map((translation, index) => (
+              <Collapsible key={translation.id} className="rounded-md border">
+                <CollapsibleTrigger className="flex w-full items-center justify-between gap-x-2 px-3 py-2 text-start">
+                  <span className="flex items-center gap-x-2 text-sm font-medium">
+                    {languageName(translation.language)}
+                    <BlogTranslationStatus aiStatus={translation.aiStatus} />
+                  </span>
+                  <ChevronDownIcon className="text-muted-foreground size-4" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="flex flex-col gap-y-4 border-t p-3">
+                  {translation.aiStatus === "failed" && (
+                    <BlogTranslationStatus
+                      aiStatus={translation.aiStatus}
+                      onRetranslate={async () => {
+                        await BlogCategoryTranslationService.retranslate({ id: translation.id });
+                        await onSuccess?.();
+                      }}
+                    />
+                  )}
+                  <FormInput form={form} id={`translations.${index}.name`} name={t("blog.fields.name")} isRequired />
+                  <FormInput
+                    form={form}
+                    id={`translations.${index}.slug`}
+                    name={t("blog.fields.slug")}
+                    description={t("blog.fields.slugHelp")}
+                  />
+                  <FormTextarea
+                    form={form}
+                    id={`translations.${index}.description`}
+                    name={t("blog.fields.description")}
+                  />
+                </CollapsibleContent>
+              </Collapsible>
+            ))}
+          </div>
+        )}
+      </div>
+    </EditorSheet>
+  );
+}

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