@arch-cadre/blog-module 0.0.1

package/dist/ui/views.mjs

@@ -0,0 +1,232 @@
+"use client";
+import { useTranslation } from "@arch-cadre/intl/client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  ArrowLeft,
+  Eye,
+  MessageSquare,
+  Pencil,
+  Plus,
+  Trash2,
+  User as UserIcon
+} from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { createComment, createPost, deletePost, updatePost } from "../actions/index.mjs";
+import { Button } from "../components/ui/button.mjs";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "../components/ui/card.mjs";
+import { Input } from "../components/ui/input.mjs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../components/ui/table.mjs";
+import { Textarea } from "../components/ui/textarea.mjs";
+import { commentSchema, postSchema } from "../lib/validation.mjs";
+export function BlogListPage({ posts = [] }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement("div", { className: "max-w-4xl mx-auto p-6 space-y-8" }, /* @__PURE__ */ React.createElement("header", { className: "border-b pb-6" }, /* @__PURE__ */ React.createElement("h1", { className: "text-4xl font-black tracking-tighter text-primary" }, t("Blog Posts")), /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground mt-2" }, t("Reading your blog posts"))), /* @__PURE__ */ React.createElement("div", { className: "grid gap-6" }, posts.map((post) => /* @__PURE__ */ React.createElement(Link, { href: `/blog/${post.slug}`, key: post.id }, /* @__PURE__ */ React.createElement(Card, { className: "group hover:shadow-lg transition-all cursor-pointer overflow-hidden border-primary/5" }, /* @__PURE__ */ React.createElement(CardHeader, null, /* @__PURE__ */ React.createElement(CardTitle, { className: "text-2xl group-hover:text-primary transition-colors" }, post.title), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs text-muted-foreground mt-1" }, /* @__PURE__ */ React.createElement(UserIcon, { className: "size-3" }), /* @__PURE__ */ React.createElement("span", null, post.author?.name), /* @__PURE__ */ React.createElement("span", null, "\u2022"), /* @__PURE__ */ React.createElement("span", null, new Date(post.createdAt).toLocaleDateString()))), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("p", { className: "text-secondary-foreground line-clamp-2" }, post.content)))))));
+}
+function CommentForm({ postId }) {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting }
+  } = useForm({
+    resolver: zodResolver(commentSchema.omit({ postId: true }))
+  });
+  const onSubmit = async (data) => {
+    const result = await createComment({ ...data, postId });
+    if (result.success) {
+      toast.success(t("Comment added"));
+      reset();
+      router.refresh();
+    } else {
+      toast.error(result.error);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement(
+    Textarea,
+    {
+      ...register("content"),
+      placeholder: t("Add your comment here..."),
+      className: errors.content ? "border-destructive" : ""
+    }
+  ), errors.content && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-destructive" }, errors.content.message)), /* @__PURE__ */ React.createElement(Button, { type: "submit", disabled: isSubmitting, size: "sm" }, isSubmitting ? t("Please wait...") : t("Create Comment")));
+}
+export function PostDetailPage({
+  post,
+  comments = [],
+  currentUser
+}) {
+  const { t } = useTranslation();
+  if (!post)
+    return /* @__PURE__ */ React.createElement("div", { className: "p-20 text-center" }, t("Post not found"));
+  return /* @__PURE__ */ React.createElement("div", { className: "max-w-3xl mx-auto p-6 space-y-10 pb-20" }, /* @__PURE__ */ React.createElement(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-2" }, /* @__PURE__ */ React.createElement(Link, { href: "/blog" }, /* @__PURE__ */ React.createElement(ArrowLeft, { className: "size-4" }), " ", t("Back to posts"))), /* @__PURE__ */ React.createElement("article", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("h1", { className: "text-5xl font-black tracking-tighter leading-tight" }, post.title), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 text-muted-foreground" }, /* @__PURE__ */ React.createElement("div", { className: "size-8 rounded-full bg-primary/10 flex items-center justify-center" }, /* @__PURE__ */ React.createElement(UserIcon, { className: "size-4 text-primary" })), /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-foreground leading-none" }, post.author?.name), /* @__PURE__ */ React.createElement("p", { className: "text-xs" }, new Date(post.createdAt).toLocaleDateString())))), /* @__PURE__ */ React.createElement("div", { className: "prose prose-lg dark:prose-invert max-w-none whitespace-pre-wrap pt-4 border-t" }, post.content)), /* @__PURE__ */ React.createElement("section", { className: "pt-10 border-t space-y-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(MessageSquare, { className: "size-5" }), /* @__PURE__ */ React.createElement("h3", { className: "text-2xl font-bold tracking-tight" }, t("Comments"), " (", comments.length, ")")), currentUser ? /* @__PURE__ */ React.createElement("div", { className: "bg-muted/30 p-6 rounded-2xl border" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-bold mb-4" }, t("Leave a comment")), /* @__PURE__ */ React.createElement(CommentForm, { postId: post.id })) : /* @__PURE__ */ React.createElement("div", { className: "p-6 bg-amber-50 border border-amber-100 rounded-2xl text-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-medium text-amber-800" }, "Please", " ", /* @__PURE__ */ React.createElement(Link, { href: "/signin", className: "underline font-bold" }, t("Sign in")), " ", t("to join the conversation."))), /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, comments.map((comment) => /* @__PURE__ */ React.createElement("div", { key: comment.id, className: "flex gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "size-10 rounded-full bg-muted flex items-center justify-center shrink-0" }, /* @__PURE__ */ React.createElement(UserIcon, { className: "size-5 opacity-40" })), /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "font-bold text-sm" }, comment.author?.name), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] opacity-50" }, new Date(comment.createdAt).toLocaleDateString())), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-secondary-foreground leading-relaxed" }, comment.content)))), comments.length === 0 && /* @__PURE__ */ React.createElement("p", { className: "text-center text-muted-foreground text-sm py-10 italic" }, t("No comments yet. Be the first to comment!")))));
+}
+export function BlogAdminPage({ posts = [] }) {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const handleDelete = async (id) => {
+    if (!confirm(t("Confirm deletion of this post?"))) return;
+    const result = await deletePost(id);
+    if (result.success) {
+      toast.success(t("Post deleted"));
+      router.refresh();
+    } else {
+      toast.error(t("UnexpectedError") + result.error);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "p-6 space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl font-black tracking-tight text-foreground" }, t("Blog posts")), /* @__PURE__ */ React.createElement(Button, { asChild: true, size: "sm", className: "gap-2" }, /* @__PURE__ */ React.createElement(Link, { href: "/kryo/blog/new" }, /* @__PURE__ */ React.createElement(Plus, { className: "size-4" }), " ", t("New Post")))), /* @__PURE__ */ React.createElement(Card, { className: "border-primary/10 shadow-sm overflow-hidden" }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableHeader, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableHead, { className: "w-[40%]" }, t("Title")), /* @__PURE__ */ React.createElement(TableHead, null, t("Author")), /* @__PURE__ */ React.createElement(TableHead, null, t("Date")), /* @__PURE__ */ React.createElement(TableHead, { className: "text-right" }, t("Actions")))), /* @__PURE__ */ React.createElement(TableBody, null, posts.length === 0 && /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(
+    TableCell,
+    {
+      colSpan: 4,
+      className: "h-24 text-center text-muted-foreground italic"
+    },
+    t("No posts found. Create your first post!")
+  )), posts.map((post) => /* @__PURE__ */ React.createElement(TableRow, { key: post.id, className: "transition-colors" }, /* @__PURE__ */ React.createElement(TableCell, { className: "font-bold" }, post.title), /* @__PURE__ */ React.createElement(TableCell, { className: "text-xs" }, post.author?.name), /* @__PURE__ */ React.createElement(TableCell, { className: "text-muted-foreground text-xs" }, new Date(post.createdAt).toLocaleDateString()), /* @__PURE__ */ React.createElement(TableCell, { className: "text-right" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-end gap-2" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      asChild: true,
+      variant: "ghost",
+      size: "icon",
+      className: "size-8"
+    },
+    /* @__PURE__ */ React.createElement(Link, { href: `/blog/${post.slug}`, target: "_blank" }, /* @__PURE__ */ React.createElement(Eye, { className: "size-4" }))
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      asChild: true,
+      variant: "ghost",
+      size: "icon",
+      className: "size-8"
+    },
+    /* @__PURE__ */ React.createElement(Link, { href: `/kryo/blog/edit/${post.id}` }, /* @__PURE__ */ React.createElement(Pencil, { className: "size-4" }))
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "size-8 text-destructive hover:text-destructive hover:bg-destructive/10",
+      onClick: () => handleDelete(post.id)
+    },
+    /* @__PURE__ */ React.createElement(Trash2, { className: "size-4" })
+  )))))))));
+}
+export function CreatePostForm() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting }
+  } = useForm({
+    resolver: zodResolver(postSchema.omit({ slug: true }))
+  });
+  const onSubmit = async (data) => {
+    const slug = data.title.toLowerCase().replace(/ /g, "-").replace(/[^\w-]+/g, "");
+    const result = await createPost({ ...data, slug });
+    if (result.success) {
+      toast.success(t("Post created"));
+      router.push("/kryo/blog");
+      router.refresh();
+    } else {
+      toast.error(t("UnexpectedError") + result.error);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "max-w-2xl mx-auto p-6 space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(Button, { asChild: true, variant: "outline", size: "icon", className: "rounded-lg" }, /* @__PURE__ */ React.createElement(Link, { href: "/kryo/blog" }, /* @__PURE__ */ React.createElement(ArrowLeft, { className: "size-4" }))), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-black text-foreground" }, t("New Post"))), /* @__PURE__ */ React.createElement(Card, { className: "border-primary/10 shadow-lg" }, /* @__PURE__ */ React.createElement(CardContent, { className: "pt-6" }, /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-black uppercase tracking-widest opacity-50 px-1" }, t("Title")), /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      ...register("title"),
+      className: errors.title ? "border-destructive font-bold" : "font-bold",
+      placeholder: t("Title of your post")
+    }
+  ), errors.title && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-destructive font-bold" }, errors.title.message)), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-black uppercase tracking-widest opacity-50 px-1" }, t("Content")), /* @__PURE__ */ React.createElement(
+    Textarea,
+    {
+      ...register("content"),
+      rows: 12,
+      className: errors.content ? "border-destructive resize-none" : "resize-none",
+      placeholder: t("Content of your post")
+    }
+  ), errors.content && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-destructive font-bold" }, errors.content.message)), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "submit",
+      disabled: isSubmitting,
+      className: "w-full  text-sm uppercase tracking-widest transition-all"
+    },
+    isSubmitting ? t("Please wait...") : t("Publish")
+  )))));
+}
+export function EditPostForm({ post }) {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting }
+  } = useForm({
+    resolver: zodResolver(postSchema),
+    defaultValues: {
+      title: post.title,
+      content: post.content,
+      slug: post.slug
+    }
+  });
+  const onSubmit = async (data) => {
+    const result = await updatePost(post.id, data);
+    if (result.success) {
+      toast.success(t("Post updated"));
+      router.push("/kryo/blog");
+      router.refresh();
+    } else {
+      toast.error(t("UnexpectedError") + result.error);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "max-w-2xl mx-auto p-6 space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(Button, { asChild: true, variant: "outline", size: "icon", className: "rounded-lg" }, /* @__PURE__ */ React.createElement(Link, { href: "/kryo/blog" }, /* @__PURE__ */ React.createElement(ArrowLeft, { className: "size-4" }))), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-black text-foreground" }, t("Edit Post"))), /* @__PURE__ */ React.createElement(Card, { className: "border-primary/10 shadow-lg" }, /* @__PURE__ */ React.createElement(CardContent, { className: "pt-6" }, /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-black uppercase tracking-widest opacity-50 px-1" }, t("Title")), /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      ...register("title"),
+      className: errors.title ? "border-destructive font-bold" : "font-bold",
+      placeholder: t("Title of your post")
+    }
+  ), errors.title && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-destructive font-bold" }, errors.title.message)), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-black uppercase tracking-widest opacity-50 px-1" }, t("Slug")), /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      ...register("slug"),
+      className: errors.slug ? "border-destructive font-mono text-sm" : "font-mono text-sm",
+      placeholder: t("Slug URL")
+    }
+  ), errors.slug && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-destructive font-bold" }, errors.slug.message)), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-black uppercase tracking-widest opacity-50 px-1" }, t("Content")), /* @__PURE__ */ React.createElement(
+    Textarea,
+    {
+      ...register("content"),
+      rows: 12,
+      className: errors.content ? "border-destructive resize-none" : "resize-none",
+      placeholder: t("Content of your post")
+    }
+  ), errors.content && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-destructive font-bold" }, errors.content.message)), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "submit",
+      disabled: isSubmitting,
+      className: "w-full text-sm uppercase tracking-widest transition-all"
+    },
+    isSubmitting ? t("Please wait...") : t("Update")
+  )))));
+}

