@integration-app/react 2.0.3-beta.0 → 2.0.3-beta.2

package/dist/esm/components/DataBuilder/Condition/index.mjs

@@ -0,0 +1,199 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getFormula, DataBuilderFormulaType, Formula } from '@integration-app/sdk';
+import { NestedLevel, Row, Cell, ActionBar } from '../../DataBuilderUI/index.mjs';
+import DataBuilderFormFieldValue from '../FieldValue/index.mjs';
+import { DataBuilderFieldControlPanel } from '../Nested/FieldControlPanel/index.mjs';
+import { ComboBox } from '../../ComboBox/index.mjs';
+import useEventStopPropagation from '../../../hooks/useEventStopPropagation.mjs';
+import { makeSubField } from '../data-field.mjs';
+import { DataBuilderFieldProvider } from '../field-context.mjs';
+
+function DataBuilderCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = getFormula(field.value);
+  switch (formula?.type) {
+    case DataBuilderFormulaType.AND:
+      return /* @__PURE__ */ jsx(And, { field, onChange });
+    case DataBuilderFormulaType.EVAL:
+    default:
+      return /* @__PURE__ */ jsx(
+        EvalCondition,
+        {
+          field,
+          onChange,
+          onDelete,
+          isNested
+        }
+      );
+  }
+}
+function And({
+  field,
+  onChange
+}) {
+  const formula = getFormula(field.value);
+  let conditions = formula?.args;
+  if (!conditions || !Array.isArray(conditions) || conditions.length === 0) {
+    conditions = [null];
+  }
+  function getConditionField(idx) {
+    const value = conditions[idx];
+    return makeSubField(field, {
+      value,
+      valueLocator: `${field.valueLocator}.$and[${idx}]`,
+      // Temporary: remove this when we implement the new conditions UI
+      level: field.level
+    });
+  }
+  function handleConditionChange(idx, value) {
+    const newConditions = [...conditions];
+    newConditions[idx] = value;
+    onChange({
+      $and: newConditions
+    });
+  }
+  function handleAddCondition() {
+    onChange({
+      $and: [...conditions, null]
+    });
+  }
+  function handleDeleteCondition(idx) {
+    const newConditions = [...conditions];
+    newConditions.splice(idx, 1);
+    onChange({
+      $and: newConditions
+    });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    conditions.map((_condition, idx) => /* @__PURE__ */ jsx(
+      DataBuilderCondition,
+      {
+        field: getConditionField(idx),
+        onChange: (value) => handleConditionChange(idx, value),
+        onDelete: () => handleDeleteCondition(idx),
+        isNested: true
+      },
+      idx
+    )),
+    /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd: handleAddCondition })
+  ] });
+}
+function EvalCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = getFormula(field.value);
+  let value;
+  let operator;
+  let operatorOptions = [];
+  let operand;
+  if (formula instanceof Formula.Eval) {
+    value = formula.value;
+    operator = formula.getOperator(field.variablesSchema);
+    operand = formula.operand;
+    operatorOptions = formula.getAvailableOperators(field.variablesSchema).map((op) => ({
+      label: op.name,
+      value: op.key
+    }));
+  }
+  const valueField = makeSubField(field, {
+    value,
+    valueLocator: `${field.valueLocator}.$eval`
+  });
+  const operandField = makeSubField(field, {
+    value: operand,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2454): Variable 'operator' is used before being assigned.
+    valueLocator: `${field.valueLocator}.${operator?.key}`,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2454): Variable 'operator' is used before being assigned.
+    schema: operator?.operandSchema
+  });
+  function handleValueChange(value2) {
+    onChange({
+      ...formula?.toObject() ?? {},
+      $eval: value2
+    });
+  }
+  function handleOperatorChange(operatorKey) {
+    const newValue = {
+      $eval: value
+    };
+    if (operatorKey) {
+      newValue[operatorKey] = operand ?? null;
+    }
+    onChange(newValue);
+  }
+  function handleOperandChange(operand2) {
+    onChange({
+      $eval: value,
+      [operator.key]: operand2
+    });
+  }
+  function handleTransformToAnd() {
+    onChange({
+      $and: [field.value, null]
+    });
+  }
+  const hasOperand = operator && operator.hasOperand;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Cell.Combobox, { children: /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: valueField, children: /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          placeholder: "Value",
+          value: valueField.value,
+          onChange: handleValueChange,
+          variablesSchema: valueField.variablesSchema,
+          optionFactories: valueField.optionFactories,
+          schema: void 0
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Cell.Combobox, { disabled: !value, children: value && /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          value: operator?.key,
+          options: operatorOptions,
+          onChange: handleOperatorChange
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, disabled: !hasOperand, children: hasOperand && /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: operandField, children: /* @__PURE__ */ jsx(
+        DataBuilderFormFieldValue,
+        {
+          field: operandField,
+          onChange: handleOperandChange,
+          allowScalarArray: true
+        }
+      ) }) }),
+      onDelete && /* @__PURE__ */ jsx(ActionBar, { children: /* @__PURE__ */ jsx(
+        ActionBar.DeleteButton,
+        {
+          onClick: useEventStopPropagation(onDelete)
+        }
+      ) })
+    ] }) }),
+    !isNested && /* @__PURE__ */ jsx(
+      DataBuilderFieldControlPanel,
+      {
+        field,
+        onAdd: handleTransformToAnd
+      }
+    )
+  ] });
+}
+
+export { DataBuilderCondition as default };

