@btst/stack 1.0.1 → 1.1.1

package/src/plugins/blog/client/components/forms/post-forms.tsx

@@ -0,0 +1,531 @@
+"use client";
+import {
+	createPostSchema as PostCreateSchema,
+	updatePostSchema as PostUpdateSchema,
+} from "../../../schemas";
+
+import { Button } from "@workspace/ui/components/button";
+
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} 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";
+import { slugify } from "../../../utils";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { lazy, memo, Suspense, useMemo, useState } from "react";
+import {
+	type FieldPath,
+	type SubmitHandler,
+	type UseFormReturn,
+	useForm,
+} from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { FeaturedImageField } from "./image-field";
+
+const MarkdownEditor = lazy(() =>
+	import("./markdown-editor").then((module) => ({
+		default: module.MarkdownEditor,
+	})),
+);
+import { BLOG_LOCALIZATION } from "../../localization";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { BlogPluginOverrides } from "../../overrides";
+import { EmptyList } from "../shared/empty-list";
+import { TagsMultiSelect } from "./tags-multiselect";
+
+type CommonPostFormValues = {
+	title: string;
+	content: string;
+	excerpt?: string;
+	slug?: string;
+	image?: string;
+	published?: boolean;
+	tags?: Array<{ name: string } | { id: string; name: string; slug: string }>;
+};
+
+function PostFormBody<T extends CommonPostFormValues>({
+	form,
+	onSubmit,
+	submitLabel,
+	onCancel,
+	disabled,
+	errorMessage,
+	setFeaturedImageUploading,
+	initialSlugTouched = false,
+}: {
+	form: UseFormReturn<T>;
+	onSubmit: SubmitHandler<T>;
+	submitLabel: string;
+	onCancel: () => void;
+	disabled: boolean;
+	errorMessage?: string;
+	setFeaturedImageUploading: (uploading: boolean) => void;
+	initialSlugTouched?: boolean;
+}) {
+	const { localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+	const [slugTouched, setSlugTouched] = useState(initialSlugTouched);
+	const nameTitle = "title" as FieldPath<T>;
+	const nameSlug = "slug" as FieldPath<T>;
+	const nameExcerpt = "excerpt" as FieldPath<T>;
+	const nameImage = "image" as FieldPath<T>;
+	const nameTags = "tags" as FieldPath<T>;
+	const nameContent = "content" as FieldPath<T>;
+	const namePublished = "published" as FieldPath<T>;
+	return (
+		<Form {...form}>
+			<form className="w-full space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
+				{errorMessage && (
+					<div className="rounded-md border border-red-200 bg-red-50 p-3 text-red-600 text-sm">
+						{errorMessage}
+					</div>
+				)}
+
+				<FormField
+					control={form.control}
+					name={nameTitle}
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>
+								{localization.BLOG_FORMS_TITLE_LABEL}
+								<span className="text-destructive">
+									{localization.BLOG_FORMS_REQUIRED_ASTERISK}
+								</span>
+							</FormLabel>
+							<FormControl>
+								<Input
+									placeholder={localization.BLOG_FORMS_TITLE_PLACEHOLDER}
+									{...field}
+									value={String(field.value ?? "")}
+									onChange={(e) => {
+										const newTitle = e.target.value;
+										field.onChange(e);
+										// Auto-slugify title if slug is not yet set
+										if (!slugTouched) {
+											// @ts-expect-error - slugify returns string which is compatible with slug field type
+											form.setValue(nameSlug, slugify(newTitle));
+										}
+									}}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name={nameSlug}
+					render={({ field }) => {
+						const currentTitle = form.getValues(nameTitle);
+						const autoGeneratedSlug = slugify(String(currentTitle ?? ""));
+						const currentSlug = String(field.value ?? "");
+
+						return (
+							<FormItem>
+								<FormLabel>{localization.BLOG_FORMS_SLUG_LABEL}</FormLabel>
+								<FormControl>
+									<Input
+										placeholder={localization.BLOG_FORMS_SLUG_PLACEHOLDER}
+										{...field}
+										value={currentSlug}
+										onChange={(e) => {
+											const newSlug = e.target.value;
+											field.onChange(e);
+											// Only mark as touched if the user manually edited to something different from auto-generated
+											// This allows auto-generation to continue if the slug matches what would be generated
+											if (newSlug !== autoGeneratedSlug) {
+												setSlugTouched(true);
+											}
+										}}
+									/>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						);
+					}}
+				/>
+
+				<FormField
+					control={form.control}
+					name={nameExcerpt}
+					render={({ field }) => (
+						<FormItem className="flex flex-col">
+							<FormLabel>
+								{localization.BLOG_FORMS_EXCERPT_LABEL}
+								<span className="text-destructive">
+									{localization.BLOG_FORMS_REQUIRED_ASTERISK}
+								</span>
+							</FormLabel>
+							<FormControl>
+								<Textarea
+									placeholder={localization.BLOG_FORMS_EXCERPT_PLACEHOLDER}
+									className="min-h-20"
+									value={String(field.value ?? "")}
+									onChange={field.onChange}
+								/>
+							</FormControl>
+							<FormDescription />
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name={nameImage}
+					render={({ field }) => (
+						<FeaturedImageField
+							isRequired={false}
+							value={String(field.value ?? "")}
+							onChange={field.onChange}
+							setFeaturedImageUploading={setFeaturedImageUploading}
+						/>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name={nameTags}
+					render={({ field }) => (
+						<FormItem className="flex flex-col">
+							<FormLabel>{localization.BLOG_FORMS_TAGS_LABEL}</FormLabel>
+							<FormControl>
+								<TagsMultiSelect
+									value={Array.isArray(field.value) ? field.value : []}
+									onChange={field.onChange}
+									placeholder={localization.BLOG_FORMS_TAGS_PLACEHOLDER}
+								/>
+							</FormControl>
+							<FormDescription />
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name={nameContent}
+					render={({ field }) => (
+						<FormItem className="flex flex-col">
+							<FormLabel>
+								{localization.BLOG_FORMS_CONTENT_LABEL}
+								<span className="text-destructive">
+									{localization.BLOG_FORMS_REQUIRED_ASTERISK}
+								</span>
+							</FormLabel>
+							<FormControl>
+								<Suspense
+									fallback={
+										<div className="min-h-80 max-w-full border-input rounded-md border shadow-xs flex items-center justify-center bg-muted/50">
+											<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+										</div>
+									}
+								>
+									<MarkdownEditor
+										className="min-h-80 max-w-full border-input rounded-md border shadow-xs"
+										value={typeof field.value === "string" ? field.value : ""}
+										onChange={(content: string) => {
+											field.onChange(content);
+										}}
+									/>
+								</Suspense>
+							</FormControl>
+							<FormDescription />
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name={namePublished}
+					render={({ field }) => (
+						<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+							<div className="space-y-0.5">
+								<FormLabel>{localization.BLOG_FORMS_PUBLISHED_LABEL}</FormLabel>
+								<FormDescription>
+									{localization.BLOG_FORMS_PUBLISHED_DESCRIPTION}
+								</FormDescription>
+							</div>
+							<FormControl>
+								<Switch
+									checked={!!field.value}
+									onCheckedChange={field.onChange}
+								/>
+							</FormControl>
+						</FormItem>
+					)}
+				/>
+
+				<div className="flex gap-2 pt-4">
+					<Button type="submit" disabled={disabled}>
+						{submitLabel}
+					</Button>
+					<Button
+						variant="outline"
+						onClick={onCancel}
+						disabled={disabled}
+						type="button"
+					>
+						{localization.BLOG_FORMS_CANCEL_BUTTON}
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+}
+
+const CustomPostCreateSchema = PostCreateSchema.omit({
+	createdAt: true,
+	updatedAt: true,
+	publishedAt: true,
+});
+
+const CustomPostUpdateSchema = PostUpdateSchema.omit({
+	id: true,
+	createdAt: true,
+	updatedAt: true,
+	publishedAt: true,
+});
+
+type AddPostFormProps = {
+	onClose: () => void;
+	onSuccess: (post: { published: boolean }) => void;
+};
+
+const addPostFormPropsAreEqual = (
+	prevProps: AddPostFormProps,
+	nextProps: AddPostFormProps,
+): boolean => {
+	if (prevProps.onClose !== nextProps.onClose) return false;
+	if (prevProps.onSuccess !== nextProps.onSuccess) return false;
+	return true;
+};
+
+const AddPostFormComponent = ({ onClose, onSuccess }: AddPostFormProps) => {
+	const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
+	const { localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+
+	// const { uploadImage } = useBlogContext()
+
+	const schema = CustomPostCreateSchema;
+
+	const {
+		mutateAsync: createPost,
+		isPending: isCreatingPost,
+		error: createPostError,
+	} = useCreatePost();
+
+	type AddPostFormValues = z.input<typeof schema>;
+	const onSubmit = async (data: AddPostFormValues) => {
+		// Auto-generate slug from title if not provided
+		const slug = data.slug || slugify(data.title);
+
+		// Wait for mutation to complete, including refresh
+		const createdPost = await createPost({
+			title: data.title,
+			content: data.content,
+			excerpt: data.excerpt ?? "",
+			slug,
+			published: data.published ?? false,
+			publishedAt: data.published ? new Date() : undefined,
+			image: data.image,
+			tags: data.tags || [],
+		});
+
+		toast.success(localization.BLOG_FORMS_TOAST_CREATE_SUCCESS);
+
+		// Navigate only after mutation completes
+		onSuccess({ published: createdPost?.published ?? false });
+	};
+
+	// For compatibility with resolver types that require certain required fields,
+	// cast the generics to the exact inferred input type to avoid mismatch on optional slug
+	const form = useForm<z.input<typeof schema>>({
+		resolver: zodResolver(schema),
+		defaultValues: {
+			title: "",
+			content: "",
+			excerpt: "",
+			slug: undefined,
+			published: false,
+			image: "",
+			tags: [],
+		},
+	});
+
+	return (
+		<PostFormBody
+			form={form}
+			onSubmit={onSubmit}
+			submitLabel={
+				isCreatingPost
+					? localization.BLOG_FORMS_SUBMIT_CREATE_PENDING
+					: localization.BLOG_FORMS_SUBMIT_CREATE_IDLE
+			}
+			onCancel={onClose}
+			disabled={isCreatingPost || featuredImageUploading}
+			errorMessage={createPostError?.message}
+			setFeaturedImageUploading={setFeaturedImageUploading}
+		/>
+	);
+};
+
+export const AddPostForm = memo(AddPostFormComponent, addPostFormPropsAreEqual);
+
+type EditPostFormProps = {
+	postSlug: string;
+	onClose: () => void;
+	onSuccess: (post: { slug: string; published: boolean }) => void;
+};
+
+const editPostFormPropsAreEqual = (
+	prevProps: EditPostFormProps,
+	nextProps: EditPostFormProps,
+): boolean => {
+	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,
+}: EditPostFormProps) => {
+	const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
+	const { localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+	// const { uploadImage } = useBlogContext()
+
+	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();
+
+	type EditPostFormValues = z.input<typeof schema>;
+	const onSubmit = async (data: EditPostFormValues) => {
+		// Wait for mutation to complete, including refresh
+		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
+						? new Date()
+						: post?.publishedAt
+							? new Date(post.publishedAt)
+							: undefined,
+				image: data.image,
+				tags: data.tags || [],
+			},
+		});
+
+		toast.success(localization.BLOG_FORMS_TOAST_UPDATE_SUCCESS);
+
+		// Navigate only after mutation completes
+		onSuccess({
+			slug: updatedPost?.slug ?? "",
+			published: updatedPost?.published ?? false,
+		});
+	};
+
+	const form = useForm<z.input<typeof schema>>({
+		resolver: zodResolver(schema),
+		defaultValues: {
+			title: "",
+			content: "",
+			excerpt: "",
+			slug: "",
+			published: false,
+			image: "",
+			tags: [],
+		},
+		values: initialData as z.input<typeof schema>,
+	});
+
+	if (!post) {
+		return <EmptyList message={localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION} />;
+	}
+
+	return (
+		<PostFormBody
+			form={form}
+			onSubmit={onSubmit}
+			submitLabel={
+				isUpdatingPost
+					? localization.BLOG_FORMS_SUBMIT_UPDATE_PENDING
+					: localization.BLOG_FORMS_SUBMIT_UPDATE_IDLE
+			}
+			onCancel={onClose}
+			disabled={isUpdatingPost || featuredImageUploading}
+			errorMessage={updatePostError?.message}
+			setFeaturedImageUploading={setFeaturedImageUploading}
+			initialSlugTouched={!!post?.slug}
+		/>
+	);
+};
+
+export const EditPostForm = memo(
+	EditPostFormComponent,
+	editPostFormPropsAreEqual,
+);

package/src/plugins/blog/client/components/forms/tags-multiselect.tsx

@@ -0,0 +1,79 @@
+import MultipleSelector, {
+	type Option,
+} from "@workspace/ui/components/multi-select";
+import { useTags } from "../../hooks/blog-hooks";
+import type { SerializedTag } from "../../../types";
+
+export function TagsMultiSelect({
+	value,
+	onChange,
+	placeholder,
+}: {
+	value: Array<{ name: string } | { id: string; name: string; slug: string }>;
+	onChange: (
+		value: Array<{ name: string } | { id: string; name: string; slug: string }>,
+	) => void;
+	placeholder?: string;
+}) {
+	const { tags } = useTags();
+
+	const tagMap = new Map<string, SerializedTag>();
+	const idToTagMap = new Map<string, SerializedTag>();
+	(tags || []).forEach((tag) => {
+		tagMap.set(tag.name.toLowerCase(), tag);
+		tagMap.set(tag.slug, tag);
+		idToTagMap.set(tag.id, tag);
+	});
+
+	const options: Option[] = (tags || []).map((tag) => ({
+		value: tag.id,
+		label: tag.name,
+	}));
+
+	const selectedOptions: Option[] = (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: Option[]) => {
+		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 (
+		<MultipleSelector
+			value={selectedOptions}
+			onChange={handleChange}
+			placeholder={placeholder ?? "Search or create tags..."}
+			options={options}
+			creatable={true}
+			hidePlaceholderWhenSelected={true}
+			className="w-full"
+		/>
+	);
+}

package/src/plugins/blog/client/components/index.tsx

@@ -0,0 +1,11 @@
+"use client";
+import { HomePageComponent as PostListPageImpl } from "./pages/home-page";
+import { NewPostPageComponent as NewPostPageImpl } from "./pages/new-post-page";
+import { PostPageComponent as PostPageImpl } from "./pages/post-page";
+import { EditPostPageComponent as EditPostPageImpl } from "./pages/edit-post-page";
+
+// Re-export to ensure the client boundary is preserved
+export const PostListPage = PostListPageImpl;
+export const NewPostPage = NewPostPageImpl;
+export const PostPage = PostPageImpl;
+export const EditPostPage = EditPostPageImpl;

package/src/plugins/blog/client/components/loading/form-page-skeleton.tsx

@@ -0,0 +1,75 @@
+import { PageHeaderSkeleton } from "./page-header-skeleton";
+import { PageLayout } from "../shared/page-layout";
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+export function FormPageSkeleton() {
+	return (
+		<PageLayout>
+			<div className="flex flex-col items-center gap-3">
+				<PageHeaderSkeleton />
+			</div>
+			<FormSkeleton />
+		</PageLayout>
+	);
+}
+
+function FormSkeleton() {
+	return (
+		<div className="w-full space-y-8">
+			{/* Two-column basics */}
+			<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+				<div className="space-y-2">
+					<Skeleton className="h-4 w-24" />
+					<Skeleton className="h-10 w-full rounded-md" />
+				</div>
+				<div className="space-y-2">
+					<Skeleton className="h-4 w-28" />
+					<Skeleton className="h-10 w-full rounded-md" />
+				</div>
+			</div>
+
+			{/* Long text / description */}
+			<div className="space-y-2">
+				<Skeleton className="h-4 w-24" />
+				<Skeleton className="h-24 w-full rounded-md" />
+			</div>
+
+			{/* Selects / dates */}
+			<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+				<div className="space-y-2">
+					<Skeleton className="h-4 w-28" />
+					<Skeleton className="h-10 w-full rounded-md" />
+				</div>
+				<div className="space-y-2">
+					<Skeleton className="h-4 w-24" />
+					<Skeleton className="h-10 w-full rounded-md" />
+				</div>
+			</div>
+
+			{/* Checks / toggles */}
+			<div className="space-y-3">
+				<Skeleton className="h-4 w-32" />
+				<div className="flex items-center gap-3">
+					<Skeleton className="h-5 w-5 rounded-sm" />
+					<Skeleton className="h-4 w-44" />
+				</div>
+				<div className="flex items-center gap-3">
+					<Skeleton className="h-5 w-5 rounded-sm" />
+					<Skeleton className="h-4 w-36" />
+				</div>
+			</div>
+
+			{/* Media / attachments */}
+			<div className="space-y-2">
+				<Skeleton className="h-4 w-36" />
+				<Skeleton className="h-32 w-full rounded-md" />
+			</div>
+
+			{/* Actions */}
+			<div className="flex justify-end gap-3 pt-2">
+				<Skeleton className="h-10 w-24 rounded-md" />
+				<Skeleton className="h-10 w-28 rounded-md" />
+			</div>
+		</div>
+	);
+}