@nextlyhq/plugin-form-builder 0.0.2-alpha.50 → 0.0.2-alpha.51

package/dist/admin/index.js

@@ -880,7 +880,7 @@ function SubmissionsView({ collectionSlug }) {
 // src/admin/FormBuilderView.tsx
 import {
   Button as Button8,
-  Input as Input7,
+  Input as Input6,
   toast,
   Tabs as Tabs4,
   TabsList as TabsList4,
@@ -1351,7 +1351,7 @@ import {
 } from "@nextlyhq/plugin-sdk/admin";
 import {
   FormLabelWithTooltip as FormLabelWithTooltip2,
-  Input as Input3,
+  Input as Input2,
   Checkbox as Checkbox2,
   Tabs as Tabs2,
   TabsContent,
@@ -1366,9 +1366,11 @@ import {
 import { useState as useState5, useCallback as useCallback4, useMemo as useMemo4 } from "react";
 
 // src/admin/components/builder/ConditionalLogicEditor.tsx
+import {
+  ConditionRow
+} from "@nextlyhq/plugin-sdk/admin";
 import {
   FormLabelWithTooltip,
-  Input as Input2,
   Button as Button4,
   Checkbox,
   Select as Select3,
@@ -1379,19 +1381,52 @@ import {
 } from "@nextlyhq/ui";
 import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var COMPARISON_OPERATORS = [
-  { value: "equals", label: "Equals" },
-  { value: "notEquals", label: "Does not equal" },
-  { value: "contains", label: "Contains" },
-  { value: "isEmpty", label: "Is empty" },
-  { value: "isNotEmpty", label: "Is not empty" },
-  { value: "greaterThan", label: "Greater than" },
-  { value: "lessThan", label: "Less than" }
+var SUPPORTED_COMPARISONS = [
+  "equals",
+  "notEquals",
+  "contains",
+  "isEmpty",
+  "isNotEmpty",
+  "greaterThan",
+  "lessThan"
 ];
-function conditionValueToString(value) {
-  if (value === null || value === void 0) return "";
-  if (typeof value === "object") return JSON.stringify(value);
-  return String(value);
+var SUPPORTED_SET = new Set(SUPPORTED_COMPARISONS);
+function isSupportedComparison(operator) {
+  return SUPPORTED_SET.has(operator);
+}
+var TEXT_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "textarea",
+  "email",
+  "url",
+  "phone",
+  "hidden"
+]);
+function comparisonsForType(sourceType) {
+  if (sourceType === "checkbox") return ["equals", "notEquals"];
+  if (sourceType === "number") {
+    return ["equals", "notEquals", "greaterThan", "lessThan"];
+  }
+  if (sourceType !== void 0 && TEXT_TYPES.has(sourceType)) {
+    return ["equals", "notEquals", "contains", "isEmpty", "isNotEmpty"];
+  }
+  return [...SUPPORTED_COMPARISONS];
+}
+function toSource(field) {
+  const options = "options" in field && Array.isArray(field.options) ? field.options.filter((option) => option.value !== "").map((option) => ({ value: option.value, label: option.label })) : void 0;
+  return {
+    name: field.name,
+    label: field.label || field.name,
+    type: field.type,
+    options
+  };
+}
+function toRowValue(value) {
+  if (value === null || value === void 0) return void 0;
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return value;
+  }
+  return void 0;
 }
 function ConditionalLogicEditor({
   field,
@@ -1447,9 +1482,6 @@ function ConditionalLogicEditor({
     },
     [logic.conditions, updateLogic]
   );
-  const needsValue = (comparison) => {
-    return comparison !== "isEmpty" && comparison !== "isNotEmpty";
-  };
   return /* @__PURE__ */ jsxs4("div", { className: "space-y-6 pt-2", children: [
     /* @__PURE__ */ jsx5("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx5(
@@ -1513,46 +1545,28 @@ function ConditionalLogicEditor({
           {
             className: "flex flex-col gap-2 p-3 rounded-none bg-muted border border-border relative group",
             children: [
-              /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
-                /* @__PURE__ */ jsxs4(
-                  Select3,
-                  {
-                    value: condition.field,
-                    onValueChange: (value) => handleUpdateCondition(index, { field: value }),
-                    children: [
-                      /* @__PURE__ */ jsx5(SelectTrigger3, { className: "w-full bg-transparent border-input dark:bg-muted/50", children: /* @__PURE__ */ jsx5(SelectValue3, { placeholder: "Select field" }) }),
-                      /* @__PURE__ */ jsx5(SelectContent3, { children: availableFields.map((f) => /* @__PURE__ */ jsx5(SelectItem3, { value: f.name, children: f.label || f.name }, f.name)) })
-                    ]
+              /* @__PURE__ */ jsx5(
+                ConditionRow,
+                {
+                  className: "grid grid-cols-1 gap-2",
+                  condition: {
+                    field: condition.field,
+                    operator: condition.comparison,
+                    value: toRowValue(condition.value)
+                  },
+                  sources: availableFields.map(toSource),
+                  operatorsFor: comparisonsForType,
+                  onChange: (next) => {
+                    if (!next || !isSupportedComparison(next.operator))
+                      return;
+                    handleUpdateCondition(index, {
+                      field: next.field,
+                      comparison: next.operator,
+                      value: toRowValue(next.value)
+                    });
                   }
-                ),
-                /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsxs4(
-                    Select3,
-                    {
-                      value: condition.comparison,
-                      onValueChange: (value) => handleUpdateCondition(index, {
-                        comparison: value
-                      }),
-                      children: [
-                        /* @__PURE__ */ jsx5(SelectTrigger3, { className: "flex-1 h-9 bg-transparent border-input dark:bg-muted/50", children: /* @__PURE__ */ jsx5(SelectValue3, { placeholder: "Compare operator" }) }),
-                        /* @__PURE__ */ jsx5(SelectContent3, { children: COMPARISON_OPERATORS.map((op) => /* @__PURE__ */ jsx5(SelectItem3, { value: op.value, children: op.label }, op.value)) })
-                      ]
-                    }
-                  ),
-                  needsValue(condition.comparison) && /* @__PURE__ */ jsx5(
-                    Input2,
-                    {
-                      type: "text",
-                      value: conditionValueToString(condition.value),
-                      onChange: (e) => handleUpdateCondition(index, {
-                        value: e.target.value
-                      }),
-                      placeholder: "Value",
-                      className: "flex-1 h-9 bg-transparent"
-                    }
-                  )
-                ] })
-              ] }),
+                }
+              ),
               /* @__PURE__ */ jsx5(
                 Button4,
                 {
@@ -1612,7 +1626,7 @@ function GeneralTab({
         }
       ),
       /* @__PURE__ */ jsx6(
-        Input3,
+        Input2,
         {
           id: "field-name",
           type: "text",
@@ -1634,7 +1648,7 @@ function GeneralTab({
         }
       ),
       /* @__PURE__ */ jsx6(
-        Input3,
+        Input2,
         {
           id: "field-label",
           type: "text",
@@ -1654,7 +1668,7 @@ function GeneralTab({
         }
       ),
       /* @__PURE__ */ jsx6(
-        Input3,
+        Input2,
         {
           id: "field-placeholder",
           type: "text",
@@ -1674,7 +1688,7 @@ function GeneralTab({
         }
       ),
       /* @__PURE__ */ jsx6(
-        Input3,
+        Input2,
         {
           id: "field-help",
           type: "text",
@@ -1758,7 +1772,7 @@ function TypeSpecificOptions({
           }
         ),
         /* @__PURE__ */ jsx6(
-          Input3,
+          Input2,
           {
             id: "field-rows",
             type: "number",
@@ -1784,7 +1798,7 @@ function TypeSpecificOptions({
             }
           ),
           /* @__PURE__ */ jsx6(
-            Input3,
+            Input2,
             {
               id: "field-accept",
               type: "text",
@@ -1845,7 +1859,7 @@ function TypeSpecificOptions({
           }
         ),
         /* @__PURE__ */ jsx6(
-          Input3,
+          Input2,
           {
             id: "field-default",
             type: "text",
@@ -1869,7 +1883,7 @@ function TypeSpecificOptions({
             }
           ),
           /* @__PURE__ */ jsx6(
-            Input3,
+            Input2,
             {
               id: "min-date",
               type: "date",
@@ -1889,7 +1903,7 @@ function TypeSpecificOptions({
             }
           ),
           /* @__PURE__ */ jsx6(
-            Input3,
+            Input2,
             {
               id: "max-date",
               type: "date",
@@ -1913,7 +1927,7 @@ function TypeSpecificOptions({
           }
         ),
         /* @__PURE__ */ jsx6(
-          Input3,
+          Input2,
           {
             id: "field-step",
             type: "number",
@@ -1992,7 +2006,7 @@ function ValidationTab({
         }
       ),
       /* @__PURE__ */ jsx6(
-        Input3,
+        Input2,
         {
           id: "error-message",
           type: "text",
@@ -2014,7 +2028,7 @@ function ValidationTab({
           }
         ),
         /* @__PURE__ */ jsx6(
-          Input3,
+          Input2,
           {
             id: "min-len",
             type: "number",
@@ -2038,7 +2052,7 @@ function ValidationTab({
           }
         ),
         /* @__PURE__ */ jsx6(
-          Input3,
+          Input2,
           {
             id: "max-len",
             type: "number",
@@ -2064,7 +2078,7 @@ function ValidationTab({
           }
         ),
         /* @__PURE__ */ jsx6(
-          Input3,
+          Input2,
           {
             id: "min-val",
             type: "number",
@@ -2087,7 +2101,7 @@ function ValidationTab({
           }
         ),
         /* @__PURE__ */ jsx6(
-          Input3,
+          Input2,
           {
             id: "max-val",
             type: "number",
@@ -2111,7 +2125,7 @@ function ValidationTab({
         }
       ),
       /* @__PURE__ */ jsx6(
-        Input3,
+        Input2,
         {
           id: "val-pattern",
           type: "text",
@@ -2132,7 +2146,7 @@ function ValidationTab({
         }
       ),
       /* @__PURE__ */ jsx6(
-        Input3,
+        Input2,
         {
           id: "max-file-size",
           type: "number",
@@ -2537,7 +2551,7 @@ import {
   DropdownMenuItem as DropdownMenuItem3,
   DropdownMenuSeparator as DropdownMenuSeparator2,
   DropdownMenuTrigger as DropdownMenuTrigger3,
-  Input as Input4,
+  Input as Input3,
   Label as Label2,
   Select as Select5,
   SelectContent as SelectContent5,
@@ -2822,7 +2836,7 @@ function AddressChipList({
     )) }),
     /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx8(
-        Input4,
+        Input3,
         {
           id,
           type: "email",
@@ -2935,7 +2949,7 @@ function NotificationSheet({
               /* @__PURE__ */ jsxs7("div", { className: "space-y-1.5", children: [
                 /* @__PURE__ */ jsx8(Label2, { htmlFor: "notification-name", children: "Name" }),
                 /* @__PURE__ */ jsx8(
-                  Input4,
+                  Input3,
                   {
                     id: "notification-name",
                     type: "text",
@@ -3008,7 +3022,7 @@ function NotificationSheet({
               /* @__PURE__ */ jsxs7("div", { className: "space-y-1.5", children: [
                 /* @__PURE__ */ jsx8(Label2, { htmlFor: "notification-sender", children: "Sender email" }),
                 /* @__PURE__ */ jsx8(
-                  Input4,
+                  Input3,
                   {
                     id: "notification-sender",
                     type: "email",
@@ -3075,7 +3089,7 @@ function NotificationSheet({
                         ]
                       }
                     ) : /* @__PURE__ */ jsx8(
-                      Input4,
+                      Input3,
                       {
                         id: "notification-to",
                         type: "email",
@@ -3149,7 +3163,7 @@ function NotificationSheet({
                   replyToMode === "custom" && /* @__PURE__ */ jsxs7("div", { className: "space-y-1.5", children: [
                     /* @__PURE__ */ jsx8(Label2, { htmlFor: "notification-replyto", children: "Reply-To address" }),
                     /* @__PURE__ */ jsx8(
-                      Input4,
+                      Input3,
                       {
                         id: "notification-replyto",
                         type: "email",
@@ -3266,7 +3280,7 @@ function NotificationSheet({
                   !VALUELESS_COMPARISONS.has(condition.comparison) && /* @__PURE__ */ jsxs7("div", { className: "min-w-36 flex-1 space-y-1.5", children: [
                     /* @__PURE__ */ jsx8(Label2, { htmlFor: "notification-condition-value", children: "Value" }),
                     /* @__PURE__ */ jsx8(
-                      Input4,
+                      Input3,
                       {
                         id: "notification-condition-value",
                         type: "text",
@@ -3429,7 +3443,7 @@ import {
   Badge as Badge4,
   Button as Button7,
   Checkbox as Checkbox3,
-  Input as Input5,
+  Input as Input4,
   Label as Label3,
   RadioGroup,
   RadioGroupItem,
@@ -3517,7 +3531,7 @@ function PreviewFieldInput({
     }
     case "number":
       return /* @__PURE__ */ jsx9(
-        Input5,
+        Input4,
         {
           id,
           type: "number",
@@ -3529,7 +3543,7 @@ function PreviewFieldInput({
     case "date":
     case "time":
       return /* @__PURE__ */ jsx9(
-        Input5,
+        Input4,
         {
           id,
           type: field.type,
@@ -3544,7 +3558,7 @@ function PreviewFieldInput({
       ] });
     default:
       return /* @__PURE__ */ jsx9(
-        Input5,
+        Input4,
         {
           id,
           type: field.type === "email" ? "email" : field.type === "url" ? "url" : field.type === "phone" ? "tel" : "text",
@@ -3724,7 +3738,7 @@ function FormPreview({ fields, formData }) {
 
 // src/admin/components/builder/FormSettingsTab.tsx
 import {
-  Input as Input6,
+  Input as Input5,
   Label as Label4,
   RadioGroup as RadioGroup2,
   RadioGroupItem as RadioGroupItem2,
@@ -3804,7 +3818,7 @@ function FormSettingsTab({ spamDefaults }) {
             description: "Label on the form's primary action button",
             htmlFor: "settings-submit-text",
             children: /* @__PURE__ */ jsx10(
-              Input6,
+              Input5,
               {
                 id: "settings-submit-text",
                 type: "text",
@@ -3881,7 +3895,7 @@ function FormSettingsTab({ spamDefaults }) {
                 /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-2", children: [
                   /* @__PURE__ */ jsx10(Label4, { htmlFor: "settings-confirm-redirect", children: "Redirect to a URL" }),
                   settings.confirmationType === "redirect" && /* @__PURE__ */ jsx10(
-                    Input6,
+                    Input5,
                     {
                       "aria-label": "Redirect URL",
                       type: "url",
@@ -3943,7 +3957,7 @@ function FormSettingsTab({ spamDefaults }) {
             description: "The client-facing site key for this form",
             htmlFor: "settings-captcha-key",
             children: /* @__PURE__ */ jsx10(
-              Input6,
+              Input5,
               {
                 id: "settings-captcha-key",
                 type: "text",
@@ -4230,7 +4244,7 @@ function FormBuilderViewInner({
               }
             ),
             /* @__PURE__ */ jsx11(
-              Input7,
+              Input6,
               {
                 id: "form-name",
                 type: "text",
@@ -4251,7 +4265,7 @@ function FormBuilderViewInner({
               }
             ),
             /* @__PURE__ */ jsx11(
-              Input7,
+              Input6,
               {
                 id: "form-slug",
                 type: "text",