@btst/plugin-cms 0.0.0-stage → 1.0.0-beta.0

package/dist/client/components/forms/content-form.mjs

@@ -0,0 +1,284 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { z } from 'zod';
+import { SteppedAutoForm } from '../../../ui/src/components/auto-form/stepped-auto-form.mjs';
+import { buildFieldConfigFromJsonSchema as buildFieldConfigFromJsonSchema$1 } from '../../../ui/src/components/auto-form/helpers.mjs';
+import { formSchemaToZod } from '../../../ui/src/lib/schema-converter.mjs';
+import { Input } from '../../../ui/src/components/input.mjs';
+import { Label } from '../../../ui/src/components/label.mjs';
+import { Badge } from '../../../ui/src/components/badge.mjs';
+import { useTranslate, usePluginOverrides } from '@btst/stack/context';
+import { CMS_PLUGIN_ID } from '../../constants.mjs';
+import { slugify } from '../../../utils.mjs';
+import { CMSFileUpload } from './file-upload.mjs';
+import { RelationField } from './relation-field.mjs';
+
+function useServerFieldErrors(form, fieldErrors) {
+  const appliedFieldsRef = useRef([]);
+  useEffect(() => {
+    if (!form) return;
+    for (const field of appliedFieldsRef.current) {
+      if (field in fieldErrors) continue;
+      const { error } = form.getFieldState(field);
+      if (error?.type === "server") {
+        form.clearErrors(field);
+      }
+    }
+    appliedFieldsRef.current = Object.keys(fieldErrors);
+    for (const [field, message] of Object.entries(fieldErrors)) {
+      form.setError(field, {
+        type: "server",
+        message: Array.isArray(message) ? message.join(", ") : message
+      });
+    }
+  }, [fieldErrors, form]);
+}
+function buildFieldConfigFromJsonSchema(jsonSchema, uploadImage, fieldComponents, imagePicker, imageInputField) {
+  const baseConfig = buildFieldConfigFromJsonSchema$1(jsonSchema, fieldComponents);
+  const properties = jsonSchema.properties;
+  if (!properties) return baseConfig;
+  const injectCustomFieldTypes = (props, targetConfig) => {
+    for (const [key, prop] of Object.entries(props)) {
+      const existing = targetConfig[key] ?? {};
+      let updated = existing;
+      if (prop.fieldType === "file" && !fieldComponents?.["file"]) {
+        if (!uploadImage && !imageInputField) {
+          updated = {
+            ...updated,
+            fieldType: () => /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive", children: [
+              "File upload requires an ",
+              /* @__PURE__ */ jsx("code", { children: "uploadImage" }),
+              " or",
+              " ",
+              /* @__PURE__ */ jsx("code", { children: "imageInputField" }),
+              " function in CMS overrides."
+            ] })
+          };
+        } else {
+          updated = {
+            ...updated,
+            fieldType: (componentProps) => /* @__PURE__ */ jsx(
+              CMSFileUpload,
+              {
+                ...componentProps,
+                uploadImage: uploadImage ?? (() => Promise.resolve("")),
+                imageInputField,
+                imagePicker
+              }
+            )
+          };
+        }
+      }
+      if (prop.fieldType === "relation" && prop.relation && !fieldComponents?.["relation"]) {
+        const relationConfig = prop.relation;
+        updated = {
+          ...updated,
+          fieldType: (componentProps) => /* @__PURE__ */ jsx(RelationField, { ...componentProps, relation: relationConfig })
+        };
+      }
+      if (prop.properties) {
+        injectCustomFieldTypes(
+          prop.properties,
+          updated
+        );
+      }
+      const items = prop.items;
+      if (items?.properties) {
+        injectCustomFieldTypes(
+          items.properties,
+          updated
+        );
+      }
+      if (Object.keys(updated).length > 0) {
+        targetConfig[key] = updated;
+      }
+    }
+  };
+  injectCustomFieldTypes(
+    properties,
+    baseConfig
+  );
+  return baseConfig;
+}
+function findSlugSourceField(jsonSchema) {
+  const properties = jsonSchema.properties;
+  if (!properties) return null;
+  const priorityFields = ["name", "title", "heading", "label"];
+  for (const field of priorityFields) {
+    if (properties[field]?.type === "string") {
+      return field;
+    }
+  }
+  for (const [key, value] of Object.entries(properties)) {
+    if (value.type === "string") {
+      return key;
+    }
+  }
+  return null;
+}
+function ContentForm({
+  contentType,
+  initialData = {},
+  initialSlug = "",
+  isEditing = false,
+  onSubmit,
+  onCancel,
+  fieldErrors,
+  errorMessage,
+  isSubmitting: isSubmittingProp
+}) {
+  const t = useTranslate();
+  const {
+    localization,
+    uploadImage,
+    imagePicker,
+    imageInputField,
+    fieldComponents
+  } = usePluginOverrides(CMS_PLUGIN_ID);
+  const [slug, setSlug] = useState(initialSlug);
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(isEditing);
+  const [isSubmittingLocal, setIsSubmittingLocal] = useState(false);
+  const [formData, setFormData] = useState(initialData);
+  const [slugError, setSlugError] = useState(null);
+  const [submitError, setSubmitError] = useState(null);
+  const isSubmitting = isSubmittingProp || isSubmittingLocal;
+  const [formInstance, setFormInstance] = useState(null);
+  const serverFieldErrors = useMemo(() => fieldErrors ?? {}, [fieldErrors]);
+  useServerFieldErrors(formInstance, serverFieldErrors);
+  const hasFieldErrors = Object.keys(serverFieldErrors).length > 0;
+  const hasSyncedPrefillRef = useRef(false);
+  useEffect(() => {
+    const hasData = Object.keys(initialData).length > 0;
+    const shouldSync = hasData && (isEditing || !hasSyncedPrefillRef.current);
+    if (shouldSync) {
+      setFormData(initialData);
+      if (!isEditing) {
+        hasSyncedPrefillRef.current = true;
+      }
+    }
+  }, [initialData, isEditing]);
+  useEffect(() => {
+    if (isEditing && initialSlug) {
+      setSlug(initialSlug);
+    }
+  }, [initialSlug, isEditing]);
+  const jsonSchema = useMemo(() => {
+    try {
+      return JSON.parse(contentType.jsonSchema);
+    } catch {
+      return {};
+    }
+  }, [contentType.jsonSchema]);
+  const zodSchema = useMemo(() => {
+    try {
+      return formSchemaToZod(jsonSchema);
+    } catch {
+      return z.object({});
+    }
+  }, [jsonSchema]);
+  const fieldConfig = useMemo(
+    () => buildFieldConfigFromJsonSchema(
+      jsonSchema,
+      uploadImage,
+      fieldComponents,
+      imagePicker,
+      imageInputField
+    ),
+    [jsonSchema, uploadImage, fieldComponents, imagePicker, imageInputField]
+  );
+  const slugSourceField = useMemo(
+    () => findSlugSourceField(jsonSchema),
+    [jsonSchema]
+  );
+  const handleValuesChange = (values, form) => {
+    if (form) {
+      setFormInstance((current) => current === form ? current : form);
+    }
+    setFormData(values);
+    if (!isEditing && !slugManuallyEdited && slugSourceField) {
+      const sourceValue = values[slugSourceField];
+      if (typeof sourceValue === "string" && sourceValue.trim()) {
+        setSlug(slugify(sourceValue));
+      }
+    }
+  };
+  const handleSubmit = async (data) => {
+    setSlugError(null);
+    setSubmitError(null);
+    if (!slug.trim()) {
+      setSlugError(
+        localization?.CMS_EDITOR_SLUG_REQUIRED ?? t("cms.editor.slugRequired", "Slug is required")
+      );
+      return;
+    }
+    setIsSubmittingLocal(true);
+    try {
+      await onSubmit({ slug, data });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : localization?.CMS_TOAST_ERROR ?? t("cms.toasts.error", "An error occurred. Please try again.");
+      setSubmitError(message);
+    } finally {
+      setIsSubmittingLocal(false);
+    }
+  };
+  const bannerMessage = errorMessage ?? submitError ?? (hasFieldErrors && !formInstance ? Object.entries(serverFieldErrors).map(
+    ([field, message]) => `${field}: ${Array.isArray(message) ? message.join(", ") : message}`
+  ).join(" \xB7 ") : void 0);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "slug", children: localization?.CMS_LABEL_SLUG ?? t("cms.common.slugLabel", "Slug") }),
+        !isEditing && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: slugManuallyEdited ? localization?.CMS_EDITOR_SLUG_MANUAL ?? t("cms.editor.slugManual", "Manually set") : localization?.CMS_EDITOR_SLUG_AUTO ?? t("cms.editor.slugAuto", "Auto-generated from first field") })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "slug",
+          value: slug,
+          onChange: (e) => {
+            setSlug(e.target.value);
+            setSlugError(null);
+            if (!isEditing) {
+              setSlugManuallyEdited(true);
+            }
+          },
+          disabled: isEditing,
+          placeholder: slugSourceField ? (localization?.CMS_EDITOR_SLUG_PLACEHOLDER_AUTO ?? t(
+            "cms.editor.slugPlaceholderAuto",
+            "Auto-generated from {field}"
+          )).replace("{field}", slugSourceField) : localization?.CMS_EDITOR_SLUG_PLACEHOLDER ?? t("cms.editor.slugPlaceholder", "Enter slug...")
+        }
+      ),
+      slugError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: slugError }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: localization?.CMS_LABEL_SLUG_DESCRIPTION ?? t(
+        "cms.common.slugDescription",
+        "URL-friendly identifier for this item"
+      ) })
+    ] }),
+    bannerMessage && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/50 bg-destructive/10 p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: bannerMessage }) }),
+    /* @__PURE__ */ jsx(
+      SteppedAutoForm,
+      {
+        formSchema: zodSchema,
+        values: formData,
+        onValuesChange: handleValuesChange,
+        onSubmit: handleSubmit,
+        fieldConfig,
+        isSubmitting,
+        submitButtonText: isSubmitting ? localization?.CMS_STATUS_SAVING ?? t("cms.common.saving", "Saving...") : localization?.CMS_BUTTON_SAVE ?? t("cms.common.save", "Save"),
+        children: onCancel && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            className: "px-4 py-2 text-sm text-muted-foreground hover:text-foreground",
+            children: localization?.CMS_BUTTON_CANCEL ?? t("cms.common.cancel", "Cancel")
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { ContentForm };

package/dist/client/components/forms/file-upload.cjs

@@ -0,0 +1,160 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const constants = require('../../constants.cjs');
+const input = require('../../../ui/src/components/input.cjs');
+const button = require('../../../ui/src/components/button.cjs');
+const form = require('../../../ui/src/components/form.cjs');
+const lucideReact = require('lucide-react');
+const label = require('../../../ui/src/components/auto-form/common/label.cjs');
+const tooltip = require('../../../ui/src/components/auto-form/common/tooltip.cjs');
+
+function CMSFileUpload({
+  label: label$1,
+  isRequired,
+  fieldConfigItem,
+  fieldProps,
+  field,
+  uploadImage,
+  imageInputField: ImageInputField,
+  imagePicker: ImagePickerTrigger
+}) {
+  const {
+    showLabel: _showLabel,
+    value: _value,
+    ...safeFieldProps
+  } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { localization } = context.usePluginOverrides(constants.CMS_PLUGIN_ID);
+  const [isUploading, setIsUploading] = React.useState(false);
+  const [previewUrl, setPreviewUrl] = React.useState(
+    field.value || null
+  );
+  React.useEffect(() => {
+    const normalizedValue = field.value || null;
+    if (normalizedValue !== previewUrl) {
+      setPreviewUrl(normalizedValue);
+    }
+  }, [field.value, previewUrl]);
+  const handleFileChange = React.useCallback(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (!file.type.startsWith("image/")) {
+        notify.error(
+          localization?.CMS_EDITOR_FILE_INVALID_TYPE ?? t("cms.editor.fileInvalidType", "Please select an image file")
+        );
+        return;
+      }
+      setIsUploading(true);
+      try {
+        const url = await uploadImage(file);
+        setPreviewUrl(url);
+        field.onChange(url);
+      } catch (error) {
+        console.error("Image upload failed:", error);
+        notify.error(
+          localization?.CMS_EDITOR_FILE_UPLOAD_FAILED ?? t("cms.editor.fileUploadFailed", "Failed to upload image")
+        );
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [field, uploadImage, notify, localization, t]
+  );
+  const handleRemove = React.useCallback(() => {
+    setPreviewUrl(null);
+    field.onChange("");
+  }, [field]);
+  if (ImageInputField) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+      showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+        label,
+        {
+          label: fieldConfigItem?.label || label$1,
+          isRequired
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        ImageInputField,
+        {
+          value: field.value || "",
+          onChange: field.onChange,
+          isRequired
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+      /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+      label,
+      {
+        label: fieldConfigItem?.label || label$1,
+        isRequired
+      }
+    ),
+    !previewUrl && /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            type: "file",
+            accept: "image/*",
+            ...safeFieldProps,
+            onChange: handleFileChange,
+            disabled: isUploading,
+            className: "cursor-pointer",
+            "data-testid": "image-upload-input"
+          }
+        ),
+        isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) })
+      ] }),
+      ImagePickerTrigger && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "image-picker-trigger", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ImagePickerTrigger,
+        {
+          onSelect: (url) => {
+            setPreviewUrl(url);
+            field.onChange(url);
+          }
+        }
+      ) })
+    ] }) }),
+    previewUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-20 w-20 overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: previewUrl,
+          alt: "Preview",
+          className: "h-full w-full object-cover",
+          "data-testid": "image-preview"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: handleRemove,
+          className: "flex items-center gap-1",
+          "data-testid": "remove-image-button",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" }),
+            "Remove"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] });
+}
+
+exports.CMSFileUpload = CMSFileUpload;

