@btst/components 0.0.0-stage → 1.0.0-beta.0

package/dist/ui/src/components/form-builder/components/index.mjs

@@ -0,0 +1,554 @@
+import { List, FolderOpen, Mail, Lock, Globe, Phone, Calendar, AlignLeft, ToggleLeft, Circle, ChevronDown, CheckSquare, Hash, Type } from 'lucide-react';
+import { z } from 'zod';
+import { defineComponent } from '../types.mjs';
+import { baseMetaSchemaWithPlaceholder, stringValidationSchema, DEFAULT_VALUE_SCHEMAS, numberValidationSchema, baseMetaSchema, booleanValidationSchema, enumOptionsSchema, dateValidationSchema, objectValidationSchema, arrayValidationSchema } from '../validation-schemas.mjs';
+import { beautifyObjectName } from '../../auto-form/helpers.mjs';
+
+function toNumber(value) {
+  if (value == null || value === "") return void 0;
+  const num = Number(value);
+  return isNaN(num) ? void 0 : num;
+}
+function buildInputProps(placeholder, inputType) {
+  const props = {};
+  if (placeholder) props.placeholder = placeholder;
+  if (inputType) props.type = inputType;
+  return Object.keys(props).length > 0 ? props : void 0;
+}
+function getPlaceholder(prop) {
+  return prop.inputProps?.placeholder || prop.placeholder;
+}
+function getLabel(prop, key) {
+  return prop.label || prop.title || beautifyObjectName(key);
+}
+const textFieldDefinition = defineComponent({
+  type: "text",
+  backingType: "string",
+  label: "Text Input",
+  icon: Type,
+  defaultProps: {
+    label: "Text Field",
+    placeholder: "",
+    required: false
+  },
+  propertiesSchema: baseMetaSchemaWithPlaceholder.merge(stringValidationSchema).merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.string })),
+  toJSONSchema: (props) => ({
+    type: "string",
+    label: props.label,
+    description: props.description,
+    inputProps: buildInputProps(props.placeholder),
+    default: props.defaultValue,
+    minLength: toNumber(props.minLength),
+    maxLength: toNumber(props.maxLength)
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "string" || prop.enum || prop.fieldType || prop.inputType || prop.format || prop.inputProps?.type) {
+      return null;
+    }
+    return {
+      id: key,
+      type: "text",
+      props: {
+        label: getLabel(prop, key),
+        placeholder: getPlaceholder(prop),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default,
+        minLength: prop.minLength,
+        maxLength: prop.maxLength
+      }
+    };
+  }
+});
+const emailFieldDefinition = defineComponent({
+  type: "email",
+  backingType: "string",
+  label: "Email",
+  icon: Mail,
+  defaultProps: {
+    label: "Email",
+    placeholder: "email@example.com",
+    required: false
+  },
+  propertiesSchema: baseMetaSchemaWithPlaceholder.merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.string })),
+  toJSONSchema: (props) => ({
+    type: "string",
+    label: props.label,
+    description: props.description,
+    inputProps: buildInputProps(props.placeholder, "email"),
+    default: props.defaultValue,
+    format: "email"
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "string" || prop.format !== "email" && prop.inputType !== "email" && prop.inputProps?.type !== "email") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "email",
+      props: {
+        label: getLabel(prop, key),
+        placeholder: getPlaceholder(prop),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default
+      }
+    };
+  }
+});
+const numberFieldDefinition = defineComponent({
+  type: "number",
+  backingType: "number",
+  label: "Number",
+  icon: Hash,
+  defaultProps: {
+    label: "Number",
+    required: false
+  },
+  propertiesSchema: baseMetaSchemaWithPlaceholder.merge(numberValidationSchema).merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.number })),
+  toJSONSchema: (props) => ({
+    type: "number",
+    label: props.label,
+    description: props.description,
+    inputProps: buildInputProps(props.placeholder),
+    default: props.defaultValue,
+    // toNumber handles form input which may come as strings
+    minimum: toNumber(props.min),
+    maximum: toNumber(props.max)
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "number" && prop.type !== "integer") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "number",
+      props: {
+        label: getLabel(prop, key),
+        placeholder: getPlaceholder(prop),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default,
+        min: prop.minimum,
+        max: prop.maximum
+      }
+    };
+  }
+});
+const textareaFieldDefinition = defineComponent({
+  type: "textarea",
+  backingType: "string",
+  label: "Text Area",
+  icon: AlignLeft,
+  defaultProps: {
+    label: "Text Area",
+    placeholder: "",
+    required: false
+  },
+  propertiesSchema: baseMetaSchemaWithPlaceholder.merge(stringValidationSchema).merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.string })),
+  toJSONSchema: (props) => ({
+    type: "string",
+    label: props.label,
+    description: props.description,
+    fieldType: "textarea",
+    inputProps: buildInputProps(props.placeholder),
+    default: props.defaultValue,
+    minLength: toNumber(props.minLength),
+    maxLength: toNumber(props.maxLength)
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "string" || prop.fieldType !== "textarea") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "textarea",
+      props: {
+        label: getLabel(prop, key),
+        placeholder: getPlaceholder(prop),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default,
+        minLength: prop.minLength,
+        maxLength: prop.maxLength
+      }
+    };
+  }
+});
+const checkboxFieldDefinition = defineComponent({
+  type: "checkbox",
+  backingType: "boolean",
+  label: "Checkbox",
+  icon: CheckSquare,
+  defaultProps: {
+    label: "Checkbox",
+    required: false
+  },
+  propertiesSchema: baseMetaSchema.merge(booleanValidationSchema).merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.boolean })),
+  toJSONSchema: (props) => ({
+    type: "boolean",
+    label: props.label,
+    description: props.description,
+    default: props.defaultValue
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "boolean" || prop.fieldType === "switch") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "checkbox",
+      props: {
+        label: getLabel(prop, key),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default
+      }
+    };
+  }
+});
+const switchFieldDefinition = defineComponent({
+  type: "switch",
+  backingType: "boolean",
+  label: "Switch",
+  icon: ToggleLeft,
+  defaultProps: {
+    label: "Switch",
+    required: false
+  },
+  propertiesSchema: baseMetaSchema.merge(booleanValidationSchema).merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.boolean })),
+  toJSONSchema: (props) => ({
+    type: "boolean",
+    label: props.label,
+    description: props.description,
+    fieldType: "switch",
+    default: props.defaultValue
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "boolean" || prop.fieldType !== "switch") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "switch",
+      props: {
+        label: getLabel(prop, key),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default
+      }
+    };
+  }
+});
+const selectFieldDefinition = defineComponent({
+  type: "select",
+  backingType: "enum",
+  label: "Select",
+  icon: ChevronDown,
+  defaultProps: {
+    label: "Select Field",
+    required: false,
+    options: ["Option 1", "Option 2", "Option 3"]
+  },
+  propertiesSchema: baseMetaSchemaWithPlaceholder.merge(enumOptionsSchema).merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.enum })),
+  toJSONSchema: (props) => ({
+    type: "string",
+    label: props.label,
+    description: props.description,
+    inputProps: buildInputProps(props.placeholder),
+    default: props.defaultValue,
+    enum: props.options
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "string" || !prop.enum || prop.fieldType === "radio") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "select",
+      props: {
+        label: getLabel(prop, key),
+        placeholder: getPlaceholder(prop),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default,
+        options: prop.enum
+      }
+    };
+  }
+});
+const radioFieldDefinition = defineComponent({
+  type: "radio",
+  backingType: "enum",
+  label: "Radio Group",
+  icon: Circle,
+  defaultProps: {
+    label: "Radio Group",
+    required: false,
+    options: ["Option 1", "Option 2", "Option 3"]
+  },
+  propertiesSchema: baseMetaSchema.merge(enumOptionsSchema).merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.enum })),
+  toJSONSchema: (props) => ({
+    type: "string",
+    label: props.label,
+    description: props.description,
+    fieldType: "radio",
+    default: props.defaultValue,
+    enum: props.options
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "string" || !prop.enum || prop.fieldType !== "radio") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "radio",
+      props: {
+        label: getLabel(prop, key),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default,
+        options: prop.enum
+      }
+    };
+  }
+});
+const passwordFieldDefinition = defineComponent({
+  type: "password",
+  backingType: "string",
+  label: "Password",
+  icon: Lock,
+  defaultProps: {
+    label: "Password",
+    placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+    required: false
+  },
+  propertiesSchema: baseMetaSchemaWithPlaceholder.merge(stringValidationSchema).merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.string })),
+  toJSONSchema: (props) => ({
+    type: "string",
+    label: props.label,
+    description: props.description,
+    inputProps: buildInputProps(props.placeholder, "password"),
+    default: props.defaultValue,
+    minLength: toNumber(props.minLength),
+    maxLength: toNumber(props.maxLength)
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "string" || prop.inputType !== "password" && prop.inputProps?.type !== "password") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "password",
+      props: {
+        label: getLabel(prop, key),
+        placeholder: getPlaceholder(prop),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default,
+        minLength: prop.minLength,
+        maxLength: prop.maxLength
+      }
+    };
+  }
+});
+const urlFieldDefinition = defineComponent({
+  type: "url",
+  backingType: "string",
+  label: "Website URL",
+  icon: Globe,
+  defaultProps: {
+    label: "Website",
+    placeholder: "https://example.com",
+    required: false
+  },
+  propertiesSchema: baseMetaSchemaWithPlaceholder.merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.string })),
+  toJSONSchema: (props) => ({
+    type: "string",
+    label: props.label,
+    description: props.description,
+    inputProps: buildInputProps(props.placeholder),
+    default: props.defaultValue,
+    format: "uri"
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "string" || prop.format !== "uri") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "url",
+      props: {
+        label: getLabel(prop, key),
+        placeholder: getPlaceholder(prop),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default
+      }
+    };
+  }
+});
+const phoneFieldDefinition = defineComponent({
+  type: "phone",
+  backingType: "string",
+  label: "Phone Number",
+  icon: Phone,
+  defaultProps: {
+    label: "Phone Number",
+    placeholder: "+1 (555) 123-4567",
+    required: false
+  },
+  propertiesSchema: baseMetaSchemaWithPlaceholder.merge(z.object({ defaultValue: DEFAULT_VALUE_SCHEMAS.string })),
+  toJSONSchema: (props) => ({
+    type: "string",
+    label: props.label,
+    description: props.description,
+    inputProps: buildInputProps(props.placeholder, "tel"),
+    default: props.defaultValue
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "string" || prop.inputType !== "tel" && prop.inputProps?.type !== "tel") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "phone",
+      props: {
+        label: getLabel(prop, key),
+        placeholder: getPlaceholder(prop),
+        description: prop.description,
+        required: isRequired,
+        defaultValue: prop.default
+      }
+    };
+  }
+});
+const dateFieldDefinition = defineComponent({
+  type: "date",
+  backingType: "date",
+  label: "Date Picker",
+  icon: Calendar,
+  defaultProps: {
+    label: "Date",
+    required: false
+  },
+  propertiesSchema: baseMetaSchema.merge(dateValidationSchema),
+  toJSONSchema: (props) => ({
+    type: "string",
+    format: "date-time",
+    fieldType: "date",
+    label: props.label,
+    description: props.description
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "string" || prop.format !== "date-time" && prop.fieldType !== "date") {
+      return null;
+    }
+    return {
+      id: key,
+      type: "date",
+      props: {
+        label: getLabel(prop, key),
+        description: prop.description,
+        required: isRequired
+      }
+    };
+  }
+});
+const objectFieldDefinition = {
+  type: "object",
+  label: "Field Group",
+  icon: FolderOpen,
+  defaultProps: {
+    label: "Field Group",
+    required: false
+  },
+  propertiesSchema: baseMetaSchema.extend(objectValidationSchema.shape),
+  toJSONSchema: (props) => ({
+    type: "object",
+    label: props.label,
+    description: props.description,
+    // properties will be filled in by schema-utils from field.children
+    properties: {}
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "object" || !prop.properties) {
+      return null;
+    }
+    return {
+      id: key,
+      type: "object",
+      props: {
+        label: getLabel(prop, key),
+        description: prop.description,
+        required: isRequired
+      },
+      // children will be filled in by schema-utils
+      children: []
+    };
+  }
+};
+const arrayFieldDefinition = {
+  type: "array",
+  label: "Repeating Group",
+  icon: List,
+  defaultProps: {
+    label: "Items",
+    required: false
+  },
+  propertiesSchema: baseMetaSchema.extend(arrayValidationSchema.shape),
+  toJSONSchema: (props) => ({
+    type: "array",
+    label: props.label,
+    description: props.description,
+    minItems: props.minItems,
+    maxItems: props.maxItems,
+    // items will be filled in by schema-utils from field.itemTemplate
+    items: {
+      type: "object",
+      properties: {}
+    }
+  }),
+  fromJSONSchema: (prop, key, isRequired) => {
+    if (prop.type !== "array" || !prop.items) {
+      return null;
+    }
+    return {
+      id: key,
+      type: "array",
+      props: {
+        label: getLabel(prop, key),
+        description: prop.description,
+        required: isRequired,
+        minItems: prop.minItems,
+        maxItems: prop.maxItems
+      },
+      // itemTemplate will be filled in by schema-utils
+      itemTemplate: []
+    };
+  }
+};
+const defaultComponents = [
+  // Container types (must be before primitives to match object/array JSON Schema)
+  objectFieldDefinition,
+  arrayFieldDefinition,
+  // Specific types first
+  emailFieldDefinition,
+  passwordFieldDefinition,
+  urlFieldDefinition,
+  phoneFieldDefinition,
+  dateFieldDefinition,
+  textareaFieldDefinition,
+  switchFieldDefinition,
+  radioFieldDefinition,
+  selectFieldDefinition,
+  checkboxFieldDefinition,
+  numberFieldDefinition,
+  // Generic fallback last
+  textFieldDefinition
+];
+function getComponentByType(type, components = defaultComponents) {
+  return components.find((c) => c.type === type);
+}
+
+export { arrayFieldDefinition, checkboxFieldDefinition, dateFieldDefinition, defaultComponents, emailFieldDefinition, getComponentByType, numberFieldDefinition, objectFieldDefinition, passwordFieldDefinition, phoneFieldDefinition, radioFieldDefinition, selectFieldDefinition, switchFieldDefinition, textFieldDefinition, textareaFieldDefinition, urlFieldDefinition };

