@btst/stack 1.5.2 → 1.6.0

package/dist/packages/ui/src/components/form-builder/canvas.mjs

@@ -0,0 +1,109 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useDroppable } from '../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.mjs';
+import { SortableContext, verticalListSortingStrategy } from '../../../../../node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0__react@19.2.0/node_modules/@dnd-kit/sortable/dist/sortable.esm.mjs';
+import { cn } from '../../lib/utils.mjs';
+import { SortableField } from './sortable-field.mjs';
+import { StepTabs } from './step-tabs.mjs';
+
+function DropZone({ id, isDraggingFromPalette }) {
+  const { setNodeRef, isOver } = useDroppable({
+    id
+  });
+  if (!isDraggingFromPalette) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "h-2 rounded-full transition-all duration-200",
+        isOver ? "h-3 bg-primary animate-pulse" : "bg-muted-foreground/20"
+      )
+    }
+  );
+}
+function Canvas({
+  fields,
+  components,
+  onEditField,
+  onDeleteField,
+  onConfigureNested,
+  isDraggingFromPalette,
+  className,
+  steps,
+  activeStepIndex,
+  onActiveStepChange,
+  onAddStep,
+  onDeleteStep,
+  onRenameStep,
+  hideStepControls
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: "canvas"
+  });
+  const getComponent = (type) => components.find((c) => c.type === type);
+  const visibleFields = useMemo(() => {
+    if (steps.length <= 1) {
+      return fields;
+    }
+    return fields.filter((f) => (f.stepGroup ?? 0) === activeStepIndex);
+  }, [fields, steps.length, activeStepIndex]);
+  const sortableItems = useMemo(() => visibleFields.map((f) => f.id), [visibleFields]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full", className), children: [
+    /* @__PURE__ */ jsx(
+      StepTabs,
+      {
+        steps,
+        activeStepIndex,
+        onActiveStepChange,
+        onAddStep,
+        onDeleteStep,
+        onRenameStep,
+        hideStepControls
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setNodeRef,
+        "data-testid": "form-builder-canvas",
+        className: cn(
+          "flex-1 p-4 rounded-lg border-2 border-dashed min-h-[400px] transition-colors",
+          isOver && isDraggingFromPalette ? "border-primary bg-primary/5" : "border-muted-foreground/20"
+        ),
+        children: visibleFields.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-muted-foreground", "data-testid": "canvas-drop-zone", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "Drop components here" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: steps.length > 1 ? `Drag components from the palette to add to ${steps[activeStepIndex]?.title || "this step"}` : "Drag components from the palette to build your form" })
+        ] }) : /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: sortableItems,
+            strategy: verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(DropZone, { id: "drop-zone-start", isDraggingFromPalette }),
+              visibleFields.map((field, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  SortableField,
+                  {
+                    field,
+                    index,
+                    component: getComponent(field.type),
+                    onEdit: () => onEditField(field.id),
+                    onDelete: () => onDeleteField(field.id),
+                    onConfigureNested: onConfigureNested ? () => onConfigureNested(field.id) : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx(DropZone, { id: `drop-zone-${field.id}`, isDraggingFromPalette })
+              ] }, field.id))
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { Canvas };

package/dist/packages/ui/src/components/form-builder/components/index.cjs

