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

package/dist/ui/src/components/form-builder/nested-field-editor-dialog.mjs

@@ -0,0 +1,261 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useMemo, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { snapCenterToCursor } from '@dnd-kit/modifiers';
+import { sortableKeyboardCoordinates, arrayMove } from '@dnd-kit/sortable';
+import { FolderOpen, List } from 'lucide-react';
+import { Button } from '../button.mjs';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../dialog.mjs';
+import { Palette, PaletteDragOverlay } from './palette.mjs';
+import { Canvas } from './canvas.mjs';
+import { EditFieldDialog } from './edit-field-dialog.mjs';
+import { FieldDragOverlay } from './sortable-field.mjs';
+import { getComponentByType } from './components/index.mjs';
+import { generateFieldId } from './schema-utils.mjs';
+
+function NestedFieldEditorDialog({
+  open,
+  onOpenChange,
+  field,
+  components,
+  onSave
+}) {
+  const dndContextId = useId();
+  const initialFields = useMemo(() => {
+    if (!field) return [];
+    if (field.type === "object") return field.children || [];
+    if (field.type === "array") return field.itemTemplate || [];
+    return [];
+  }, [field]);
+  const [nestedFields, setNestedFields] = useState(initialFields);
+  const [activeId, setActiveId] = useState(null);
+  const [editDialogFieldId, setEditDialogFieldId] = useState(null);
+  const [prevField, setPrevField] = useState(field);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (prevField !== field || open && !prevOpen) {
+    setPrevField(field);
+    setPrevOpen(open);
+    setNestedFields(initialFields);
+    setEditDialogFieldId(null);
+  }
+  if (prevOpen !== open) {
+    setPrevOpen(open);
+  }
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 }
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: { distance: 8 }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const activeDragData = useMemo(() => {
+    if (!activeId) return null;
+    const idStr = String(activeId);
+    if (idStr.startsWith("palette-")) {
+      const componentType = idStr.replace("palette-", "");
+      return {
+        type: "palette",
+        componentType,
+        component: getComponentByType(componentType, components)
+      };
+    }
+    const nestedField = nestedFields.find((f) => f.id === idStr);
+    if (nestedField) {
+      return {
+        type: "field",
+        field: nestedField,
+        component: getComponentByType(nestedField.type, components)
+      };
+    }
+    return null;
+  }, [activeId, nestedFields, components]);
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    setActiveId(null);
+    if (!over) return;
+    const activeData = active.data.current;
+    if (activeData?.type === "palette") {
+      const { componentType } = activeData;
+      const component = getComponentByType(componentType, components);
+      if (component) {
+        const newField = {
+          id: generateFieldId(componentType),
+          type: componentType,
+          props: {
+            label: component.defaultProps.label || component.label,
+            ...component.defaultProps
+          }
+        };
+        let insertIndex = nestedFields.length;
+        const overId = String(over.id);
+        if (overId === "drop-zone-start") {
+          insertIndex = 0;
+        } else if (overId.startsWith("drop-zone-")) {
+          const fieldId = overId.replace("drop-zone-", "");
+          const overIndex = nestedFields.findIndex((f) => f.id === fieldId);
+          if (overIndex !== -1) {
+            insertIndex = overIndex + 1;
+          }
+        } else if (overId !== "canvas") {
+          const overIndex = nestedFields.findIndex((f) => f.id === overId);
+          if (overIndex !== -1) {
+            insertIndex = overIndex + 1;
+          }
+        }
+        const newFields = [...nestedFields];
+        newFields.splice(insertIndex, 0, newField);
+        setNestedFields(newFields);
+      }
+      return;
+    }
+    if (activeData?.type === "field" && active.id !== over.id) {
+      const oldIndex = nestedFields.findIndex((f) => f.id === active.id);
+      const newIndex = nestedFields.findIndex((f) => f.id === over.id);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setNestedFields(arrayMove(nestedFields, oldIndex, newIndex));
+      }
+    }
+  };
+  const handleDeleteField = useCallback((id) => {
+    setNestedFields((fields) => fields.filter((f) => f.id !== id));
+  }, []);
+  const handleEditField = useCallback((id) => {
+    setEditDialogFieldId(id);
+  }, []);
+  const handleUpdateField = useCallback(
+    (id, props, newId) => {
+      if (newId && newId !== id) {
+        const idExists = nestedFields.some((f) => f.id === newId && f.id !== id);
+        if (idExists) {
+          console.warn(`Cannot rename field "${id}" to "${newId}": a field with that ID already exists`);
+          return;
+        }
+      }
+      setNestedFields(
+        (fields) => fields.map((f) => {
+          if (f.id !== id) return f;
+          return {
+            ...f,
+            id: newId || f.id,
+            props: { ...f.props, ...props }
+          };
+        })
+      );
+    },
+    [nestedFields]
+  );
+  const handleSave = useCallback(() => {
+    if (!field) return;
+    onSave(field.id, nestedFields);
+    onOpenChange(false);
+  }, [field, nestedFields, onSave, onOpenChange]);
+  if (!field) return null;
+  const isObjectField = field.type === "object";
+  const Icon = isObjectField ? FolderOpen : List;
+  const fieldTypeLabel = isObjectField ? "Field Group" : "Repeating Group";
+  const nestedLabel = isObjectField ? "nested fields" : "item fields";
+  const editDialogField = nestedFields.find((f) => f.id === editDialogFieldId) || null;
+  const editDialogComponent = editDialogField ? getComponentByType(editDialogField.type, components) || null : null;
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-6xl! max-h-[90vh] overflow-hidden flex flex-col", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }),
+          "Configure ",
+          fieldTypeLabel,
+          ": ",
+          field.props.label
+        ] }),
+        /* @__PURE__ */ jsxs(DialogDescription, { children: [
+          "Add and arrange the ",
+          nestedLabel,
+          " for this ",
+          fieldTypeLabel.toLowerCase(),
+          ".",
+          isObjectField ? " These fields will be grouped together." : " Each item in the array will have these fields."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs(
+        DndContext,
+        {
+          id: dndContextId,
+          sensors,
+          collisionDetection: closestCenter,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex h-[50vh] gap-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-48 overflow-auto shrink-0 border-r pr-4", children: /* @__PURE__ */ jsx(Palette, { components }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx(
+                Canvas,
+                {
+                  fields: nestedFields,
+                  components,
+                  onEditField: handleEditField,
+                  onDeleteField: handleDeleteField,
+                  isDraggingFromPalette: activeDragData?.type === "palette",
+                  steps: [],
+                  activeStepIndex: 0,
+                  onActiveStepChange: () => {
+                  },
+                  onAddStep: () => {
+                  },
+                  onDeleteStep: () => {
+                  },
+                  onRenameStep: () => {
+                  },
+                  hideStepControls: true
+                }
+              ) })
+            ] }),
+            typeof document !== "undefined" && createPortal(
+              /* @__PURE__ */ jsxs(DragOverlay, { dropAnimation: null, modifiers: [snapCenterToCursor], children: [
+                activeDragData?.type === "palette" && activeDragData.component && /* @__PURE__ */ jsx(PaletteDragOverlay, { component: activeDragData.component }),
+                activeDragData?.type === "field" && activeDragData.field && /* @__PURE__ */ jsx(
+                  FieldDragOverlay,
+                  {
+                    field: activeDragData.field,
+                    component: activeDragData.component
+                  }
+                )
+              ] }),
+              document.body
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DialogFooter, { className: "border-t pt-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground mr-auto", children: [
+          nestedFields.length,
+          " ",
+          nestedFields.length === 1 ? "field" : "fields"
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleSave, children: "Save Fields" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      EditFieldDialog,
+      {
+        open: editDialogFieldId !== null,
+        onOpenChange: (open2) => !open2 && setEditDialogFieldId(null),
+        field: editDialogField,
+        component: editDialogComponent,
+        onUpdate: handleUpdateField,
+        steps: [],
+        allFieldIds: nestedFields.map((f) => f.id)
+      }
+    )
+  ] });
+}
+
+export { NestedFieldEditorDialog };