package/dist/ui/src/components/form-builder/edit-field-dialog.cjs

@@ -0,0 +1,131 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const index = require('../auto-form/index.cjs');
+const helpers = require('../auto-form/helpers.cjs');
+const input = require('../input.cjs');
+const label = require('../label.cjs');
+const button = require('../button.cjs');
+const dialog = require('../dialog.cjs');
+const select = require('../select.cjs');
+
+function EditFieldDialog({
+  open,
+  onOpenChange,
+  field,
+  component,
+  onUpdate,
+  steps = [],
+  allFieldIds = []
+}) {
+  const initialValues = React.useMemo(() => {
+    if (!field) return { fieldName: "", props: {}, key: "" };
+    const values = { ...field.props };
+    if (Array.isArray(values.options)) {
+      values.options = values.options.join("\n");
+    }
+    return { fieldName: field.id, props: values, key: `${field.id}-${open}` };
+  }, [field, open]);
+  const [fieldNameOverride, setFieldNameOverride] = React.useState(null);
+  const [localPropsOverride, setLocalPropsOverride] = React.useState(null);
+  const [stepGroupOverride, setStepGroupOverride] = React.useState(null);
+  const fieldName = fieldNameOverride ?? initialValues.fieldName;
+  const localProps = localPropsOverride ?? initialValues.props;
+  const localStepGroup = stepGroupOverride ?? field?.stepGroup ?? 0;
+  const isDuplicateId = React.useMemo(() => {
+    if (!field || fieldName === field.id) return false;
+    return allFieldIds.some((id) => id === fieldName && id !== field.id);
+  }, [fieldName, field, allFieldIds]);
+  const [prevInitial, setPrevInitial] = React.useState(initialValues);
+  if (prevInitial !== initialValues) {
+    setPrevInitial(initialValues);
+    setFieldNameOverride(null);
+    setLocalPropsOverride(null);
+    setStepGroupOverride(null);
+  }
+  const formKey = initialValues.key;
+  const handleValuesChange = React.useCallback(
+    (values) => {
+      setLocalPropsOverride(values);
+    },
+    []
+  );
+  const handleSave = React.useCallback(() => {
+    if (!field) return;
+    const props = { ...localProps };
+    if (typeof props.options === "string") {
+      props.options = props.options.split("\n").map((s) => s.trim()).filter(Boolean);
+    }
+    const newId = fieldName !== field.id ? fieldName : void 0;
+    const stepGroup = stepGroupOverride !== null && stepGroupOverride !== field.stepGroup ? stepGroupOverride : void 0;
+    onUpdate(field.id, props, newId, stepGroup);
+    onOpenChange(false);
+  }, [field, localProps, fieldName, onUpdate, onOpenChange, stepGroupOverride]);
+  if (!field || !component) {
+    return null;
+  }
+  const Icon = component.icon;
+  const jsonSchema = component.propertiesSchema.toJSONSchema();
+  const fieldConfig = helpers.buildFieldConfigFromJsonSchema(jsonSchema);
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-md max-h-[90vh] overflow-y-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogTitle, { className: "flex items-center gap-2", children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }),
+        "Edit ",
+        component.label
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Configure the properties for this field" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "field-name", children: "Field Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            id: "field-name",
+            value: fieldName,
+            onChange: (e) => setFieldNameOverride(e.target.value),
+            placeholder: "Enter field name",
+            className: isDuplicateId ? "border-destructive focus-visible:ring-destructive" : "",
+            "aria-invalid": isDuplicateId
+          }
+        ),
+        isDuplicateId ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: "A field with this name already exists. Please choose a different name." }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "This is the key used in the form data and JSON schema" })
+      ] }),
+      steps.length > 1 && field && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "field-step", children: "Step" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          select.Select,
+          {
+            value: String(localStepGroup),
+            onValueChange: (value) => setStepGroupOverride(parseInt(value, 10)),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { id: "field-step", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: "Select step" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: String(index), children: step.title }, step.id)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Which step this field belongs to" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          formSchema: component.propertiesSchema,
+          values: localProps,
+          onValuesChange: handleValuesChange,
+          fieldConfig,
+          className: "space-y-4"
+        },
+        formKey
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: handleSave, disabled: isDuplicateId, children: "Save Changes" })
+    ] })
+  ] }) });
+}
+
+exports.EditFieldDialog = EditFieldDialog;