package/dist/esm/components/DataBuilder/Field.mjs

@@ -0,0 +1,143 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isFormula } from '@integration-app/sdk';
+import { useEffect } from 'react';
+import { isDefinedValue } from '../ComboBox/Value/Schema.mjs';
+import { NestedLevel, Row, Cell } from '../DataBuilderUI/index.mjs';
+import useDataBuilder from './data-builder-context.mjs';
+import { isFieldVisible } from './data-field.mjs';
+import useDataBuilderField, { DataBuilderFieldProvider } from './field-context.mjs';
+import { FieldDelete } from './FieldDelete.mjs';
+import FieldName from './FieldName.mjs';
+import { FieldTypeSelector, convertableSchemaToSchema } from './FieldTypeSelector/index.mjs';
+import DataBuilderFormFieldValue from './FieldValue/index.mjs';
+import DataBuilderFormNested from './Nested.mjs';
+
+function DataBuilderFormField({
+  field,
+  onChange,
+  onKeyChange,
+  onDelete,
+  onEnter
+}) {
+  const { hideReadOnlyFields } = useDataBuilder();
+  if (field.schema?.readOnly && hideReadOnlyFields) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field, children: /* @__PURE__ */ jsx(
+    DataBuilderFieldContent,
+    {
+      onChange,
+      onKeyChange,
+      onDelete,
+      onEnter
+    }
+  ) });
+}
+function DataBuilderFieldContent({
+  onChange,
+  onKeyChange,
+  onDelete,
+  onEnter
+}) {
+  const { isReadOnly } = useDataBuilder();
+  const {
+    field,
+    localSchema,
+    setLocalSchema,
+    resetLocalSchema,
+    localSchemaChangedManually,
+    setLocalSchemaChangedManually,
+    autoOpen,
+    setAutoOpen
+  } = useDataBuilderField();
+  useEffect(() => {
+    if (!localSchemaChangedManually) {
+      resetLocalSchema();
+    }
+  }, [JSON.stringify(field?.schema)]);
+  async function handleChange(value) {
+    onChange?.(value);
+  }
+  function handleKeyChange(newKey) {
+    onKeyChange?.(newKey);
+  }
+  function handleEnterKey(value) {
+    if (value && onEnter) {
+      onEnter?.();
+    }
+  }
+  function handleEscKey(value) {
+    if (!value && onDelete) {
+      onDelete?.();
+    }
+  }
+  function handleLocalSchemaTypeChange(schemaType) {
+    const showValueDropdown = !(schemaType === "object" || schemaType === "array");
+    const resetValue = !convertableSchemaToSchema(localSchema?.type, schemaType);
+    setLocalSchemaChangedManually(true);
+    setLocalSchema({ ...localSchema, type: schemaType });
+    if (resetValue) {
+      onChange?.("");
+    }
+    setAutoOpen(showValueDropdown);
+  }
+  let showValue = true;
+  const fieldIsObjectOrArray = ["object", "array"].includes(
+    localSchema?.type
+  );
+  const fieldHasCustomValue = !isFormula(field?.value);
+  if (fieldIsObjectOrArray && fieldHasCustomValue && !autoOpen) {
+    showValue = false;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: isFieldVisible(field) && /* @__PURE__ */ jsxs(Row, { short: !showValue, children: [
+      (isDefinedValue(field.key) || field.schema?.title) && /* @__PURE__ */ jsx(Cell.Name, { children: /* @__PURE__ */ jsx(
+        FieldName,
+        {
+          field,
+          onKeyChange: handleKeyChange,
+          onEnter: handleEnterKey,
+          onEsc: handleEscKey,
+          typeSelectorSlot: /* @__PURE__ */ jsx(
+            FieldTypeSelector,
+            {
+              onChange: handleChange,
+              onSchemaChange: handleLocalSchemaTypeChange
+            }
+          )
+        }
+      ) }),
+      showValue && /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, children: /* @__PURE__ */ jsx(FieldDataInput, { onChange: handleChange }) }),
+      field.isDeletable && !isReadOnly && /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
+    ] }) }),
+    /* @__PURE__ */ jsx(DataBuilderFormNested, { field, onChange: handleChange })
+  ] });
+}
+function FieldDataInput({
+  onChange
+}) {
+  const { field, localSchema, setLocalSchemaChangedManually } = useDataBuilderField();
+  function handleChange(value) {
+    setLocalSchemaChangedManually(false);
+    onChange(value);
+  }
+  const fieldWithDefinedSchema = !field.schema?.type ? {
+    ...field,
+    schema: {
+      ...field.schema,
+      ...localSchema,
+      anyOf: void 0
+    }
+  } : field;
+  return /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: fieldWithDefinedSchema, onChange: handleChange });
+}
+
+export { DataBuilderFormField as default };