package/dist/client/components/forms/file-upload.mjs

@@ -0,0 +1,158 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { useTranslate, useNotify, usePluginOverrides } from '@btst/stack/context';
+import { CMS_PLUGIN_ID } from '../../constants.mjs';
+import { Input } from '../../../ui/src/components/input.mjs';
+import { Button } from '../../../ui/src/components/button.mjs';
+import { FormItem, FormControl, FormMessage } from '../../../ui/src/components/form.mjs';
+import { Loader2, Trash2 } from 'lucide-react';
+import AutoFormLabel from '../../../ui/src/components/auto-form/common/label.mjs';
+import AutoFormTooltip from '../../../ui/src/components/auto-form/common/tooltip.mjs';
+
+function CMSFileUpload({
+  label,
+  isRequired,
+  fieldConfigItem,
+  fieldProps,
+  field,
+  uploadImage,
+  imageInputField: ImageInputField,
+  imagePicker: ImagePickerTrigger
+}) {
+  const {
+    showLabel: _showLabel,
+    value: _value,
+    ...safeFieldProps
+  } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const t = useTranslate();
+  const notify = useNotify();
+  const { localization } = usePluginOverrides(CMS_PLUGIN_ID);
+  const [isUploading, setIsUploading] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState(
+    field.value || null
+  );
+  useEffect(() => {
+    const normalizedValue = field.value || null;
+    if (normalizedValue !== previewUrl) {
+      setPreviewUrl(normalizedValue);
+    }
+  }, [field.value, previewUrl]);
+  const handleFileChange = useCallback(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (!file.type.startsWith("image/")) {
+        notify.error(
+          localization?.CMS_EDITOR_FILE_INVALID_TYPE ?? t("cms.editor.fileInvalidType", "Please select an image file")
+        );
+        return;
+      }
+      setIsUploading(true);
+      try {
+        const url = await uploadImage(file);
+        setPreviewUrl(url);
+        field.onChange(url);
+      } catch (error) {
+        console.error("Image upload failed:", error);
+        notify.error(
+          localization?.CMS_EDITOR_FILE_UPLOAD_FAILED ?? t("cms.editor.fileUploadFailed", "Failed to upload image")
+        );
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [field, uploadImage, notify, localization, t]
+  );
+  const handleRemove = useCallback(() => {
+    setPreviewUrl(null);
+    field.onChange("");
+  }, [field]);
+  if (ImageInputField) {
+    return /* @__PURE__ */ jsxs(FormItem, { children: [
+      showLabel && /* @__PURE__ */ jsx(
+        AutoFormLabel,
+        {
+          label: fieldConfigItem?.label || label,
+          isRequired
+        }
+      ),
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+        ImageInputField,
+        {
+          value: field.value || "",
+          onChange: field.onChange,
+          isRequired
+        }
+      ) }),
+      /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+      /* @__PURE__ */ jsx(FormMessage, {})
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    showLabel && /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem?.label || label,
+        isRequired
+      }
+    ),
+    !previewUrl && /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "file",
+            accept: "image/*",
+            ...safeFieldProps,
+            onChange: handleFileChange,
+            disabled: isUploading,
+            className: "cursor-pointer",
+            "data-testid": "image-upload-input"
+          }
+        ),
+        isUploading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) })
+      ] }),
+      ImagePickerTrigger && /* @__PURE__ */ jsx("div", { "data-testid": "image-picker-trigger", children: /* @__PURE__ */ jsx(
+        ImagePickerTrigger,
+        {
+          onSelect: (url) => {
+            setPreviewUrl(url);
+            field.onChange(url);
+          }
+        }
+      ) })
+    ] }) }),
+    previewUrl && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative h-20 w-20 overflow-hidden rounded-md border", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: previewUrl,
+          alt: "Preview",
+          className: "h-full w-full object-cover",
+          "data-testid": "image-preview"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: handleRemove,
+          className: "flex items-center gap-1",
+          "data-testid": "remove-image-button",
+          children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
+            "Remove"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { CMSFileUpload };