package/locales/en/global.json

@@ -0,0 +1,36 @@
+{
+  "Blog Posts": "Blog Posts",
+  "Reading your blog posts": "Reading your blog posts",
+  "Comment added": "Comment added",
+  "Add your comment here...": "Add your comment here...",
+  "Create Comment": "Create Comment",
+  "Post not found": "Post not found",
+  "Back to posts": "Back to posts",
+  "Comments": "Comments",
+  "Leave a comment": "Leave a comment",
+  "Sign in": "Sign in",
+  "to join the conversation.": "to join the conversation.",
+  "No comments yet. Be the first to comment!": "No comments yet. Be the first to comment!",
+  "Confirm deletion of this post?": "Confirm deletion of this post?",
+  "Post deleted": "Post deleted",
+  "Blog posts": "Blog posts",
+  "New Post": "New Post",
+  "Title": "Title",
+  "Author": "Author",
+  "Date": "Date",
+  "Actions": "Actions",
+  "No posts found. Create your first post!": "No posts found. Create your first post!",
+  "Post created": "Post created",
+  "Title of your post": "Title of your post",
+  "Content": "Content",
+  "Content of your post": "Content of your post",
+  "Publish": "Publish",
+  "Post updated": "Post updated",
+  "Edit Post": "Edit Post",
+  "Slug": "Slug",
+  "Slug URL": "Slug URL",
+  "Update": "Update",
+  "Blog": "Blog",
+  "CMS": "CMS",
+  "Blog Manager": "Blog Manager"
+}

