@btst/stack 1.0.1 → 1.1.1

package/dist/plugins/blog/client/components/forms/post-forms.mjs

@@ -0,0 +1,398 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createPostSchema, updatePostSchema } from '../../../schemas.mjs';
+import { Button } from '@workspace/ui/components/button';
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+import { Switch } from '@workspace/ui/components/switch';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { useCreatePost, useSuspensePost, useUpdatePost } from '../../hooks/blog-hooks.mjs';
+import { slugify } from '../../../utils.mjs';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2 } from 'lucide-react';
+import { memo, useState, useMemo, Suspense, lazy } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { FeaturedImageField } from './image-field.mjs';
+import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+import { usePluginOverrides } from '@btst/stack/context';
+import { EmptyList } from '../shared/empty-list.mjs';
+import { TagsMultiSelect } from './tags-multiselect.mjs';
+
+const MarkdownEditor = lazy(
+  () => import('./markdown-editor.mjs').then((module) => ({
+    default: module.MarkdownEditor
+  }))
+);
+function PostFormBody({
+  form,
+  onSubmit,
+  submitLabel,
+  onCancel,
+  disabled,
+  errorMessage,
+  setFeaturedImageUploading,
+  initialSlugTouched = false
+}) {
+  const { localization } = usePluginOverrides("blog", {
+    localization: BLOG_LOCALIZATION
+  });
+  const [slugTouched, setSlugTouched] = useState(initialSlugTouched);
+  const nameTitle = "title";
+  const nameSlug = "slug";
+  const nameExcerpt = "excerpt";
+  const nameImage = "image";
+  const nameTags = "tags";
+  const nameContent = "content";
+  const namePublished = "published";
+  return /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { className: "w-full space-y-4", onSubmit: form.handleSubmit(onSubmit), children: [
+    errorMessage && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-3 text-red-600 text-sm", children: errorMessage }),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: nameTitle,
+        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsxs(FormLabel, { children: [
+            localization.BLOG_FORMS_TITLE_LABEL,
+            /* @__PURE__ */ jsx("span", { className: "text-destructive", children: localization.BLOG_FORMS_REQUIRED_ASTERISK })
+          ] }),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: localization.BLOG_FORMS_TITLE_PLACEHOLDER,
+              ...field,
+              value: String(field.value ?? ""),
+              onChange: (e) => {
+                const newTitle = e.target.value;
+                field.onChange(e);
+                if (!slugTouched) {
+                  form.setValue(nameSlug, slugify(newTitle));
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: nameSlug,
+        render: ({ field }) => {
+          const currentTitle = form.getValues(nameTitle);
+          const autoGeneratedSlug = slugify(String(currentTitle ?? ""));
+          const currentSlug = String(field.value ?? "");
+          return /* @__PURE__ */ jsxs(FormItem, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: localization.BLOG_FORMS_SLUG_LABEL }),
+            /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: localization.BLOG_FORMS_SLUG_PLACEHOLDER,
+                ...field,
+                value: currentSlug,
+                onChange: (e) => {
+                  const newSlug = e.target.value;
+                  field.onChange(e);
+                  if (newSlug !== autoGeneratedSlug) {
+                    setSlugTouched(true);
+                  }
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(FormMessage, {})
+          ] });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: nameExcerpt,
+        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs(FormLabel, { children: [
+            localization.BLOG_FORMS_EXCERPT_LABEL,
+            /* @__PURE__ */ jsx("span", { className: "text-destructive", children: localization.BLOG_FORMS_REQUIRED_ASTERISK })
+          ] }),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              placeholder: localization.BLOG_FORMS_EXCERPT_PLACEHOLDER,
+              className: "min-h-20",
+              value: String(field.value ?? ""),
+              onChange: field.onChange
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormDescription, {}),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: nameImage,
+        render: ({ field }) => /* @__PURE__ */ jsx(
+          FeaturedImageField,
+          {
+            isRequired: false,
+            value: String(field.value ?? ""),
+            onChange: field.onChange,
+            setFeaturedImageUploading
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: nameTags,
+        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: localization.BLOG_FORMS_TAGS_LABEL }),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            TagsMultiSelect,
+            {
+              value: Array.isArray(field.value) ? field.value : [],
+              onChange: field.onChange,
+              placeholder: localization.BLOG_FORMS_TAGS_PLACEHOLDER
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormDescription, {}),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: nameContent,
+        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs(FormLabel, { children: [
+            localization.BLOG_FORMS_CONTENT_LABEL,
+            /* @__PURE__ */ jsx("span", { className: "text-destructive", children: localization.BLOG_FORMS_REQUIRED_ASTERISK })
+          ] }),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            Suspense,
+            {
+              fallback: /* @__PURE__ */ jsx("div", { className: "min-h-80 max-w-full border-input rounded-md border shadow-xs flex items-center justify-center bg-muted/50", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }),
+              children: /* @__PURE__ */ jsx(
+                MarkdownEditor,
+                {
+                  className: "min-h-80 max-w-full border-input rounded-md border shadow-xs",
+                  value: typeof field.value === "string" ? field.value : "",
+                  onChange: (content) => {
+                    field.onChange(content);
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormDescription, {}),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: namePublished,
+        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: localization.BLOG_FORMS_PUBLISHED_LABEL }),
+            /* @__PURE__ */ jsx(FormDescription, { children: localization.BLOG_FORMS_PUBLISHED_DESCRIPTION })
+          ] }),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: !!field.value,
+              onCheckedChange: field.onChange
+            }
+          ) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-4", children: [
+      /* @__PURE__ */ jsx(Button, { type: "submit", disabled, children: submitLabel }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: onCancel,
+          disabled,
+          type: "button",
+          children: localization.BLOG_FORMS_CANCEL_BUTTON
+        }
+      )
+    ] })
+  ] }) });
+}
+const CustomPostCreateSchema = createPostSchema.omit({
+  createdAt: true,
+  updatedAt: true,
+  publishedAt: true
+});
+const CustomPostUpdateSchema = updatePostSchema.omit({
+  id: true,
+  createdAt: true,
+  updatedAt: true,
+  publishedAt: true
+});
+const addPostFormPropsAreEqual = (prevProps, nextProps) => {
+  if (prevProps.onClose !== nextProps.onClose) return false;
+  if (prevProps.onSuccess !== nextProps.onSuccess) return false;
+  return true;
+};
+const AddPostFormComponent = ({ onClose, onSuccess }) => {
+  const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
+  const { localization } = usePluginOverrides("blog", {
+    localization: BLOG_LOCALIZATION
+  });
+  const schema = CustomPostCreateSchema;
+  const {
+    mutateAsync: createPost,
+    isPending: isCreatingPost,
+    error: createPostError
+  } = useCreatePost();
+  const onSubmit = async (data) => {
+    const slug = data.slug || slugify(data.title);
+    const createdPost = await createPost({
+      title: data.title,
+      content: data.content,
+      excerpt: data.excerpt ?? "",
+      slug,
+      published: data.published ?? false,
+      publishedAt: data.published ? /* @__PURE__ */ new Date() : void 0,
+      image: data.image,
+      tags: data.tags || []
+    });
+    toast.success(localization.BLOG_FORMS_TOAST_CREATE_SUCCESS);
+    onSuccess({ published: createdPost?.published ?? false });
+  };
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      title: "",
+      content: "",
+      excerpt: "",
+      slug: void 0,
+      published: false,
+      image: "",
+      tags: []
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    PostFormBody,
+    {
+      form,
+      onSubmit,
+      submitLabel: isCreatingPost ? localization.BLOG_FORMS_SUBMIT_CREATE_PENDING : localization.BLOG_FORMS_SUBMIT_CREATE_IDLE,
+      onCancel: onClose,
+      disabled: isCreatingPost || featuredImageUploading,
+      errorMessage: createPostError?.message,
+      setFeaturedImageUploading
+    }
+  );
+};
+const AddPostForm = memo(AddPostFormComponent, addPostFormPropsAreEqual);
+const editPostFormPropsAreEqual = (prevProps, nextProps) => {
+  if (prevProps.postSlug !== nextProps.postSlug) return false;
+  if (prevProps.onClose !== nextProps.onClose) return false;
+  if (prevProps.onSuccess !== nextProps.onSuccess) return false;
+  return true;
+};
+const EditPostFormComponent = ({
+  postSlug,
+  onClose,
+  onSuccess
+}) => {
+  const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
+  const { localization } = usePluginOverrides("blog", {
+    localization: BLOG_LOCALIZATION
+  });
+  const { post } = useSuspensePost(postSlug);
+  const initialData = useMemo(() => {
+    if (!post) return {};
+    return {
+      title: post.title,
+      content: post.content,
+      excerpt: post.excerpt,
+      slug: post.slug,
+      published: post.published,
+      image: post.image || "",
+      tags: post.tags.map((tag) => ({
+        id: tag.id,
+        name: tag.name,
+        slug: tag.slug
+      }))
+    };
+  }, [post]);
+  const schema = CustomPostUpdateSchema;
+  const {
+    mutateAsync: updatePost,
+    isPending: isUpdatingPost,
+    error: updatePostError
+  } = useUpdatePost();
+  const onSubmit = async (data) => {
+    const updatedPost = await updatePost({
+      id: post.id,
+      data: {
+        id: post.id,
+        title: data.title,
+        content: data.content,
+        excerpt: data.excerpt ?? "",
+        slug: data.slug,
+        published: data.published ?? false,
+        publishedAt: data.published && !post?.published ? /* @__PURE__ */ new Date() : post?.publishedAt ? new Date(post.publishedAt) : void 0,
+        image: data.image,
+        tags: data.tags || []
+      }
+    });
+    toast.success(localization.BLOG_FORMS_TOAST_UPDATE_SUCCESS);
+    onSuccess({
+      slug: updatedPost?.slug ?? "",
+      published: updatedPost?.published ?? false
+    });
+  };
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      title: "",
+      content: "",
+      excerpt: "",
+      slug: "",
+      published: false,
+      image: "",
+      tags: []
+    },
+    values: initialData
+  });
+  if (!post) {
+    return /* @__PURE__ */ jsx(EmptyList, { message: localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION });
+  }
+  return /* @__PURE__ */ jsx(
+    PostFormBody,
+    {
+      form,
+      onSubmit,
+      submitLabel: isUpdatingPost ? localization.BLOG_FORMS_SUBMIT_UPDATE_PENDING : localization.BLOG_FORMS_SUBMIT_UPDATE_IDLE,
+      onCancel: onClose,
+      disabled: isUpdatingPost || featuredImageUploading,
+      errorMessage: updatePostError?.message,
+      setFeaturedImageUploading,
+      initialSlugTouched: !!post?.slug
+    }
+  );
+};
+const EditPostForm = memo(
+  EditPostFormComponent,
+  editPostFormPropsAreEqual
+);
+
+export { AddPostForm, EditPostForm };