package/dist/esm/components/DataBuilder/FieldDelete.mjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { SvgIcon, SvgIconType } from '../SvgIcon/index.mjs';
+import useEventStopPropagation from '../../hooks/useEventStopPropagation.mjs';
+import { ActionBar } from '../DataBuilderUI/index.mjs';
+
+function FieldDelete({ onClick }) {
+  if (!onClick) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ActionBar, { children: /* @__PURE__ */ jsx(ActionBar.DeleteButton, { onClick: useEventStopPropagation(onClick), children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Close }) }) });
+}
+
+export { FieldDelete };

package/dist/esm/components/DataBuilder/FieldDescription.mjs

@@ -0,0 +1,37 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { Text } from '../../ui-kit/styled/text.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+
+function FieldDescription({ text }) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip: text, offset: [0, 4], placement: "bottom-start", children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "span",
+      display: "inline-block",
+      px: "1",
+      ml: "2",
+      cursor: "help",
+      bg: "neutral.2",
+      rounded: "xs",
+      color: "neutral.11",
+      textAlign: "center",
+      lineHeight: "1.2",
+      minW: "5",
+      _hover: {
+        bg: "neutral.3"
+      },
+      children: "?"
+    }
+  ) });
+}
+
+export { FieldDescription };

package/dist/esm/components/DataBuilder/FieldList.mjs

@@ -0,0 +1,44 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { makeDataField } from './index.mjs';
+import { DataBuilderForm } from './Form.mjs';
+
+function FieldList({
+  schema,
+  value,
+  variablesSchema,
+  isAdminMode,
+  frozenFieldsLocators = [],
+  onChange,
+  collapsed,
+  hideReadOnlyFields
+}) {
+  if (schema?.type !== "object") {
+    return /* @__PURE__ */ jsx("span", { children: "Something went wrong. Trying to display a field list for schema that is not an object." });
+  }
+  const field = makeDataField({
+    schema,
+    value,
+    variablesSchema
+  });
+  return /* @__PURE__ */ jsx(
+    DataBuilderForm,
+    {
+      field,
+      onChange,
+      isAdminMode,
+      frozenFieldsLocators,
+      collapsed,
+      hideReadOnlyFields
+    }
+  );
+}
+
+export { FieldList };

package/dist/esm/components/DataBuilder/FieldName.mjs

@@ -0,0 +1,60 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { InlineEditable } from '../InlineEditable.mjs';
+import { fieldLabel } from './data-field.mjs';
+import { Title } from '../DataBuilderUI/index.mjs';
+import useDataBuilder from './data-builder-context.mjs';
+import { FieldDescription } from './FieldDescription.mjs';
+
+function FieldName({
+  field,
+  onKeyChange,
+  onEnter,
+  onEsc,
+  rightSlot,
+  typeSelectorSlot
+}) {
+  const { errorFieldsLocators } = useDataBuilder();
+  if (field.isInSchema || field.key === void 0) {
+    const isErrorField = field?.valueLocator && (errorFieldsLocators || []).includes(field.valueLocator);
+    return /* @__PURE__ */ jsx(
+      Title,
+      {
+        required: field.isRequired,
+        hasValue: !!field.value || field.value === false,
+        hasError: !!isErrorField,
+        typeSelectorSlot,
+        rightSlot: rightSlot || /* @__PURE__ */ jsx(FieldDescription, { text: field.schema?.description }),
+        children: fieldLabel(field)
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(
+      Title,
+      {
+        typeSelectorSlot,
+        rightSlot: rightSlot || /* @__PURE__ */ jsx(FieldDescription, { text: field.schema?.description }),
+        children: /* @__PURE__ */ jsx(
+          InlineEditable,
+          {
+            onChange: onKeyChange,
+            onEnter,
+            onEsc,
+            autoFocus: !field.key,
+            value: field.key,
+            placeholder: "Enter field name"
+          }
+        )
+      }
+    );
+  }
+}
+
+export { FieldName as default };