package/manifest.json

@@ -0,0 +1,11 @@
+{
+  "id": "blog-module",
+  "name": "Kryo Blog",
+  "version": "0.0.1",
+  "description": "A lightweight blog module with posts and categories.",
+  "enabled": true,
+  "system": false,
+  "dependencies": [],
+  "extends": [],
+  "isNpm": true
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@arch-cadre/blog-module",
+  "version": "0.0.1",
+  "description": "A sample module for Kryo framework",
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./actions": {
+      "types": "./dist/actions/index.d.ts",
+      "import": "./dist/actions/index.mjs",
+      "require": "./dist/actions/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "locales",
+    "manifest.json"
+  ],
+  "scripts": {
+    "release": "npm publish --access public --no-git-checks",
+    "clean": "rm -rf ./dist",
+    "switch:dev": "node scripts/switchToSrc.js",
+    "switch:prod": "node scripts/switchToDist.js",
+    "build": "unbuild",
+    "devs": "unbuild --stub"
+  },
+  "dependencies": {
+    "@arch-cadre/modules": "^0.0.15",
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "drizzle-orm": "1.0.0-beta.15-859cf75",
+    "lucide-react": "^0.475.0",
+    "pg": "^8.18.0",
+    "react-hook-form": "^7.54.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^1.14.0",
+    "tw-animate-css": "^1.3.6",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@types/pg": "^8.16.0",
+    "@types/react": "^19",
+    "next": "16.1.1",
+    "react": "^19.0.0",
+    "typescript": "^5.3.3",
+    "unbuild": "^3.6.1"
+  },
+  "peerDependencies": {
+    "@arch-cadre/core": "^0.0.15",
+    "@arch-cadre/intl": "^0.0.15",
+    "@arch-cadre/ui": "^0.0.15",
+    "react": "^19.0.0"
+  },
+  "main": "./dist/index.mjs"
+}