@@ -0,0 +1,570 @@
+'use strict';
+
+const lucideReact = require('lucide-react');
+const z = require('zod');
+const types = require('../types.cjs');
+const validationSchemas = require('../validation-schemas.cjs');
+
+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 || key;
+}
+const textFieldDefinition = types.defineComponent({
+  type: "text",
+  backingType: "string",
+  label: "Text Input",
+  icon: lucideReact.Type,
+  defaultProps: {
+    label: "Text Field",
+    placeholder: "",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchemaWithPlaceholder.merge(validationSchemas.stringValidationSchema).merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "email",
+  backingType: "string",
+  label: "Email",
+  icon: lucideReact.Mail,
+  defaultProps: {
+    label: "Email",
+    placeholder: "email@example.com",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchemaWithPlaceholder.merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "number",
+  backingType: "number",
+  label: "Number",
+  icon: lucideReact.Hash,
+  defaultProps: {
+    label: "Number",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchemaWithPlaceholder.merge(validationSchemas.numberValidationSchema).merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "textarea",
+  backingType: "string",
+  label: "Text Area",
+  icon: lucideReact.AlignLeft,
+  defaultProps: {
+    label: "Text Area",
+    placeholder: "",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchemaWithPlaceholder.merge(validationSchemas.stringValidationSchema).merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "checkbox",
+  backingType: "boolean",
+  label: "Checkbox",
+  icon: lucideReact.CheckSquare,
+  defaultProps: {
+    label: "Checkbox",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchema.merge(validationSchemas.booleanValidationSchema).merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "switch",
+  backingType: "boolean",
+  label: "Switch",
+  icon: lucideReact.ToggleLeft,
+  defaultProps: {
+    label: "Switch",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchema.merge(validationSchemas.booleanValidationSchema).merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "select",
+  backingType: "enum",
+  label: "Select",
+  icon: lucideReact.ChevronDown,
+  defaultProps: {
+    label: "Select Field",
+    required: false,
+    options: ["Option 1", "Option 2", "Option 3"]
+  },
+  propertiesSchema: validationSchemas.baseMetaSchemaWithPlaceholder.merge(validationSchemas.enumOptionsSchema).merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "radio",
+  backingType: "enum",
+  label: "Radio Group",
+  icon: lucideReact.Circle,
+  defaultProps: {
+    label: "Radio Group",
+    required: false,
+    options: ["Option 1", "Option 2", "Option 3"]
+  },
+  propertiesSchema: validationSchemas.baseMetaSchema.merge(validationSchemas.enumOptionsSchema).merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "password",
+  backingType: "string",
+  label: "Password",
+  icon: lucideReact.Lock,
+  defaultProps: {
+    label: "Password",
+    placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchemaWithPlaceholder.merge(validationSchemas.stringValidationSchema).merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "url",
+  backingType: "string",
+  label: "Website URL",
+  icon: lucideReact.Globe,
+  defaultProps: {
+    label: "Website",
+    placeholder: "https://example.com",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchemaWithPlaceholder.merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "phone",
+  backingType: "string",
+  label: "Phone Number",
+  icon: lucideReact.Phone,
+  defaultProps: {
+    label: "Phone Number",
+    placeholder: "+1 (555) 123-4567",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchemaWithPlaceholder.merge(z.z.object({ defaultValue: validationSchemas.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 = types.defineComponent({
+  type: "date",
+  backingType: "date",
+  label: "Date Picker",
+  icon: lucideReact.Calendar,
+  defaultProps: {
+    label: "Date",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchema.merge(validationSchemas.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: lucideReact.FolderOpen,
+  defaultProps: {
+    label: "Field Group",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchema.extend(validationSchemas.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: lucideReact.List,
+  defaultProps: {
+    label: "Items",
+    required: false
+  },
+  propertiesSchema: validationSchemas.baseMetaSchema.extend(validationSchemas.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);
+}
+
+exports.arrayFieldDefinition = arrayFieldDefinition;
+exports.checkboxFieldDefinition = checkboxFieldDefinition;
+exports.dateFieldDefinition = dateFieldDefinition;
+exports.defaultComponents = defaultComponents;
+exports.emailFieldDefinition = emailFieldDefinition;
+exports.getComponentByType = getComponentByType;
+exports.numberFieldDefinition = numberFieldDefinition;
+exports.objectFieldDefinition = objectFieldDefinition;
+exports.passwordFieldDefinition = passwordFieldDefinition;
+exports.phoneFieldDefinition = phoneFieldDefinition;
+exports.radioFieldDefinition = radioFieldDefinition;
+exports.selectFieldDefinition = selectFieldDefinition;
+exports.switchFieldDefinition = switchFieldDefinition;
+exports.textFieldDefinition = textFieldDefinition;
+exports.textareaFieldDefinition = textareaFieldDefinition;
+exports.urlFieldDefinition = urlFieldDefinition;