package/dist/ui/src/components/form-builder/palette.cjs

@@ -0,0 +1,52 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@dnd-kit/core');
+const utils = require('../../lib/utils.cjs');
+
+function PaletteItem({ component }) {
+  const { attributes, listeners, setNodeRef, isDragging } = core.useDraggable({
+    id: `palette-${component.type}`,
+    data: {
+      type: "palette",
+      componentType: component.type
+    }
+  });
+  const Icon = component.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      ...listeners,
+      ...attributes,
+      className: utils.cn(
+        "flex items-center gap-3 p-3 rounded-lg border bg-card cursor-grab active:cursor-grabbing",
+        "hover:bg-accent hover:border-accent-foreground/20 transition-colors",
+        "touch-none select-none",
+        isDragging && "opacity-50"
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: component.label })
+      ]
+    }
+  );
+}
+function Palette({ components, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col gap-2", className), "data-testid": "form-builder-palette", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-muted-foreground mb-2", children: "Components" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row flex-wrap lg:flex-col gap-2", children: components.map((component) => /* @__PURE__ */ jsxRuntime.jsx(PaletteItem, { component }, component.type)) })
+  ] });
+}
+function PaletteDragOverlay({ component }) {
+  if (!component) return null;
+  const Icon = component.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
+    Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: component.label })
+  ] });
+}
+
+exports.Palette = Palette;
+exports.PaletteDragOverlay = PaletteDragOverlay;

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