package/dist/plugins/blog/client/components/forms/tags-multiselect.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const MultipleSelector = require('@workspace/ui/components/multi-select');
+const blogHooks = require('../../hooks/blog-hooks.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const MultipleSelector__default = /*#__PURE__*/_interopDefaultCompat(MultipleSelector);
+
+function TagsMultiSelect({
+  value,
+  onChange,
+  placeholder
+}) {
+  const { tags } = blogHooks.useTags();
+  const tagMap = /* @__PURE__ */ new Map();
+  const idToTagMap = /* @__PURE__ */ new Map();
+  (tags || []).forEach((tag) => {
+    tagMap.set(tag.name.toLowerCase(), tag);
+    tagMap.set(tag.slug, tag);
+    idToTagMap.set(tag.id, tag);
+  });
+  const options = (tags || []).map((tag) => ({
+    value: tag.id,
+    label: tag.name
+  }));
+  const selectedOptions = (value || []).map((tag) => {
+    if ("id" in tag && tag.id) {
+      return {
+        value: tag.id,
+        label: tag.name
+      };
+    }
+    const existingTag = tagMap.get(tag.name.toLowerCase());
+    return {
+      value: existingTag?.id || tag.name,
+      label: tag.name
+    };
+  });
+  const handleChange = (newOptions) => {
+    const tagObjects = newOptions.map((option) => {
+      const existingTag = idToTagMap.get(option.value) || Array.from(tagMap.values()).find(
+        (tag) => tag.name.toLowerCase() === option.value.toLowerCase()
+      );
+      if (existingTag) {
+        return {
+          id: existingTag.id,
+          name: existingTag.name,
+          slug: existingTag.slug
+        };
+      }
+      return { name: option.value };
+    });
+    onChange(tagObjects);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MultipleSelector__default,
+    {
+      value: selectedOptions,
+      onChange: handleChange,
+      placeholder: placeholder ?? "Search or create tags...",
+      options,
+      creatable: true,
+      hidePlaceholderWhenSelected: true,
+      className: "w-full"
+    }
+  );
+}
+
+exports.TagsMultiSelect = TagsMultiSelect;

package/dist/plugins/blog/client/components/forms/tags-multiselect.mjs

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import MultipleSelector from '@workspace/ui/components/multi-select';
+import { useTags } from '../../hooks/blog-hooks.mjs';
+
+function TagsMultiSelect({
+  value,
+  onChange,
+  placeholder
+}) {
+  const { tags } = useTags();
+  const tagMap = /* @__PURE__ */ new Map();
+  const idToTagMap = /* @__PURE__ */ new Map();
+  (tags || []).forEach((tag) => {
+    tagMap.set(tag.name.toLowerCase(), tag);
+    tagMap.set(tag.slug, tag);
+    idToTagMap.set(tag.id, tag);
+  });
+  const options = (tags || []).map((tag) => ({
+    value: tag.id,
+    label: tag.name
+  }));
+  const selectedOptions = (value || []).map((tag) => {
+    if ("id" in tag && tag.id) {
+      return {
+        value: tag.id,
+        label: tag.name
+      };
+    }
+    const existingTag = tagMap.get(tag.name.toLowerCase());
+    return {
+      value: existingTag?.id || tag.name,
+      label: tag.name
+    };
+  });
+  const handleChange = (newOptions) => {
+    const tagObjects = newOptions.map((option) => {
+      const existingTag = idToTagMap.get(option.value) || Array.from(tagMap.values()).find(
+        (tag) => tag.name.toLowerCase() === option.value.toLowerCase()
+      );
+      if (existingTag) {
+        return {
+          id: existingTag.id,
+          name: existingTag.name,
+          slug: existingTag.slug
+        };
+      }
+      return { name: option.value };
+    });
+    onChange(tagObjects);
+  };
+  return /* @__PURE__ */ jsx(
+    MultipleSelector,
+    {
+      value: selectedOptions,
+      onChange: handleChange,
+      placeholder: placeholder ?? "Search or create tags...",
+      options,
+      creatable: true,
+      hidePlaceholderWhenSelected: true,
+      className: "w-full"
+    }
+  );
+}
+
+export { TagsMultiSelect };

package/dist/plugins/blog/client/components/index.cjs

@@ -0,0 +1,17 @@
+"use client";
+'use strict';
+
+const homePage = require('./pages/home-page.cjs');
+const newPostPage = require('./pages/new-post-page.cjs');
+const postPage = require('./pages/post-page.cjs');
+const editPostPage = require('./pages/edit-post-page.cjs');
+
+const PostListPage = homePage.HomePageComponent;
+const NewPostPage = newPostPage.NewPostPageComponent;
+const PostPage = postPage.PostPageComponent;
+const EditPostPage = editPostPage.EditPostPageComponent;
+
+exports.EditPostPage = EditPostPage;
+exports.NewPostPage = NewPostPage;
+exports.PostListPage = PostListPage;
+exports.PostPage = PostPage;

package/dist/plugins/blog/client/components/index.d.cts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function HomePageComponent({ published, }: {
+    published?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function NewPostPageComponent(): react_jsx_runtime.JSX.Element;
+
+declare function PostPageComponent({ slug }: {
+    slug: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function EditPostPageComponent({ slug }: {
+    slug: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare const PostListPage: typeof HomePageComponent;
+declare const NewPostPage: typeof NewPostPageComponent;
+declare const PostPage: typeof PostPageComponent;
+declare const EditPostPage: typeof EditPostPageComponent;
+
+export { EditPostPage, NewPostPage, PostListPage, PostPage };

package/dist/plugins/blog/client/components/index.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function HomePageComponent({ published, }: {
+    published?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function NewPostPageComponent(): react_jsx_runtime.JSX.Element;
+
+declare function PostPageComponent({ slug }: {
+    slug: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function EditPostPageComponent({ slug }: {
+    slug: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare const PostListPage: typeof HomePageComponent;
+declare const NewPostPage: typeof NewPostPageComponent;
+declare const PostPage: typeof PostPageComponent;
+declare const EditPostPage: typeof EditPostPageComponent;
+
+export { EditPostPage, NewPostPage, PostListPage, PostPage };

package/dist/plugins/blog/client/components/index.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function HomePageComponent({ published, }: {
+    published?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function NewPostPageComponent(): react_jsx_runtime.JSX.Element;
+
+declare function PostPageComponent({ slug }: {
+    slug: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function EditPostPageComponent({ slug }: {
+    slug: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare const PostListPage: typeof HomePageComponent;
+declare const NewPostPage: typeof NewPostPageComponent;
+declare const PostPage: typeof PostPageComponent;
+declare const EditPostPage: typeof EditPostPageComponent;
+
+export { EditPostPage, NewPostPage, PostListPage, PostPage };

package/dist/plugins/blog/client/components/index.mjs

@@ -0,0 +1,12 @@
+"use client";
+import { HomePageComponent } from './pages/home-page.mjs';
+import { NewPostPageComponent } from './pages/new-post-page.mjs';
+import { PostPageComponent } from './pages/post-page.mjs';
+import { EditPostPageComponent } from './pages/edit-post-page.mjs';
+
+const PostListPage = HomePageComponent;
+const NewPostPage = NewPostPageComponent;
+const PostPage = PostPageComponent;
+const EditPostPage = EditPostPageComponent;
+
+export { EditPostPage, NewPostPage, PostListPage, PostPage };