@mastra/playground-ui 37.0.1-alpha.2 → 37.1.0-alpha.4

package/dist/rule-builder-B7J3z1Gd.js

@@ -0,0 +1,563 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Type, ToggleLeft, Hash, List, Braces, Ban, Check, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, ChevronRight, Text, TextSearch, EqualNot, Equal, X, Plus, Component } from 'lucide-react';
+import * as React from 'react';
+import { createDefaultRule, isRule, createDefaultRuleGroup } from './utils/rule-engine.es.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-CFB6QZ9B.js';
+import { c as cn } from './cn-BakJzhuv.js';
+import { Icon } from './icons/Icon.es.js';
+import { I as Input } from './input-C54PDtiP.js';
+import { B as Button } from './Button-Bq0VuEbC.js';
+
+const getPropertyType = (property) => {
+  if (Array.isArray(property.type)) {
+    return property.type.find((t) => t !== "null") || "string";
+  }
+  return property.type || "string";
+};
+const hasNestedChildren = (property) => {
+  const type = getPropertyType(property);
+  if (type === "object" && property.properties) {
+    return Object.keys(property.properties).length > 0;
+  }
+  if (type === "array" && property.items) {
+    const itemType = getPropertyType(property.items);
+    return itemType === "object" && !!property.items.properties;
+  }
+  return false;
+};
+const getFieldOptionsFromProperties = (properties, parentPath = "") => {
+  if (!properties) return [];
+  return Object.entries(properties).map(([key, property]) => {
+    const path = parentPath ? `${parentPath}.${key}` : key;
+    const type = getPropertyType(property);
+    const hasChildren = hasNestedChildren(property);
+    return {
+      path,
+      label: property.title || key,
+      type,
+      hasChildren,
+      children: type === "object" ? property.properties : void 0,
+      items: type === "array" ? property.items : void 0
+    };
+  });
+};
+const getFieldOptionsFromSchema = (schema) => {
+  return getFieldOptionsFromProperties(schema.properties);
+};
+const getChildFieldOptions = (fieldOption, currentPath) => {
+  if (fieldOption.type === "object" && fieldOption.children) {
+    return getFieldOptionsFromProperties(fieldOption.children, currentPath);
+  }
+  if (fieldOption.type === "array" && fieldOption.items) {
+    const itemType = getPropertyType(fieldOption.items);
+    if (itemType === "object" && fieldOption.items.properties) {
+      return getFieldOptionsFromProperties(fieldOption.items.properties, currentPath);
+    }
+  }
+  return [];
+};
+const parseFieldPath = (path) => {
+  return path.split(".").filter(Boolean);
+};
+const getFieldOptionAtPath = (schema, path) => {
+  const segments = parseFieldPath(path);
+  if (segments.length === 0) return void 0;
+  let currentProperties = schema.properties;
+  let currentPath = "";
+  let result;
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i];
+    if (!currentProperties || !currentProperties[segment]) {
+      return void 0;
+    }
+    const property = currentProperties[segment];
+    currentPath = currentPath ? `${currentPath}.${segment}` : segment;
+    const type = getPropertyType(property);
+    const hasChildren = hasNestedChildren(property);
+    result = {
+      path: currentPath,
+      label: property.title || segment,
+      type,
+      hasChildren,
+      children: type === "object" ? property.properties : void 0,
+      items: type === "array" ? property.items : void 0
+    };
+    if (type === "object" && property.properties) {
+      currentProperties = property.properties;
+    } else if (type === "array" && property.items?.properties) {
+      currentProperties = property.items.properties;
+    } else {
+      currentProperties = void 0;
+    }
+  }
+  return result;
+};
+
+const getFieldTypeIcon = (type) => {
+  switch (type) {
+    case "object":
+      return /* @__PURE__ */ jsx(Braces, {});
+    case "array":
+      return /* @__PURE__ */ jsx(List, {});
+    case "number":
+    case "integer":
+      return /* @__PURE__ */ jsx(Hash, {});
+    case "boolean":
+      return /* @__PURE__ */ jsx(ToggleLeft, {});
+    case "string":
+    default:
+      return /* @__PURE__ */ jsx(Type, {});
+  }
+};
+const FieldLevelSelect = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select field",
+  className
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { className: "min-w-[140px] text-neutral6 bg-surface4", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.path, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "sm", className: "text-neutral3", children: getFieldTypeIcon(option.type) }),
+      option.label,
+      option.hasChildren && /* @__PURE__ */ jsx("span", { className: "text-neutral3", children: "..." })
+    ] }) }, option.path)) })
+  ] }) });
+};
+const RuleFieldSelect = ({ schema, value, onChange, className }) => {
+  const pathSegments = React.useMemo(() => parseFieldPath(value), [value]);
+  const selectors = React.useMemo(() => {
+    const result = [];
+    const rootOptions = getFieldOptionsFromSchema(schema);
+    if (rootOptions.length === 0) return result;
+    result.push({
+      options: rootOptions,
+      value: pathSegments[0] || "",
+      basePath: ""
+    });
+    let currentPath = "";
+    for (let i = 0; i < pathSegments.length; i++) {
+      const segment = pathSegments[i];
+      currentPath = currentPath ? `${currentPath}.${segment}` : segment;
+      const fieldOption = getFieldOptionAtPath(schema, currentPath);
+      if (!fieldOption || !fieldOption.hasChildren) break;
+      const childOptions = getChildFieldOptions(fieldOption, currentPath);
+      if (childOptions.length === 0) break;
+      const nextSegment = pathSegments[i + 1];
+      const nextPath = nextSegment ? `${currentPath}.${nextSegment}` : "";
+      result.push({
+        options: childOptions,
+        value: nextPath,
+        basePath: currentPath
+      });
+    }
+    return result;
+  }, [schema, pathSegments]);
+  const handleChange = React.useCallback(
+    (levelIndex, newValue) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+  if (selectors.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: cn("text-sm text-neutral3", className), children: "No fields available" });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), children: selectors.map((selector, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx("span", { className: "text-neutral3", children: "." }),
+    /* @__PURE__ */ jsx(
+      FieldLevelSelect,
+      {
+        options: selector.options,
+        value: selector.value,
+        onChange: (newValue) => handleChange(index, newValue),
+        placeholder: index === 0 ? "Select field" : "Select property"
+      }
+    )
+  ] }, `${selector.basePath}-${index}`)) });
+};
+
+const OPERATOR_LABELS = {
+  equals: "equals",
+  not_equals: "not equals",
+  contains: "contains",
+  not_contains: "not contains",
+  greater_than: "greater than",
+  less_than: "less than",
+  greater_than_or_equal: "greater than or equal",
+  less_than_or_equal: "less than or equal",
+  in: "in",
+  not_in: "not in",
+  exists: "exists",
+  not_exists: "not exists"
+};
+const OPERATORS = [
+  "equals",
+  "not_equals",
+  "contains",
+  "not_contains",
+  "greater_than",
+  "less_than",
+  "greater_than_or_equal",
+  "less_than_or_equal",
+  "in",
+  "not_in",
+  "exists",
+  "not_exists"
+];
+
+const OPERATOR_ICONS = {
+  equals: /* @__PURE__ */ jsx(Equal, {}),
+  not_equals: /* @__PURE__ */ jsx(EqualNot, {}),
+  contains: /* @__PURE__ */ jsx(TextSearch, {}),
+  not_contains: /* @__PURE__ */ jsx(Text, {}),
+  greater_than: /* @__PURE__ */ jsx(ChevronRight, {}),
+  less_than: /* @__PURE__ */ jsx(ChevronLeft, {}),
+  greater_than_or_equal: /* @__PURE__ */ jsx(ChevronsRight, {}),
+  less_than_or_equal: /* @__PURE__ */ jsx(ChevronsLeft, {}),
+  in: /* @__PURE__ */ jsx(List, {}),
+  not_in: /* @__PURE__ */ jsx(ListX, {}),
+  exists: /* @__PURE__ */ jsx(Check, {}),
+  not_exists: /* @__PURE__ */ jsx(Ban, {})
+};
+const RuleOperatorSelect = ({ value, onChange, operators, className }) => {
+  const operatorList = operators ?? OPERATORS;
+  return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { className: "min-w-[150px] text-neutral6 bg-surface4", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select operator" }) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: operatorList.map((operator) => /* @__PURE__ */ jsx(SelectItem, { value: operator, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "sm", className: "text-neutral3", children: OPERATOR_ICONS[operator] }),
+      OPERATOR_LABELS[operator]
+    ] }) }, operator)) })
+  ] }) });
+};
+
+const parseValue = (stringValue) => {
+  const trimmed = stringValue.trim();
+  if (trimmed === "") return "";
+  if (trimmed === "true") return true;
+  if (trimmed === "false") return false;
+  if (trimmed === "null") return null;
+  const lowerTrimmed = trimmed.toLowerCase();
+  if (lowerTrimmed === "infinity" || lowerTrimmed === "-infinity" || lowerTrimmed === "nan") {
+    return trimmed;
+  }
+  const num = Number(trimmed);
+  if (!Number.isNaN(num)) return num;
+  return stringValue;
+};
+const parseArrayValue = (stringValue) => {
+  if (stringValue.trim() === "") return [];
+  return stringValue.split(",").map((item) => parseValue(item.trim()));
+};
+const valueToString = (value) => {
+  if (value === null) return "null";
+  if (value === void 0) return "";
+  if (Array.isArray(value)) return value.map(valueToString).join(", ");
+  return String(value);
+};
+const booleanToString = (value) => {
+  if (value === true) return "true";
+  if (value === false) return "false";
+  return "";
+};
+const BooleanValueInput = ({ value, onChange, className }) => {
+  const stringValue = booleanToString(value);
+  const handleChange = React.useCallback(
+    (newValue) => {
+      onChange(newValue === "true");
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(Icon, { size: "sm", className: "absolute left-2 top-1/2 -translate-y-1/2 text-neutral3 pointer-events-none z-10", children: /* @__PURE__ */ jsx(ToggleLeft, {}) }),
+    /* @__PURE__ */ jsxs(Select, { value: stringValue, onValueChange: handleChange, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: "min-w-[140px] bg-surface4 pl-7", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select value" }) }),
+      /* @__PURE__ */ jsxs(SelectContent, { children: [
+        /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "true" }),
+        /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "false" })
+      ] })
+    ] })
+  ] });
+};
+const NumberValueInput = ({ value, onChange, placeholder, className }) => {
+  const displayValue = value === void 0 || value === "" ? "" : String(value);
+  const handleChange = React.useCallback(
+    (e) => {
+      const inputValue = e.target.value;
+      if (inputValue === "") {
+        onChange("");
+      } else {
+        const num = Number(inputValue);
+        onChange(Number.isNaN(num) ? inputValue : num);
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(Icon, { size: "sm", className: "absolute left-2 top-1/2 -translate-y-1/2 text-neutral3 pointer-events-none", children: /* @__PURE__ */ jsx(Hash, {}) }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "number",
+        value: displayValue,
+        onChange: handleChange,
+        placeholder: placeholder || "Enter number",
+        className: "min-w-[140px] bg-surface4 pl-7",
+        size: "sm"
+      }
+    )
+  ] });
+};
+const TextValueInput = ({ value, onChange, placeholder, className }) => {
+  const displayValue = valueToString(value);
+  const handleChange = React.useCallback(
+    (e) => {
+      onChange(parseValue(e.target.value));
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(Icon, { size: "sm", className: "absolute left-2 top-1/2 -translate-y-1/2 text-neutral3 pointer-events-none", children: /* @__PURE__ */ jsx(Type, {}) }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: displayValue,
+        onChange: handleChange,
+        placeholder: placeholder || "Enter value",
+        className: "min-w-[140px] bg-surface4 pl-7",
+        size: "sm"
+      }
+    )
+  ] });
+};
+const ArrayValueInput = ({ value, onChange, placeholder, className }) => {
+  const displayValue = React.useMemo(() => {
+    if (Array.isArray(value)) {
+      return value.map(valueToString).join(", ");
+    }
+    return valueToString(value);
+  }, [value]);
+  const handleChange = React.useCallback(
+    (e) => {
+      onChange(parseArrayValue(e.target.value));
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      value: displayValue,
+      onChange: handleChange,
+      placeholder: placeholder || "Enter values (comma-separated)",
+      className: cn("min-w-[160px] bg-surface4", className),
+      size: "sm"
+    }
+  );
+};
+const RuleValueInput = ({
+  value,
+  onChange,
+  operator,
+  fieldType,
+  placeholder,
+  className
+}) => {
+  const isArrayOperator = operator === "in" || operator === "not_in";
+  if (isArrayOperator) {
+    return /* @__PURE__ */ jsx(ArrayValueInput, { value, onChange, placeholder, className });
+  }
+  if (fieldType === "boolean") {
+    return /* @__PURE__ */ jsx(BooleanValueInput, { value, onChange, placeholder, className });
+  }
+  if (fieldType === "number" || fieldType === "integer") {
+    return /* @__PURE__ */ jsx(NumberValueInput, { value, onChange, placeholder, className });
+  }
+  return /* @__PURE__ */ jsx(TextValueInput, { value, onChange, placeholder, className });
+};
+
+const PRIMITIVE_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "integer"]);
+const RuleRow = ({ schema, rule, onChange, onRemove, className }) => {
+  const fieldType = React.useMemo(() => {
+    return getFieldOptionAtPath(schema, rule.field)?.type;
+  }, [schema, rule.field]);
+  const isPrimitive = fieldType !== void 0 && PRIMITIVE_TYPES.has(fieldType);
+  const isArray = fieldType === "array";
+  const isArrayOperator = rule.operator === "in" || rule.operator === "not_in";
+  const isExistenceOperator = rule.operator === "exists" || rule.operator === "not_exists";
+  const showComparator = isPrimitive || isArray;
+  const showValueInput = !isExistenceOperator && (isPrimitive || isArray && isArrayOperator);
+  const handleFieldChange = React.useCallback(
+    (field) => {
+      onChange({ ...rule, field });
+    },
+    [rule, onChange]
+  );
+  const handleOperatorChange = React.useCallback(
+    (operator) => {
+      const isNewExistence = operator === "exists" || operator === "not_exists";
+      if (isNewExistence) {
+        onChange({ ...rule, operator, value: void 0 });
+        return;
+      }
+      const isArrayOperator2 = operator === "in" || operator === "not_in";
+      const wasArrayOperator = rule.operator === "in" || rule.operator === "not_in";
+      let newValue = rule.value;
+      if (isArrayOperator2 && !wasArrayOperator) {
+        newValue = rule.value !== void 0 ? [rule.value] : [];
+      } else if (!isArrayOperator2 && wasArrayOperator) {
+        newValue = Array.isArray(rule.value) ? rule.value[0] : rule.value;
+      }
+      onChange({ ...rule, operator, value: newValue });
+    },
+    [rule, onChange]
+  );
+  const handleValueChange = React.useCallback(
+    (value) => {
+      onChange({ ...rule, value });
+    },
+    [rule, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx(RuleFieldSelect, { schema, value: rule.field, onChange: handleFieldChange }),
+      showComparator && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          RuleOperatorSelect,
+          {
+            value: rule.operator,
+            onChange: handleOperatorChange,
+            operators: isArray ? ["in", "not_in"] : void 0
+          }
+        ),
+        showValueInput && /* @__PURE__ */ jsx(
+          RuleValueInput,
+          {
+            value: rule.value,
+            onChange: handleValueChange,
+            operator: rule.operator,
+            fieldType
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { type: "button", onClick: onRemove, tooltip: "Remove rule", size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ jsx(X, {}) })
+  ] });
+};
+
+const DEFAULT_MAX_DEPTH = 3;
+const RuleGroupView = ({ schema, group, onChange, onRemove, depth, maxDepth }) => {
+  const isRoot = depth === 0;
+  const handleToggleOperator = () => {
+    onChange({ ...group, operator: group.operator === "AND" ? "OR" : "AND" });
+  };
+  const handleConditionChange = (index, condition) => {
+    onChange({
+      ...group,
+      conditions: group.conditions.map((c, i) => i === index ? condition : c)
+    });
+  };
+  const handleRemoveCondition = (index) => {
+    const newConditions = group.conditions.filter((_, i) => i !== index);
+    if (newConditions.length === 0 && onRemove) {
+      onRemove();
+    } else {
+      onChange({ ...group, conditions: newConditions });
+    }
+  };
+  const handleAddRule = () => {
+    onChange({ ...group, conditions: [...group.conditions, createDefaultRule()] });
+  };
+  const handleAddGroup = () => {
+    onChange({
+      ...group,
+      conditions: [
+        ...group.conditions,
+        createDefaultRuleGroup(group.operator === "AND" ? "OR" : "AND")
+      ]
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn(isRoot ? "bg-surface2" : "pl-6 bg-surface3"), children: [
+    !isRoot && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pl-3 pr-4 py-1.5 border-b border-border1 border-dashed", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-neutral3", children: "Group" }),
+      onRemove && /* @__PURE__ */ jsx(Button, { type: "button", onClick: onRemove, tooltip: "Remove group", size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ jsx(X, {}) })
+    ] }),
+    group.conditions.map((condition, index) => /* @__PURE__ */ jsx("div", { className: "border-b border-border1 border-dashed last:border-b-0", children: /* @__PURE__ */ jsxs("div", { className: cn("relative", isRule(condition) && "p-4 border-l-4 border-border1"), children: [
+      index > 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleToggleOperator,
+          className: cn(
+            "absolute left-1/2 -translate-x-1/2 z-10 -translate-y-1/2 top-0 text-ui-xs px-3 py-0.5 rounded-full cursor-pointer",
+            group.operator === "OR" ? "bg-accent6Dark text-accent6 hover:bg-accent6Dark/70" : "bg-accent3Dark text-accent3 hover:bg-accent3Dark/70"
+          ),
+          children: group.operator.toLowerCase()
+        }
+      ),
+      isRule(condition) ? /* @__PURE__ */ jsx(
+        RuleRow,
+        {
+          schema,
+          rule: condition,
+          onChange: (updatedRule) => handleConditionChange(index, updatedRule),
+          onRemove: () => handleRemoveCondition(index)
+        }
+      ) : /* @__PURE__ */ jsx(
+        RuleGroupView,
+        {
+          schema,
+          group: condition,
+          onChange: (updatedGroup) => handleConditionChange(index, updatedGroup),
+          onRemove: () => handleRemoveCondition(index),
+          depth: depth + 1,
+          maxDepth
+        }
+      )
+    ] }) }, index)),
+    /* @__PURE__ */ jsxs("div", { className: "p-2 flex gap-1", children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", onClick: handleAddRule, variant: "ghost", size: "sm", children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Plus, {}) }),
+        "Add rule"
+      ] }),
+      depth < maxDepth - 1 && /* @__PURE__ */ jsxs(Button, { type: "button", onClick: handleAddGroup, variant: "ghost", size: "sm", children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Component, {}) }),
+        "Add group"
+      ] })
+    ] })
+  ] });
+};
+const RuleBuilder = ({
+  schema,
+  ruleGroup,
+  onChange,
+  maxDepth = DEFAULT_MAX_DEPTH,
+  className
+}) => {
+  const handleGroupChange = React.useCallback(
+    (group) => {
+      onChange(group);
+    },
+    [onChange]
+  );
+  const handleAddFirstRule = React.useCallback(() => {
+    onChange({ operator: "AND", conditions: [createDefaultRule()] });
+  }, [onChange]);
+  if (!ruleGroup) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleAddFirstRule,
+        className: "flex items-center justify-center gap-2 text-ui-sm text-neutral3 hover:text-neutral6 w-full border border-dashed border-border1 p-2 rounded-md",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Plus, {}) }),
+          "Add conditional rule"
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(RuleGroupView, { schema, group: ruleGroup, onChange: handleGroupChange, depth: 0, maxDepth }) });
+};
+
+export { OPERATORS as O, RuleBuilder as R, OPERATOR_LABELS as a, RuleFieldSelect as b, RuleOperatorSelect as c, RuleRow as d, RuleValueInput as e, getFieldOptionAtPath as f, getChildFieldOptions as g, getFieldOptionsFromSchema as h, parseFieldPath as p };
+//# sourceMappingURL=rule-builder-B7J3z1Gd.js.map