@@ -0,0 +1,49 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useDraggable } from '@dnd-kit/core';
+import { cn } from '../../lib/utils.mjs';
+
+function PaletteItem({ component }) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `palette-${component.type}`,
+    data: {
+      type: "palette",
+      componentType: component.type
+    }
+  });
+  const Icon = component.icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      ...listeners,
+      ...attributes,
+      className: cn(
+        "flex items-center gap-3 p-3 rounded-lg border bg-card cursor-grab active:cursor-grabbing",
+        "hover:bg-accent hover:border-accent-foreground/20 transition-colors",
+        "touch-none select-none",
+        isDragging && "opacity-50"
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: component.label })
+      ]
+    }
+  );
+}
+function Palette({ components, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), "data-testid": "form-builder-palette", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-muted-foreground mb-2", children: "Components" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap lg:flex-col gap-2", children: components.map((component) => /* @__PURE__ */ jsx(PaletteItem, { component }, component.type)) })
+  ] });
+}
+function PaletteDragOverlay({ component }) {
+  if (!component) return null;
+  const Icon = component.icon;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: component.label })
+  ] });
+}
+
+export { Palette, PaletteDragOverlay };

package/dist/ui/src/components/form-builder/schema-utils.cjs

@@ -0,0 +1,128 @@
+'use strict';
+
+const helpers = require('../auto-form/helpers.cjs');
+
+function fieldsToProperties(fields, components, includeStepGroup = false) {
+  const properties = {};
+  for (const field of fields) {
+    const component = components.find((c) => c.type === field.type);
+    if (!component) {
+      console.warn(`Unknown component type: ${field.type}`);
+      continue;
+    }
+    const isRequired = field.props.required ?? false;
+    const schemaProp = component.toJSONSchema(field.props, isRequired);
+    if (includeStepGroup && field.stepGroup !== void 0) {
+      schemaProp.stepGroup = field.stepGroup;
+    }
+    if (field.type === "object" && field.children && field.children.length > 0) {
+      schemaProp.properties = fieldsToProperties(field.children, components, false);
+      const childRequired = field.children.filter((child) => child.props.required).map((child) => child.id);
+      if (childRequired.length > 0) {
+        schemaProp.required = childRequired;
+      }
+    }
+    if (field.type === "array" && field.itemTemplate && field.itemTemplate.length > 0) {
+      schemaProp.items = {
+        type: "object",
+        properties: fieldsToProperties(field.itemTemplate, components, false)
+      };
+      const itemRequired = field.itemTemplate.filter((item) => item.props.required).map((item) => item.id);
+      if (itemRequired.length > 0) {
+        schemaProp.items.required = itemRequired;
+      }
+    }
+    properties[field.id] = schemaProp;
+  }
+  return properties;
+}
+function getRequiredFieldIds(fields) {
+  return fields.filter((f) => f.props.required).map((f) => f.id);
+}
+function fieldsToJSONSchema(fields, components, steps) {
+  const hasMultipleSteps = steps && steps.length > 1;
+  const properties = fieldsToProperties(fields, components, hasMultipleSteps);
+  const required = getRequiredFieldIds(fields);
+  return {
+    type: "object",
+    properties,
+    ...required.length > 0 ? { required } : {},
+    // Only include steps if there are multiple steps
+    ...hasMultipleSteps ? { steps } : {}
+  };
+}
+function propertiesToFields(properties, requiredSet, components, stepGroupMap) {
+  const fields = [];
+  for (const [key, prop] of Object.entries(properties)) {
+    const isRequired = requiredSet.has(key);
+    let field = null;
+    for (const component of components) {
+      field = component.fromJSONSchema(prop, key, isRequired);
+      if (field) {
+        break;
+      }
+    }
+    const resolvedStepGroup = prop.stepGroup !== void 0 ? prop.stepGroup : stepGroupMap?.[key];
+    if (field) {
+      if (resolvedStepGroup !== void 0) {
+        field.stepGroup = resolvedStepGroup;
+      }
+      if (field.type === "object" && prop.properties) {
+        const childRequiredSet = new Set(prop.required || []);
+        field.children = propertiesToFields(prop.properties, childRequiredSet, components);
+      }
+      if (field.type === "array" && prop.items?.properties) {
+        const itemRequiredSet = new Set(prop.items.required || []);
+        field.itemTemplate = propertiesToFields(prop.items.properties, itemRequiredSet, components);
+      }
+      fields.push(field);
+    } else {
+      console.warn(`Could not parse JSON Schema property: ${key}`, prop);
+      fields.push({
+        id: key,
+        type: "text",
+        props: {
+          label: prop.label || prop.title || helpers.beautifyObjectName(key),
+          description: prop.description,
+          placeholder: prop.placeholder,
+          required: isRequired
+        },
+        // Include stepGroup even for fallback fields
+        ...resolvedStepGroup !== void 0 ? { stepGroup: resolvedStepGroup } : {}
+      });
+    }
+  }
+  return fields;
+}
+function jsonSchemaToFieldsAndSteps(schema, components) {
+  if (!schema || !schema.properties) {
+    return { fields: [], steps: [] };
+  }
+  const requiredSet = new Set(schema.required || []);
+  const fields = propertiesToFields(
+    schema.properties,
+    requiredSet,
+    components,
+    schema.stepGroupMap
+  );
+  const steps = schema.steps || [];
+  return { fields, steps };
+}
+function generateFieldId(prefix = "field") {
+  return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+function generateStepId() {
+  return `step_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+function createStep(index) {
+  return {
+    id: generateStepId(),
+    title: `Step ${index + 1}`
+  };
+}
+
+exports.createStep = createStep;
+exports.fieldsToJSONSchema = fieldsToJSONSchema;
+exports.generateFieldId = generateFieldId;
+exports.generateStepId = generateStepId;
+exports.jsonSchemaToFieldsAndSteps = jsonSchemaToFieldsAndSteps;

package/dist/ui/src/components/form-builder/schema-utils.mjs

@@ -0,0 +1,122 @@
+import { beautifyObjectName } from '../auto-form/helpers.mjs';
+
+function fieldsToProperties(fields, components, includeStepGroup = false) {
+  const properties = {};
+  for (const field of fields) {
+    const component = components.find((c) => c.type === field.type);
+    if (!component) {
+      console.warn(`Unknown component type: ${field.type}`);
+      continue;
+    }
+    const isRequired = field.props.required ?? false;
+    const schemaProp = component.toJSONSchema(field.props, isRequired);
+    if (includeStepGroup && field.stepGroup !== void 0) {
+      schemaProp.stepGroup = field.stepGroup;
+    }
+    if (field.type === "object" && field.children && field.children.length > 0) {
+      schemaProp.properties = fieldsToProperties(field.children, components, false);
+      const childRequired = field.children.filter((child) => child.props.required).map((child) => child.id);
+      if (childRequired.length > 0) {
+        schemaProp.required = childRequired;
+      }
+    }
+    if (field.type === "array" && field.itemTemplate && field.itemTemplate.length > 0) {
+      schemaProp.items = {
+        type: "object",
+        properties: fieldsToProperties(field.itemTemplate, components, false)
+      };
+      const itemRequired = field.itemTemplate.filter((item) => item.props.required).map((item) => item.id);
+      if (itemRequired.length > 0) {
+        schemaProp.items.required = itemRequired;
+      }
+    }
+    properties[field.id] = schemaProp;
+  }
+  return properties;
+}
+function getRequiredFieldIds(fields) {
+  return fields.filter((f) => f.props.required).map((f) => f.id);
+}
+function fieldsToJSONSchema(fields, components, steps) {
+  const hasMultipleSteps = steps && steps.length > 1;
+  const properties = fieldsToProperties(fields, components, hasMultipleSteps);
+  const required = getRequiredFieldIds(fields);
+  return {
+    type: "object",
+    properties,
+    ...required.length > 0 ? { required } : {},
+    // Only include steps if there are multiple steps
+    ...hasMultipleSteps ? { steps } : {}
+  };
+}
+function propertiesToFields(properties, requiredSet, components, stepGroupMap) {
+  const fields = [];
+  for (const [key, prop] of Object.entries(properties)) {
+    const isRequired = requiredSet.has(key);
+    let field = null;
+    for (const component of components) {
+      field = component.fromJSONSchema(prop, key, isRequired);
+      if (field) {
+        break;
+      }
+    }
+    const resolvedStepGroup = prop.stepGroup !== void 0 ? prop.stepGroup : stepGroupMap?.[key];
+    if (field) {
+      if (resolvedStepGroup !== void 0) {
+        field.stepGroup = resolvedStepGroup;
+      }
+      if (field.type === "object" && prop.properties) {
+        const childRequiredSet = new Set(prop.required || []);
+        field.children = propertiesToFields(prop.properties, childRequiredSet, components);
+      }
+      if (field.type === "array" && prop.items?.properties) {
+        const itemRequiredSet = new Set(prop.items.required || []);
+        field.itemTemplate = propertiesToFields(prop.items.properties, itemRequiredSet, components);
+      }
+      fields.push(field);
+    } else {
+      console.warn(`Could not parse JSON Schema property: ${key}`, prop);
+      fields.push({
+        id: key,
+        type: "text",
+        props: {
+          label: prop.label || prop.title || beautifyObjectName(key),
+          description: prop.description,
+          placeholder: prop.placeholder,
+          required: isRequired
+        },
+        // Include stepGroup even for fallback fields
+        ...resolvedStepGroup !== void 0 ? { stepGroup: resolvedStepGroup } : {}
+      });
+    }
+  }
+  return fields;
+}
+function jsonSchemaToFieldsAndSteps(schema, components) {
+  if (!schema || !schema.properties) {
+    return { fields: [], steps: [] };
+  }
+  const requiredSet = new Set(schema.required || []);
+  const fields = propertiesToFields(
+    schema.properties,
+    requiredSet,
+    components,
+    schema.stepGroupMap
+  );
+  const steps = schema.steps || [];
+  return { fields, steps };
+}
+function generateFieldId(prefix = "field") {
+  return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+function generateStepId() {
+  return `step_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+function createStep(index) {
+  return {
+    id: generateStepId(),
+    title: `Step ${index + 1}`
+  };
+}
+
+export { createStep, fieldsToJSONSchema, generateFieldId, generateStepId, jsonSchemaToFieldsAndSteps };