@btst/stack 1.4.0 → 1.5.0

package/dist/packages/better-stack/src/plugins/cms/client/components/forms/content-form.cjs

@@ -0,0 +1,299 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const z = require('zod');
+const sonner = require('sonner');
+const index$1 = require('../../../../../../../ui/src/components/ui/auto-form/index.cjs');
+const input = require('../../../../../../../ui/src/components/input.cjs');
+const label = require('../../../../../../../ui/src/components/label.cjs');
+const badge = require('../../../../../../../ui/src/components/badge.cjs');
+const context = require('@btst/stack/context');
+const utils = require('../../../utils.cjs');
+const index = require('../../localization/index.cjs');
+const fileUpload = require('./file-upload.cjs');
+
+function jsonSchemaToZodWithCoercion(jsonSchema) {
+  const shape = {};
+  const properties = jsonSchema.properties || {};
+  const required = jsonSchema.required || [];
+  for (const [key, prop] of Object.entries(properties)) {
+    let fieldSchema;
+    const typeValue = Array.isArray(prop.type) ? prop.type[0] : prop.type;
+    if (prop.enum && Array.isArray(prop.enum) && prop.enum.length > 0) {
+      const stringValues = prop.enum.filter(
+        (v) => typeof v === "string"
+      );
+      if (stringValues.length > 0) {
+        fieldSchema = z.z.enum(stringValues);
+      } else {
+        fieldSchema = z.z.string();
+      }
+    } else {
+      switch (typeValue) {
+        case "number":
+        case "integer": {
+          let numSchema = z.z.coerce.number();
+          if (prop.minimum !== void 0) {
+            numSchema = numSchema.min(prop.minimum);
+          }
+          if (prop.maximum !== void 0) {
+            numSchema = numSchema.max(prop.maximum);
+          }
+          fieldSchema = numSchema;
+          break;
+        }
+        case "boolean": {
+          fieldSchema = z.z.boolean();
+          if (prop.default !== void 0) {
+            fieldSchema = fieldSchema.default(
+              prop.default
+            );
+          }
+          break;
+        }
+        case "string": {
+          if (prop.format === "date" || prop.format === "date-time") {
+            fieldSchema = z.z.coerce.date();
+          } else {
+            let strSchema = z.z.string();
+            if (prop.minLength !== void 0) {
+              strSchema = strSchema.min(prop.minLength);
+            }
+            if (prop.maxLength !== void 0) {
+              strSchema = strSchema.max(prop.maxLength);
+            }
+            fieldSchema = strSchema;
+          }
+          break;
+        }
+        default: {
+          fieldSchema = z.z.string();
+        }
+      }
+    }
+    if (prop.default !== void 0 && typeValue !== "boolean") {
+      fieldSchema = fieldSchema.default(prop.default);
+    }
+    if (!required.includes(key)) {
+      fieldSchema = fieldSchema.optional();
+    }
+    shape[key] = fieldSchema;
+  }
+  return z.z.object(shape);
+}
+const BUILTIN_FIELD_TYPES = [
+  "checkbox",
+  "date",
+  "select",
+  "radio",
+  "switch",
+  "textarea",
+  "number",
+  "file",
+  "fallback"
+];
+function buildFieldConfigFromJsonSchema(jsonSchema, storedFieldConfig, uploadImage, fieldComponents) {
+  const fieldConfig = {};
+  const properties = jsonSchema.properties;
+  if (!properties) return fieldConfig;
+  for (const [key, value] of Object.entries(properties)) {
+    const config = {};
+    if (value.description) {
+      config.description = value.description;
+    }
+    if (value.placeholder) {
+      config.inputProps = {
+        placeholder: value.placeholder
+      };
+    }
+    if (storedFieldConfig?.[key]) {
+      const storedConfig = storedFieldConfig[key];
+      const fieldType = storedConfig.fieldType;
+      if (fieldType) {
+        if (fieldComponents?.[fieldType]) {
+          const CustomComponent = fieldComponents[fieldType];
+          config.fieldType = (props) => /* @__PURE__ */ jsxRuntime.jsx(CustomComponent, { ...props });
+        } else if (fieldType === "file") {
+          if (!uploadImage) {
+            config.fieldType = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive", children: [
+              "File upload requires an ",
+              /* @__PURE__ */ jsxRuntime.jsx("code", { children: "uploadImage" }),
+              " function in CMS overrides."
+            ] });
+          } else {
+            config.fieldType = (props) => /* @__PURE__ */ jsxRuntime.jsx(fileUpload.CMSFileUpload, { ...props, uploadImage });
+          }
+        } else if (BUILTIN_FIELD_TYPES.includes(
+          fieldType
+        )) {
+          config.fieldType = fieldType;
+        } else {
+          console.warn(
+            `CMS: Unknown fieldType "${fieldType}" for field "${key}". Provide a component via fieldComponents override or use a built-in type.`
+          );
+        }
+      }
+    }
+    if (Object.keys(config).length > 0) {
+      fieldConfig[key] = config;
+    }
+  }
+  return fieldConfig;
+}
+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
+}) {
+  const {
+    localization: customLocalization,
+    uploadImage,
+    fieldComponents
+  } = context.usePluginOverrides("cms");
+  const localization = { ...index.CMS_LOCALIZATION, ...customLocalization };
+  const [slug, setSlug] = React.useState(initialSlug);
+  const [slugManuallyEdited, setSlugManuallyEdited] = React.useState(isEditing);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [formData, setFormData] = React.useState(initialData);
+  React.useEffect(() => {
+    if (isEditing && Object.keys(initialData).length > 0) {
+      setFormData(initialData);
+    }
+  }, [initialData, isEditing]);
+  React.useEffect(() => {
+    if (isEditing && initialSlug) {
+      setSlug(initialSlug);
+    }
+  }, [initialSlug, isEditing]);
+  const jsonSchema = React.useMemo(() => {
+    try {
+      return JSON.parse(contentType.jsonSchema);
+    } catch {
+      return {};
+    }
+  }, [contentType.jsonSchema]);
+  const storedFieldConfig = React.useMemo(() => {
+    if (!contentType.fieldConfig) return void 0;
+    try {
+      return JSON.parse(contentType.fieldConfig);
+    } catch {
+      return void 0;
+    }
+  }, [contentType.fieldConfig]);
+  const zodSchema = React.useMemo(() => {
+    try {
+      return jsonSchemaToZodWithCoercion(jsonSchema);
+    } catch {
+      return z.z.object({});
+    }
+  }, [jsonSchema]);
+  const fieldConfig = React.useMemo(
+    () => buildFieldConfigFromJsonSchema(
+      jsonSchema,
+      storedFieldConfig,
+      uploadImage,
+      fieldComponents
+    ),
+    [jsonSchema, storedFieldConfig, uploadImage, fieldComponents]
+  );
+  const slugSourceField = React.useMemo(
+    () => findSlugSourceField(jsonSchema),
+    [jsonSchema]
+  );
+  const handleValuesChange = (values) => {
+    setFormData(values);
+    if (!isEditing && !slugManuallyEdited && slugSourceField) {
+      const sourceValue = values[slugSourceField];
+      if (typeof sourceValue === "string" && sourceValue.trim()) {
+        setSlug(utils.slugify(sourceValue));
+      }
+    }
+  };
+  const handleSubmit = async (data) => {
+    if (!slug.trim()) {
+      sonner.toast.error("Slug is required");
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await onSubmit({ slug, data });
+      sonner.toast.success(
+        isEditing ? localization.CMS_TOAST_UPDATE_SUCCESS : localization.CMS_TOAST_CREATE_SUCCESS
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : localization.CMS_TOAST_ERROR;
+      sonner.toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "slug", children: localization.CMS_LABEL_SLUG }),
+        !isEditing && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "outline", className: "text-xs", children: slugManuallyEdited ? localization.CMS_EDITOR_SLUG_MANUAL : localization.CMS_EDITOR_SLUG_AUTO })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        input.Input,
+        {
+          id: "slug",
+          value: slug,
+          onChange: (e) => {
+            setSlug(e.target.value);
+            if (!isEditing) {
+              setSlugManuallyEdited(true);
+            }
+          },
+          disabled: isEditing,
+          placeholder: slugSourceField ? `Auto-generated from ${slugSourceField}` : "Enter slug..."
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: localization.CMS_LABEL_SLUG_DESCRIPTION })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index$1.default,
+      {
+        formSchema: zodSchema,
+        values: formData,
+        onValuesChange: handleValuesChange,
+        onSubmit: handleSubmit,
+        fieldConfig,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pt-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(index$1.AutoFormSubmit, { disabled: isSubmitting, children: isSubmitting ? localization.CMS_STATUS_SAVING : localization.CMS_BUTTON_SAVE }),
+          onCancel && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onCancel,
+              className: "px-4 py-2 text-sm text-muted-foreground hover:text-foreground",
+              children: localization.CMS_BUTTON_CANCEL
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+exports.ContentForm = ContentForm;

package/dist/packages/better-stack/src/plugins/cms/client/components/forms/content-form.mjs

@@ -0,0 +1,297 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { z } from 'zod';
+import { toast } from 'sonner';
+import AutoForm, { AutoFormSubmit } from '../../../../../../../ui/src/components/ui/auto-form/index.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 { usePluginOverrides } from '@btst/stack/context';
+import { slugify } from '../../../utils.mjs';
+import { CMS_LOCALIZATION } from '../../localization/index.mjs';
+import { CMSFileUpload } from './file-upload.mjs';
+
+function jsonSchemaToZodWithCoercion(jsonSchema) {
+  const shape = {};
+  const properties = jsonSchema.properties || {};
+  const required = jsonSchema.required || [];
+  for (const [key, prop] of Object.entries(properties)) {
+    let fieldSchema;
+    const typeValue = Array.isArray(prop.type) ? prop.type[0] : prop.type;
+    if (prop.enum && Array.isArray(prop.enum) && prop.enum.length > 0) {
+      const stringValues = prop.enum.filter(
+        (v) => typeof v === "string"
+      );
+      if (stringValues.length > 0) {
+        fieldSchema = z.enum(stringValues);
+      } else {
+        fieldSchema = z.string();
+      }
+    } else {
+      switch (typeValue) {
+        case "number":
+        case "integer": {
+          let numSchema = z.coerce.number();
+          if (prop.minimum !== void 0) {
+            numSchema = numSchema.min(prop.minimum);
+          }
+          if (prop.maximum !== void 0) {
+            numSchema = numSchema.max(prop.maximum);
+          }
+          fieldSchema = numSchema;
+          break;
+        }
+        case "boolean": {
+          fieldSchema = z.boolean();
+          if (prop.default !== void 0) {
+            fieldSchema = fieldSchema.default(
+              prop.default
+            );
+          }
+          break;
+        }
+        case "string": {
+          if (prop.format === "date" || prop.format === "date-time") {
+            fieldSchema = z.coerce.date();
+          } else {
+            let strSchema = z.string();
+            if (prop.minLength !== void 0) {
+              strSchema = strSchema.min(prop.minLength);
+            }
+            if (prop.maxLength !== void 0) {
+              strSchema = strSchema.max(prop.maxLength);
+            }
+            fieldSchema = strSchema;
+          }
+          break;
+        }
+        default: {
+          fieldSchema = z.string();
+        }
+      }
+    }
+    if (prop.default !== void 0 && typeValue !== "boolean") {
+      fieldSchema = fieldSchema.default(prop.default);
+    }
+    if (!required.includes(key)) {
+      fieldSchema = fieldSchema.optional();
+    }
+    shape[key] = fieldSchema;
+  }
+  return z.object(shape);
+}
+const BUILTIN_FIELD_TYPES = [
+  "checkbox",
+  "date",
+  "select",
+  "radio",
+  "switch",
+  "textarea",
+  "number",
+  "file",
+  "fallback"
+];
+function buildFieldConfigFromJsonSchema(jsonSchema, storedFieldConfig, uploadImage, fieldComponents) {
+  const fieldConfig = {};
+  const properties = jsonSchema.properties;
+  if (!properties) return fieldConfig;
+  for (const [key, value] of Object.entries(properties)) {
+    const config = {};
+    if (value.description) {
+      config.description = value.description;
+    }
+    if (value.placeholder) {
+      config.inputProps = {
+        placeholder: value.placeholder
+      };
+    }
+    if (storedFieldConfig?.[key]) {
+      const storedConfig = storedFieldConfig[key];
+      const fieldType = storedConfig.fieldType;
+      if (fieldType) {
+        if (fieldComponents?.[fieldType]) {
+          const CustomComponent = fieldComponents[fieldType];
+          config.fieldType = (props) => /* @__PURE__ */ jsx(CustomComponent, { ...props });
+        } else if (fieldType === "file") {
+          if (!uploadImage) {
+            config.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" }),
+              " function in CMS overrides."
+            ] });
+          } else {
+            config.fieldType = (props) => /* @__PURE__ */ jsx(CMSFileUpload, { ...props, uploadImage });
+          }
+        } else if (BUILTIN_FIELD_TYPES.includes(
+          fieldType
+        )) {
+          config.fieldType = fieldType;
+        } else {
+          console.warn(
+            `CMS: Unknown fieldType "${fieldType}" for field "${key}". Provide a component via fieldComponents override or use a built-in type.`
+          );
+        }
+      }
+    }
+    if (Object.keys(config).length > 0) {
+      fieldConfig[key] = config;
+    }
+  }
+  return fieldConfig;
+}
+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
+}) {
+  const {
+    localization: customLocalization,
+    uploadImage,
+    fieldComponents
+  } = usePluginOverrides("cms");
+  const localization = { ...CMS_LOCALIZATION, ...customLocalization };
+  const [slug, setSlug] = useState(initialSlug);
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(isEditing);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState(initialData);
+  useEffect(() => {
+    if (isEditing && Object.keys(initialData).length > 0) {
+      setFormData(initialData);
+    }
+  }, [initialData, isEditing]);
+  useEffect(() => {
+    if (isEditing && initialSlug) {
+      setSlug(initialSlug);
+    }
+  }, [initialSlug, isEditing]);
+  const jsonSchema = useMemo(() => {
+    try {
+      return JSON.parse(contentType.jsonSchema);
+    } catch {
+      return {};
+    }
+  }, [contentType.jsonSchema]);
+  const storedFieldConfig = useMemo(() => {
+    if (!contentType.fieldConfig) return void 0;
+    try {
+      return JSON.parse(contentType.fieldConfig);
+    } catch {
+      return void 0;
+    }
+  }, [contentType.fieldConfig]);
+  const zodSchema = useMemo(() => {
+    try {
+      return jsonSchemaToZodWithCoercion(jsonSchema);
+    } catch {
+      return z.object({});
+    }
+  }, [jsonSchema]);
+  const fieldConfig = useMemo(
+    () => buildFieldConfigFromJsonSchema(
+      jsonSchema,
+      storedFieldConfig,
+      uploadImage,
+      fieldComponents
+    ),
+    [jsonSchema, storedFieldConfig, uploadImage, fieldComponents]
+  );
+  const slugSourceField = useMemo(
+    () => findSlugSourceField(jsonSchema),
+    [jsonSchema]
+  );
+  const handleValuesChange = (values) => {
+    setFormData(values);
+    if (!isEditing && !slugManuallyEdited && slugSourceField) {
+      const sourceValue = values[slugSourceField];
+      if (typeof sourceValue === "string" && sourceValue.trim()) {
+        setSlug(slugify(sourceValue));
+      }
+    }
+  };
+  const handleSubmit = async (data) => {
+    if (!slug.trim()) {
+      toast.error("Slug is required");
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await onSubmit({ slug, data });
+      toast.success(
+        isEditing ? localization.CMS_TOAST_UPDATE_SUCCESS : localization.CMS_TOAST_CREATE_SUCCESS
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : localization.CMS_TOAST_ERROR;
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  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 }),
+        !isEditing && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: slugManuallyEdited ? localization.CMS_EDITOR_SLUG_MANUAL : localization.CMS_EDITOR_SLUG_AUTO })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "slug",
+          value: slug,
+          onChange: (e) => {
+            setSlug(e.target.value);
+            if (!isEditing) {
+              setSlugManuallyEdited(true);
+            }
+          },
+          disabled: isEditing,
+          placeholder: slugSourceField ? `Auto-generated from ${slugSourceField}` : "Enter slug..."
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: localization.CMS_LABEL_SLUG_DESCRIPTION })
+    ] }),
+    /* @__PURE__ */ jsx(
+      AutoForm,
+      {
+        formSchema: zodSchema,
+        values: formData,
+        onValuesChange: handleValuesChange,
+        onSubmit: handleSubmit,
+        fieldConfig,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-4", children: [
+          /* @__PURE__ */ jsx(AutoFormSubmit, { disabled: isSubmitting, children: isSubmitting ? localization.CMS_STATUS_SAVING : localization.CMS_BUTTON_SAVE }),
+          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
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+export { ContentForm };