@arch-cadre/blog-module 0.0.1

package/dist/ui/views.cjs

@@ -0,0 +1,448 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlogAdminPage = BlogAdminPage;
+exports.BlogListPage = BlogListPage;
+exports.CreatePostForm = CreatePostForm;
+exports.EditPostForm = EditPostForm;
+exports.PostDetailPage = PostDetailPage;
+var _client = require("@arch-cadre/intl/client");
+var _zod = require("@hookform/resolvers/zod");
+var _lucideReact = require("lucide-react");
+var _link = _interopRequireDefault(require("next/link"));
+var _navigation = require("next/navigation");
+var React = _interopRequireWildcard(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _sonner = require("sonner");
+var _actions = require("../actions/index.cjs");
+var _button = require("../components/ui/button.cjs");
+var _card = require("../components/ui/card.cjs");
+var _input = require("../components/ui/input.cjs");
+var _table = require("../components/ui/table.cjs");
+var _textarea = require("../components/ui/textarea.cjs");
+var _validation = require("../lib/validation.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function BlogListPage({
+  posts = []
+}) {
+  const {
+    t
+  } = (0, _client.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.default, {
+    href: `/blog/${post.slug}`,
+    key: post.id
+  }, /* @__PURE__ */React.createElement(_card.Card, {
+    className: "group hover:shadow-lg transition-all cursor-pointer overflow-hidden border-primary/5"
+  }, /* @__PURE__ */React.createElement(_card.CardHeader, null, /* @__PURE__ */React.createElement(_card.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(_lucideReact.User, {
+    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(_card.CardContent, null, /* @__PURE__ */React.createElement("p", {
+    className: "text-secondary-foreground line-clamp-2"
+  }, post.content)))))));
+}
+function CommentForm({
+  postId
+}) {
+  const router = (0, _navigation.useRouter)();
+  const {
+    t
+  } = (0, _client.useTranslation)();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: {
+      errors,
+      isSubmitting
+    }
+  } = (0, _reactHookForm.useForm)({
+    resolver: (0, _zod.zodResolver)(_validation.commentSchema.omit({
+      postId: true
+    }))
+  });
+  const onSubmit = async data => {
+    const result = await (0, _actions.createComment)({
+      ...data,
+      postId
+    });
+    if (result.success) {
+      _sonner.toast.success(t("Comment added"));
+      reset();
+      router.refresh();
+    } else {
+      _sonner.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.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.Button, {
+    type: "submit",
+    disabled: isSubmitting,
+    size: "sm"
+  }, isSubmitting ? t("Please wait...") : t("Create Comment")));
+}
+function PostDetailPage({
+  post,
+  comments = [],
+  currentUser
+}) {
+  const {
+    t
+  } = (0, _client.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.Button, {
+    asChild: true,
+    variant: "ghost",
+    size: "sm",
+    className: "gap-2"
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: "/blog"
+  }, /* @__PURE__ */React.createElement(_lucideReact.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(_lucideReact.User, {
+    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(_lucideReact.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.default, {
+    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(_lucideReact.User, {
+    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!")))));
+}
+function BlogAdminPage({
+  posts = []
+}) {
+  const router = (0, _navigation.useRouter)();
+  const {
+    t
+  } = (0, _client.useTranslation)();
+  const handleDelete = async id => {
+    if (!confirm(t("Confirm deletion of this post?"))) return;
+    const result = await (0, _actions.deletePost)(id);
+    if (result.success) {
+      _sonner.toast.success(t("Post deleted"));
+      router.refresh();
+    } else {
+      _sonner.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.Button, {
+    asChild: true,
+    size: "sm",
+    className: "gap-2"
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: "/kryo/blog/new"
+  }, /* @__PURE__ */React.createElement(_lucideReact.Plus, {
+    className: "size-4"
+  }), " ", t("New Post")))), /* @__PURE__ */React.createElement(_card.Card, {
+    className: "border-primary/10 shadow-sm overflow-hidden"
+  }, /* @__PURE__ */React.createElement(_table.Table, null, /* @__PURE__ */React.createElement(_table.TableHeader, null, /* @__PURE__ */React.createElement(_table.TableRow, null, /* @__PURE__ */React.createElement(_table.TableHead, {
+    className: "w-[40%]"
+  }, t("Title")), /* @__PURE__ */React.createElement(_table.TableHead, null, t("Author")), /* @__PURE__ */React.createElement(_table.TableHead, null, t("Date")), /* @__PURE__ */React.createElement(_table.TableHead, {
+    className: "text-right"
+  }, t("Actions")))), /* @__PURE__ */React.createElement(_table.TableBody, null, posts.length === 0 && /* @__PURE__ */React.createElement(_table.TableRow, null, /* @__PURE__ */React.createElement(_table.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(_table.TableRow, {
+    key: post.id,
+    className: "transition-colors"
+  }, /* @__PURE__ */React.createElement(_table.TableCell, {
+    className: "font-bold"
+  }, post.title), /* @__PURE__ */React.createElement(_table.TableCell, {
+    className: "text-xs"
+  }, post.author?.name), /* @__PURE__ */React.createElement(_table.TableCell, {
+    className: "text-muted-foreground text-xs"
+  }, new Date(post.createdAt).toLocaleDateString()), /* @__PURE__ */React.createElement(_table.TableCell, {
+    className: "text-right"
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "flex justify-end gap-2"
+  }, /* @__PURE__ */React.createElement(_button.Button, {
+    asChild: true,
+    variant: "ghost",
+    size: "icon",
+    className: "size-8"
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: `/blog/${post.slug}`,
+    target: "_blank"
+  }, /* @__PURE__ */React.createElement(_lucideReact.Eye, {
+    className: "size-4"
+  }))), /* @__PURE__ */React.createElement(_button.Button, {
+    asChild: true,
+    variant: "ghost",
+    size: "icon",
+    className: "size-8"
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: `/kryo/blog/edit/${post.id}`
+  }, /* @__PURE__ */React.createElement(_lucideReact.Pencil, {
+    className: "size-4"
+  }))), /* @__PURE__ */React.createElement(_button.Button, {
+    variant: "ghost",
+    size: "icon",
+    className: "size-8 text-destructive hover:text-destructive hover:bg-destructive/10",
+    onClick: () => handleDelete(post.id)
+  }, /* @__PURE__ */React.createElement(_lucideReact.Trash2, {
+    className: "size-4"
+  }))))))))));
+}
+function CreatePostForm() {
+  const router = (0, _navigation.useRouter)();
+  const {
+    t
+  } = (0, _client.useTranslation)();
+  const {
+    register,
+    handleSubmit,
+    formState: {
+      errors,
+      isSubmitting
+    }
+  } = (0, _reactHookForm.useForm)({
+    resolver: (0, _zod.zodResolver)(_validation.postSchema.omit({
+      slug: true
+    }))
+  });
+  const onSubmit = async data => {
+    const slug = data.title.toLowerCase().replace(/ /g, "-").replace(/[^\w-]+/g, "");
+    const result = await (0, _actions.createPost)({
+      ...data,
+      slug
+    });
+    if (result.success) {
+      _sonner.toast.success(t("Post created"));
+      router.push("/kryo/blog");
+      router.refresh();
+    } else {
+      _sonner.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.Button, {
+    asChild: true,
+    variant: "outline",
+    size: "icon",
+    className: "rounded-lg"
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: "/kryo/blog"
+  }, /* @__PURE__ */React.createElement(_lucideReact.ArrowLeft, {
+    className: "size-4"
+  }))), /* @__PURE__ */React.createElement("h1", {
+    className: "text-2xl font-black text-foreground"
+  }, t("New Post"))), /* @__PURE__ */React.createElement(_card.Card, {
+    className: "border-primary/10 shadow-lg"
+  }, /* @__PURE__ */React.createElement(_card.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.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.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.Button, {
+    type: "submit",
+    disabled: isSubmitting,
+    className: "w-full  text-sm uppercase tracking-widest transition-all"
+  }, isSubmitting ? t("Please wait...") : t("Publish"))))));
+}
+function EditPostForm({
+  post
+}) {
+  const router = (0, _navigation.useRouter)();
+  const {
+    t
+  } = (0, _client.useTranslation)();
+  const {
+    register,
+    handleSubmit,
+    formState: {
+      errors,
+      isSubmitting
+    }
+  } = (0, _reactHookForm.useForm)({
+    resolver: (0, _zod.zodResolver)(_validation.postSchema),
+    defaultValues: {
+      title: post.title,
+      content: post.content,
+      slug: post.slug
+    }
+  });
+  const onSubmit = async data => {
+    const result = await (0, _actions.updatePost)(post.id, data);
+    if (result.success) {
+      _sonner.toast.success(t("Post updated"));
+      router.push("/kryo/blog");
+      router.refresh();
+    } else {
+      _sonner.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.Button, {
+    asChild: true,
+    variant: "outline",
+    size: "icon",
+    className: "rounded-lg"
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: "/kryo/blog"
+  }, /* @__PURE__ */React.createElement(_lucideReact.ArrowLeft, {
+    className: "size-4"
+  }))), /* @__PURE__ */React.createElement("h1", {
+    className: "text-2xl font-black text-foreground"
+  }, t("Edit Post"))), /* @__PURE__ */React.createElement(_card.Card, {
+    className: "border-primary/10 shadow-lg"
+  }, /* @__PURE__ */React.createElement(_card.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.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.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.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.Button, {
+    type: "submit",
+    disabled: isSubmitting,
+    className: "w-full text-sm uppercase tracking-widest transition-all"
+  }, isSubmitting ? t("Please wait...") : t("Update"))))));
+}

package/dist/ui/views.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export declare function BlogListPage({ posts }: {
+    posts?: any[];
+}): React.JSX.Element;
+export declare function PostDetailPage({ post, comments, currentUser, }: {
+    post: any;
+    comments: any[];
+    currentUser?: any;
+}): React.JSX.Element;
+export declare function BlogAdminPage({ posts }: {
+    posts: any[];
+}): React.JSX.Element;
+export declare function CreatePostForm(): React.JSX.Element;
+export declare function EditPostForm({ post }: {
+    post: any;
+}): React.JSX.Element;