create-m5kdev 0.25.3 → 0.26.2

package/templates/minimal-app/apps/webapp/src/modules/posts/components/PostCard.tsx.tpl

@@ -1,138 +1,96 @@
-import { Button, Card, Chip } from "@heroui/react";
-import { EyeIcon, PencilLineIcon, SendHorizontalIcon, Trash2Icon } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { PostRow } from "../hooks/usePostsList";
-import { formatDate, getReadingTime } from "../posts.utils";
-
-interface PostCardProps {
-  row: PostRow;
-  isSelected: boolean;
-  isPublishing: boolean;
-  isDeleting: boolean;
-  onSelect: () => void;
-  onEdit: () => void;
-  onPublish: () => void;
-  onDelete: () => void;
-}
-
-export function PostCard({
-  row,
-  isSelected,
-  isPublishing,
-  isDeleting,
-  onSelect,
-  onEdit,
-  onPublish,
-  onDelete,
-}: PostCardProps) {
-  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
-
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: post row card with nested action buttons
-    <Card
-      role="button"
-      tabIndex={0}
-      onClick={(event) => {
-        if ((event.target as HTMLElement).closest("button")) {
-          return;
-        }
-        onSelect();
-      }}
-      onKeyDown={(event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          onSelect();
-        }
-      }}
-      className={
-        isSelected
-          ? "cursor-pointer rounded-[30px] border border-emerald-300 bg-emerald-950 text-emerald-50 shadow-[0_20px_44px_rgba(31,79,70,0.24)]"
-          : "cursor-pointer rounded-[30px] border border-white/70 bg-panel shadow-[0_18px_40px_rgba(81,50,24,0.1)]"
-      }
-    >
-      <Card.Header className="flex items-start justify-between gap-4 px-5 pt-5">
-        <div className="space-y-3">
-          <div className="flex flex-wrap items-center gap-2">
-            <Chip
-              size="sm"
-              color={row.status === "published" ? "success" : "default"}
-              variant={isSelected ? "primary" : "soft"}
-            >
-              {row.status === "published" ? t("posts.filters.published") : t("posts.filters.draft")}
-            </Chip>
-            <span className={isSelected ? "text-emerald-100/80" : "text-muted-ink"}>
-              {getReadingTime(row.content)}
-            </span>
-          </div>
-          <div>
-            <h3 className="font-editorial text-3xl leading-none">{row.title}</h3>
-            <p
-              className={
-                isSelected
-                  ? "mt-3 text-sm leading-7 text-emerald-100/80"
-                  : "mt-3 text-sm leading-7 text-muted-ink"
-              }
-            >
-              {row.excerpt}
-            </p>
-          </div>
-        </div>
-        <Button
-          isIconOnly
-          className={`rounded-full ${isSelected ? "bg-emerald-100 text-emerald-950" : "bg-white/80 text-ink"}`}
-          variant={isSelected ? "secondary" : "ghost"}
-        >
-          <EyeIcon className="h-4 w-4" />
-        </Button>
-      </Card.Header>
-      <Card.Content className="flex flex-col gap-4 px-5 pb-5">
-        <div className="flex flex-wrap items-center gap-3 text-sm">
-          <span className={isSelected ? "text-emerald-100/80" : "text-muted-ink"}>
-            {t("posts.meta.updated")}: {formatDate(row.updatedAt ?? row.createdAt)}
-          </span>
-          {row.publishedAt ? (
-            <span className={isSelected ? "text-emerald-100/80" : "text-muted-ink"}>
-              {t("posts.meta.published")}: {formatDate(row.publishedAt)}
-            </span>
-          ) : null}
-        </div>
-        <div className="flex flex-wrap gap-2">
-          <Button
-            className={`rounded-full ${isSelected ? "bg-emerald-100 text-emerald-950" : ""}`}
-            variant={isSelected ? "secondary" : "ghost"}
-            onPress={onEdit}
-          >
-            <span className="inline-flex items-center gap-2">
-              <PencilLineIcon className="h-4 w-4" />
-              {t("posts.actions.edit")}
-            </span>
-          </Button>
-          {row.status === "draft" ? (
-            <Button
-              className="rounded-full"
-              variant="secondary"
-              isPending={isPublishing}
-              onPress={onPublish}
-            >
-              <span className="inline-flex items-center gap-2">
-                <SendHorizontalIcon className="h-4 w-4" />
-                {t("posts.actions.publish")}
-              </span>
-            </Button>
-          ) : null}
-          <Button
-            className="rounded-full"
-            variant="danger"
-            isPending={isDeleting}
-            onPress={onDelete}
-          >
-            <span className="inline-flex items-center gap-2">
-              <Trash2Icon className="h-4 w-4" />
-              {t("posts.actions.delete")}
-            </span>
-          </Button>
-        </div>
-      </Card.Content>
-    </Card>
-  );
-}
+import { Button, Card, Chip } from "@heroui/react";
+import { EyeIcon, PencilLineIcon, SendHorizontalIcon, Trash2Icon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { PostRow } from "../hooks/usePostsList";
+import { formatDate, getReadingTime } from "../posts.utils";
+
+interface PostCardProps {
+  row: PostRow;
+  isSelected: boolean;
+  isPublishing: boolean;
+  isDeleting: boolean;
+  onSelect: () => void;
+  onEdit: () => void;
+  onPublish: () => void;
+  onDelete: () => void;
+}
+
+export function PostCard({
+  row,
+  isSelected,
+  isPublishing,
+  isDeleting,
+  onSelect,
+  onEdit,
+  onPublish,
+  onDelete,
+}: PostCardProps) {
+  const { t } = useTranslation("{{APP_SLUG}}");
+
+  return (
+    <Card variant={isSelected ? "secondary" : undefined}>
+      <Card.Header className="flex items-start justify-between gap-4">
+        <div className="grid gap-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <Chip
+              size="sm"
+              color={row.status === "published" ? "success" : "default"}
+              variant="soft"
+            >
+              {row.status === "published" ? t("posts.filters.published") : t("posts.filters.draft")}
+            </Chip>
+            <Chip size="sm" variant="soft" color="default">
+              {getReadingTime(row.content)}
+            </Chip>
+          </div>
+          <div className="grid gap-1">
+            <Card.Title>{row.title}</Card.Title>
+            {row.excerpt ? <Card.Description>{row.excerpt}</Card.Description> : null}
+          </div>
+        </div>
+        <Button
+          isIconOnly
+          variant={isSelected ? "secondary" : "ghost"}
+          aria-label={t("posts.preview.eyebrow")}
+          onPress={onSelect}
+        >
+          <EyeIcon className="h-4 w-4" />
+        </Button>
+      </Card.Header>
+      <Card.Content>
+        <div className="flex flex-wrap gap-2">
+          <Chip size="sm" variant="soft">
+            {t("posts.meta.updated")}: {formatDate(row.updatedAt ?? row.createdAt)}
+          </Chip>
+          {row.publishedAt ? (
+            <Chip size="sm" variant="soft">
+              {t("posts.meta.published")}: {formatDate(row.publishedAt)}
+            </Chip>
+          ) : null}
+        </div>
+      </Card.Content>
+      <Card.Footer className="flex flex-wrap gap-2">
+        <Button variant="ghost" onPress={onEdit}>
+          <span className="inline-flex items-center gap-2">
+            <PencilLineIcon className="h-4 w-4" />
+            {t("posts.actions.edit")}
+          </span>
+        </Button>
+        {row.status === "draft" ? (
+          <Button variant="secondary" isPending={isPublishing} onPress={onPublish}>
+            <span className="inline-flex items-center gap-2">
+              <SendHorizontalIcon className="h-4 w-4" />
+              {t("posts.actions.publish")}
+            </span>
+          </Button>
+        ) : null}
+        <Button variant="danger" isPending={isDeleting} onPress={onDelete}>
+          <span className="inline-flex items-center gap-2">
+            <Trash2Icon className="h-4 w-4" />
+            {t("posts.actions.delete")}
+          </span>
+        </Button>
+      </Card.Footer>
+    </Card>
+  );
+}

package/templates/minimal-app/apps/webapp/src/modules/posts/components/PostEditorModal.tsx.tpl

@@ -1,124 +1,118 @@
-import { Button, FieldError, Form, Input, Label, Modal, TextArea, TextField } from "@heroui/react";
-import type { PostCreateInputSchema } from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
-import type { FormEvent } from "react";
-import { useTranslation } from "react-i18next";
-import type { PostRow } from "../hooks/usePostsList";
-
-interface PostEditorModalProps {
-  isOpen: boolean;
-  /** Row being edited; undefined means creating a new post. */
-  post?: PostRow;
-  isSaving: boolean;
-  onClose: () => void;
-  onSave: (payload: PostCreateInputSchema, id?: string) => Promise<boolean>;
-}
-
-/**
- * Uncontrolled HeroUI form: native HTML validation (`isRequired`) guards the
- * fields and values are read from FormData on submit — no form library, no
- * per-field state.
- */
-export function PostEditorModal({ isOpen, post, isSaving, onClose, onSave }: PostEditorModalProps) {
-  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
-
-  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    const payload: PostCreateInputSchema = {
-      title: String(formData.get("title") ?? "").trim(),
-      slug: String(formData.get("slug") ?? "").trim() || undefined,
-      excerpt: String(formData.get("excerpt") ?? "").trim() || undefined,
-      content: String(formData.get("content") ?? "").trim(),
-    };
-
-    if (await onSave(payload, post?.id)) {
-      onClose();
-    }
-  };
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onOpenChange={(open) => {
-        if (!open) {
-          onClose();
-        }
-      }}
-    >
-      <Modal.Backdrop>
-        <Modal.Container scroll="inside" size="lg" className="max-w-5xl">
-          <Modal.Dialog>
-            {/* key remounts the form so defaultValue resets when switching rows */}
-            <Form key={post?.id ?? "new"} className="contents" onSubmit={onSubmit}>
-              <Modal.Header className="flex flex-col gap-2 px-6 pt-6">
-                <p className="text-[0.68rem] font-semibold uppercase tracking-[0.28em] text-amber-700/80">
-                  {post ? t("posts.editor.editEyebrow") : t("posts.editor.newEyebrow")}
-                </p>
-                <Modal.Heading className="font-editorial text-4xl leading-none text-ink">
-                  {post ? t("posts.editor.editTitle") : t("posts.editor.newTitle")}
-                </Modal.Heading>
-              </Modal.Header>
-              <Modal.Body className="grid gap-4 px-6 pb-2">
-                <TextField
-                  isRequired
-                  name="title"
-                  defaultValue={post?.title ?? ""}
-                  variant="secondary"
-                  className="grid gap-2"
-                >
-                  <Label className="text-sm font-medium">{t("posts.editor.fields.title")}</Label>
-                  <Input className="rounded-lg" />
-                  <FieldError />
-                </TextField>
-                <TextField
-                  name="slug"
-                  defaultValue={post?.slug ?? ""}
-                  variant="secondary"
-                  className="grid gap-2"
-                >
-                  <Label className="text-sm font-medium">{t("posts.editor.fields.slug")}</Label>
-                  <Input className="rounded-lg" />
-                  <FieldError />
-                </TextField>
-                <TextField
-                  name="excerpt"
-                  defaultValue={post?.excerpt ?? ""}
-                  variant="secondary"
-                  className="grid gap-2"
-                >
-                  <Label className="text-sm font-medium">{t("posts.editor.fields.excerpt")}</Label>
-                  <TextArea className="rounded-lg min-h-[5.5rem]" rows={3} />
-                  <FieldError />
-                </TextField>
-                <TextField
-                  isRequired
-                  name="content"
-                  defaultValue={post?.content ?? ""}
-                  variant="secondary"
-                  className="grid gap-2"
-                >
-                  <Label className="text-sm font-medium">{t("posts.editor.fields.content")}</Label>
-                  <TextArea className="rounded-lg min-h-[12rem]" rows={10} />
-                  <FieldError />
-                </TextField>
-              </Modal.Body>
-              <Modal.Footer className="px-6 pb-6">
-                <Button className="rounded-full" variant="tertiary" type="button" onPress={onClose}>
-                  {t("posts.editor.cancel")}
-                </Button>
-                <Button
-                  className="rounded-full"
-                  variant="primary"
-                  type="submit"
-                  isPending={isSaving}
-                >
-                  {post ? t("posts.editor.save") : t("posts.editor.create")}
-                </Button>
-              </Modal.Footer>
-            </Form>
-          </Modal.Dialog>
-        </Modal.Container>
-      </Modal.Backdrop>
-    </Modal>
-  );
-}
+import { Button, FieldError, Form, Input, Label, Modal, TextArea, TextField } from "@heroui/react";
+import type { PostCreateInputSchema } from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
+import type { FormEvent } from "react";
+import { useTranslation } from "react-i18next";
+import type { PostRow } from "../hooks/usePostsList";
+
+interface PostEditorModalProps {
+  isOpen: boolean;
+  /** Row being edited; undefined means creating a new post. */
+  post?: PostRow;
+  isSaving: boolean;
+  onClose: () => void;
+  onSave: (payload: PostCreateInputSchema, id?: string) => Promise<boolean>;
+}
+
+/**
+ * Uncontrolled HeroUI form: native HTML validation (`isRequired`) guards the
+ * fields and values are read from FormData on submit — no form library, no
+ * per-field state.
+ */
+export function PostEditorModal({ isOpen, post, isSaving, onClose, onSave }: PostEditorModalProps) {
+  const { t } = useTranslation("{{APP_SLUG}}");
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const payload: PostCreateInputSchema = {
+      title: String(formData.get("title") ?? "").trim(),
+      slug: String(formData.get("slug") ?? "").trim() || undefined,
+      excerpt: String(formData.get("excerpt") ?? "").trim() || undefined,
+      content: String(formData.get("content") ?? "").trim(),
+    };
+
+    if (await onSave(payload, post?.id)) {
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <Modal.Backdrop>
+        <Modal.Container scroll="inside" size="lg" className="max-w-5xl">
+          <Modal.Dialog>
+            <Form key={post?.id ?? "new"} className="contents" onSubmit={onSubmit}>
+              <Modal.Header className="flex flex-col gap-1">
+                <p className="text-xs font-medium uppercase tracking-wide text-muted">
+                  {post ? t("posts.editor.editEyebrow") : t("posts.editor.newEyebrow")}
+                </p>
+                <Modal.Heading>
+                  {post ? t("posts.editor.editTitle") : t("posts.editor.newTitle")}
+                </Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="grid gap-4">
+                <TextField
+                  isRequired
+                  name="title"
+                  defaultValue={post?.title ?? ""}
+                  variant="secondary"
+                  className="grid gap-2"
+                >
+                  <Label>{t("posts.editor.fields.title")}</Label>
+                  <Input />
+                  <FieldError />
+                </TextField>
+                <TextField
+                  name="slug"
+                  defaultValue={post?.slug ?? ""}
+                  variant="secondary"
+                  className="grid gap-2"
+                >
+                  <Label>{t("posts.editor.fields.slug")}</Label>
+                  <Input />
+                  <FieldError />
+                </TextField>
+                <TextField
+                  name="excerpt"
+                  defaultValue={post?.excerpt ?? ""}
+                  variant="secondary"
+                  className="grid gap-2"
+                >
+                  <Label>{t("posts.editor.fields.excerpt")}</Label>
+                  <TextArea className="min-h-[5.5rem]" rows={3} />
+                  <FieldError />
+                </TextField>
+                <TextField
+                  isRequired
+                  name="content"
+                  defaultValue={post?.content ?? ""}
+                  variant="secondary"
+                  className="grid gap-2"
+                >
+                  <Label>{t("posts.editor.fields.content")}</Label>
+                  <TextArea className="min-h-[12rem]" rows={10} />
+                  <FieldError />
+                </TextField>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="tertiary" type="button" onPress={onClose}>
+                  {t("posts.editor.cancel")}
+                </Button>
+                <Button variant="primary" type="submit" isPending={isSaving}>
+                  {post ? t("posts.editor.save") : t("posts.editor.create")}
+                </Button>
+              </Modal.Footer>
+            </Form>
+          </Modal.Dialog>
+        </Modal.Container>
+      </Modal.Backdrop>
+    </Modal>
+  );
+}