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

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

@@ -0,0 +1,111 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const core = require('@dnd-kit/core');
+const sortable = require('@dnd-kit/sortable');
+const utils = require('../../lib/utils.cjs');
+const sortableField = require('./sortable-field.cjs');
+const stepTabs = require('./step-tabs.cjs');
+
+function DropZone({ id, isDraggingFromPalette }) {
+  const { setNodeRef, isOver } = core.useDroppable({
+    id
+  });
+  if (!isDraggingFromPalette) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: utils.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 } = core.useDroppable({
+    id: "canvas"
+  });
+  const getComponent = (type) => components.find((c) => c.type === type);
+  const visibleFields = React.useMemo(() => {
+    if (steps.length <= 1) {
+      return fields;
+    }
+    return fields.filter((f) => (f.stepGroup ?? 0) === activeStepIndex);
+  }, [fields, steps.length, activeStepIndex]);
+  const sortableItems = React.useMemo(() => visibleFields.map((f) => f.id), [visibleFields]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col h-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      stepTabs.StepTabs,
+      {
+        steps,
+        activeStepIndex,
+        onActiveStepChange,
+        onAddStep,
+        onDeleteStep,
+        onRenameStep,
+        hideStepControls
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: setNodeRef,
+        "data-testid": "form-builder-canvas",
+        className: utils.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full text-muted-foreground", "data-testid": "canvas-drop-zone", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "Drop components here" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          sortable.SortableContext,
+          {
+            items: sortableItems,
+            strategy: sortable.verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DropZone, { id: "drop-zone-start", isDraggingFromPalette }),
+              visibleFields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  sortableField.SortableField,
+                  {
+                    field,
+                    index,
+                    component: getComponent(field.type),
+                    onEdit: () => onEditField(field.id),
+                    onDelete: () => onDeleteField(field.id),
+                    onConfigureNested: onConfigureNested ? () => onConfigureNested(field.id) : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(DropZone, { id: `drop-zone-${field.id}`, isDraggingFromPalette })
+              ] }, field.id))
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.Canvas = Canvas;

package/dist/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 '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+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 };