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

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 };

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

@@ -0,0 +1,214 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isFormula } from '@integration-app/sdk';
+import { toHeaderCase } from 'js-convert-case';
+import { SvgIconType, SvgIcon } from '../../SvgIcon/index.mjs';
+import { getFieldSchemaOptions } from '../data-field.mjs';
+import useDataBuilderField from '../field-context.mjs';
+import { useDataBuilderFieldCanUseVarFromVariables } from '../hooks.mjs';
+import { Root, Trigger, Positioner, Content, Item, ItemGroup, ItemGroupLabel } from '../../../ui-kit/styled/menu.mjs';
+import { Icon } from '../../../ui-kit/styled/icon.mjs';
+import '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import { sva } from '../../../styled-system/css/sva.mjs';
+
+const recipe = sva({
+  className: "type_selector",
+  slots: ["trigger", "content", "item", "groupContainer", "groupTitle"],
+  base: {
+    trigger: {
+      rounded: "sm",
+      px: "1",
+      display: "flex",
+      alignItems: "center",
+      color: "neutral.11",
+      gap: "0.5",
+      _hover: {
+        bg: "neutral.2"
+      },
+      _focusVisible: {
+        bg: "neutral.2"
+      }
+    },
+    content: {
+      bg: "surface.default",
+      borderWidth: "thin",
+      borderColor: "neutral.5",
+      px: "3",
+      py: "2.5",
+      rounded: "sm",
+      minW: "48",
+      w: "auto",
+      shadow: "none",
+      flexDirection: "row",
+      alignItems: "start",
+      justifyContent: "start",
+      gap: "5"
+    },
+    item: {
+      display: "flex",
+      flexDir: "row",
+      gap: "2",
+      px: "2.5",
+      py: "2",
+      rounded: "sm",
+      margin: "0",
+      fontWeight: "normal",
+      w: "full",
+      h: "auto",
+      '&[data-selected="true"]': {
+        fontWeight: "bold"
+      },
+      "&[data-highlighted]": {
+        bg: "touchable.hover"
+      },
+      _hover: {
+        bg: "touchable.hover"
+      }
+    },
+    groupContainer: {
+      display: "flex",
+      flexDir: "column",
+      gap: "0",
+      w: "full",
+      minW: "48"
+    },
+    groupTitle: {
+      fontSize: "xs",
+      color: "neutral.9",
+      fontWeight: "bold",
+      px: "2.5",
+      py: "2",
+      m: "0"
+    }
+  }
+});
+function FieldTypeSelector({
+  onChange,
+  onSchemaChange,
+  ...rest
+}) {
+  const classes = recipe();
+  const { field, localSchema } = useDataBuilderField();
+  const showUseVarFromVariables = useDataBuilderFieldCanUseVarFromVariables();
+  const schemaOptions = getFieldSchemaOptions(field).map(
+    (schemaOption) => ({
+      value: schemaOption.type,
+      label: toHeaderCase(schemaOption.type),
+      iconType: SvgIconType[`SchemaType_${schemaOption.type}`],
+      active: localSchema?.type === schemaOption.type
+    })
+  );
+  const showTypeSelector = schemaOptions.length > 1;
+  if (!showTypeSelector && !showUseVarFromVariables) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Root, { lazyMount: true, unmountOnExit: true, ...rest, children: [
+    ":",
+    /* @__PURE__ */ jsxs(
+      Trigger,
+      {
+        className: classes.trigger,
+        "aria-label": "Change schema type",
+        children: [
+          localSchema?.type ?? "select",
+          /* @__PURE__ */ jsx(Icon, { w: "3", h: "4", pt: "1px", children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.ChevronDown }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { className: classes.content, children: [
+      showTypeSelector && /* @__PURE__ */ jsx(TypeSelector, { options: schemaOptions, onChange: onSchemaChange }),
+      showUseVarFromVariables && /* @__PURE__ */ jsx(FieldDropdown, { onChange })
+    ] }) })
+  ] });
+}
+function TypeSelector({
+  options,
+  onChange
+}) {
+  if (options.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(GroupContainer, { title: "Field Type", children: options.map(({ value, iconType, label, active }) => /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      onClick: () => onChange(value),
+      icon: iconType,
+      "data-selected": active,
+      children: label
+    },
+    String(value)
+  )) });
+}
+function FieldDropdown({ onChange }) {
+  const { localSchema } = useDataBuilderField();
+  switch (localSchema?.type) {
+    case "object":
+      return /* @__PURE__ */ jsx(FieldObjectDropdown, { onChange });
+    case "array":
+      return /* @__PURE__ */ jsx(FieldArrayDropdown, { onChange });
+    default:
+      return null;
+  }
+}
+function FieldObjectDropdown({ onChange }) {
+  const { field, setAutoOpen } = useDataBuilderField();
+  function handleUseObjectFromVariables() {
+    setAutoOpen(true);
+  }
+  function handleSetIndividualFields() {
+    onChange(void 0);
+  }
+  const valueIsIndividualFields = !isFormula(field.value);
+  return /* @__PURE__ */ jsx(GroupContainer, { title: "Field Value", children: valueIsIndividualFields ? /* @__PURE__ */ jsx(MenuItem, { onClick: handleUseObjectFromVariables, children: "Use object from variables" }) : /* @__PURE__ */ jsx(MenuItem, { onClick: handleSetIndividualFields, children: "Set individual fields" }) });
+}
+function FieldArrayDropdown({ onChange }) {
+  const { field, setAutoOpen } = useDataBuilderField();
+  function handleUseListFromVariables() {
+    setAutoOpen(true);
+  }
+  function handleSetIndividualItems() {
+    onChange(void 0);
+  }
+  const valueIsIndividualFields = !isFormula(field.value);
+  return /* @__PURE__ */ jsx(GroupContainer, { title: "Field Value", children: valueIsIndividualFields ? /* @__PURE__ */ jsx(MenuItem, { onClick: handleUseListFromVariables, children: "Use list from variables" }) : /* @__PURE__ */ jsx(MenuItem, { onClick: handleSetIndividualItems, children: "Set individual items" }) });
+}
+function MenuItem({
+  icon,
+  children,
+  ...props
+}) {
+  const classes = recipe();
+  return /* @__PURE__ */ jsxs(Item, { ...props, className: classes.item, value: String(children), children: [
+    icon && /* @__PURE__ */ jsx(Icon, { w: "5", h: "5", children: /* @__PURE__ */ jsx(SvgIcon, { type: icon }) }),
+    children
+  ] });
+}
+function GroupContainer({
+  children,
+  title
+}) {
+  const classes = recipe();
+  return /* @__PURE__ */ jsxs(ItemGroup, { className: classes.groupContainer, children: [
+    /* @__PURE__ */ jsx(ItemGroupLabel, { className: classes.groupTitle, children: title }),
+    children
+  ] });
+}
+function convertableSchemaToSchema(oldSchemaType, newSchemaType) {
+  if (oldSchemaType === newSchemaType) {
+    return true;
+  }
+  if ([oldSchemaType, newSchemaType].includes("object") || [oldSchemaType, newSchemaType].includes("array")) {
+    return false;
+  }
+  return true;
+}
+
+export { FieldTypeSelector, convertableSchemaToSchema };

package/dist/esm/components/DataBuilder/FieldValue/Array.mjs

@@ -0,0 +1,32 @@
+"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 DefaultFieldValue from './Default.mjs';
+
+function ArrayFieldValue({
+  field,
+  onChange,
+  refsToIgnoreClick,
+  topDropdownPanelComponent
+}) {
+  if (Array.isArray(field.value) && field.value.length > 0 && field.schema?.items) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    DefaultFieldValue,
+    {
+      field,
+      onChange,
+      refsToIgnoreClick,
+      topDropdownPanelComponent
+    }
+  );
+}
+
+export { ArrayFieldValue as default };

package/dist/esm/components/DataBuilder/FieldValue/Default.mjs

@@ -0,0 +1,50 @@
+"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 { ComboBox } from '../../ComboBox/index.mjs';
+import useDataBuilder from '../data-builder-context.mjs';
+import useDataBuilderField from '../field-context.mjs';
+import { getValueSpecFromSchema } from '../../ComboBox/value-spec.mjs';
+import { getFieldValueProps } from '../data-field.mjs';
+
+function DefaultFieldValue({
+  field,
+  onChange,
+  refsToIgnoreClick,
+  topDropdownPanelComponent
+}) {
+  const { isEmpty, isRequired } = getFieldValueProps(field);
+  const { isReadOnly, frozenFieldsLocators } = useDataBuilder();
+  const { autoOpen, setAutoOpen } = useDataBuilderField();
+  const isFrozenField = frozenFieldsLocators.some(
+    (frozenFieldLocator) => frozenFieldLocator && field.valueLocator?.startsWith(frozenFieldLocator)
+  );
+  function handleDropdownClose() {
+    setAutoOpen(false);
+  }
+  return /* @__PURE__ */ jsx(
+    ComboBox,
+    {
+      value: isEmpty ? void 0 : field.value,
+      schema: field.schema,
+      onChange,
+      valueSpec: getValueSpecFromSchema(field.schema),
+      variablesSchema: field.variablesSchema,
+      optionFactories: field.optionFactories,
+      isRequired,
+      disabled: isFrozenField || isReadOnly,
+      autoOpen,
+      onClose: handleDropdownClose,
+      refsToIgnoreClick,
+      topDropdownPanelComponent
+    }
+  );
+}
+
+export { DefaultFieldValue as default };

package/dist/esm/components/DataBuilder/FieldValue/ScalarArray.mjs

@@ -0,0 +1,32 @@
+"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 { makeSubField } from '../data-field.mjs';
+import DataBuilderFormNestedArrayItems from '../Nested/ArrayItems.mjs';
+import classes from './ScalarArray.module.css.mjs';
+
+function ScalarArrayFieldValue({
+  field,
+  onChange
+}) {
+  const currentValue = Array.isArray(field.value) ? field.value : [field.value];
+  const dataBuilderField = makeSubField(field, {
+    value: currentValue,
+    level: 1
+  });
+  return /* @__PURE__ */ jsx("div", { className: classes.wrapper, children: /* @__PURE__ */ jsx(
+    DataBuilderFormNestedArrayItems,
+    {
+      field: dataBuilderField,
+      onChange
+    }
+  ) });
+}
+
+export { ScalarArrayFieldValue as default };

package/dist/esm/components/DataBuilder/FieldValue/ScalarArray.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".ScalarArray-module_wrapper__wxaVk {\n    width: 100%;\n    margin-left: -1.25rem;\n    padding-bottom: 0.5rem\n}\n";
+var classes = {"wrapper":"ScalarArray-module_wrapper__wxaVk"};
+styleInject(css_248z);
+
+export { classes as default };

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

@@ -0,0 +1,48 @@
+"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 ArrayFieldValue from './Array.mjs';
+import DefaultFieldValue from './Default.mjs';
+import ScalarArrayFieldValue from './ScalarArray.mjs';
+import { schemaIsScalarArray } from '../data-field.mjs';
+
+function DataBuilderFormFieldValue({
+  field,
+  onChange,
+  allowScalarArray,
+  refsToIgnoreClick,
+  topDropdownPanelComponent
+}) {
+  if (allowScalarArray && schemaIsScalarArray(field.schema)) {
+    return /* @__PURE__ */ jsx(ScalarArrayFieldValue, { field, onChange });
+  }
+  if (field.schema?.type === "array") {
+    return /* @__PURE__ */ jsx(
+      ArrayFieldValue,
+      {
+        field,
+        onChange,
+        refsToIgnoreClick,
+        topDropdownPanelComponent
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(
+      DefaultFieldValue,
+      {
+        field,
+        onChange,
+        refsToIgnoreClick,
+        topDropdownPanelComponent
+      }
+    );
+  }
+}
+
+export { DataBuilderFormFieldValue as default };

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

@@ -0,0 +1,27 @@
+"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 classes from './styles.module.css.mjs';
+import { DataBuilderProvider } from './data-builder-context.mjs';
+import DataBuilderCondition from './Condition/index.mjs';
+import { makeDataField } from './index.mjs';
+
+function DataBuilderFilter({
+  value,
+  variablesSchema,
+  onChange
+}) {
+  const field = makeDataField({
+    value,
+    variablesSchema
+  });
+  return /* @__PURE__ */ jsx(DataBuilderProvider, { topLevelField: field, children: /* @__PURE__ */ jsx("div", { className: classes.wrapper, children: /* @__PURE__ */ jsx(DataBuilderCondition, { field, onChange }) }) });
+}
+
+export { DataBuilderFilter };

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

@@ -0,0 +1,51 @@
+"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 deepEqual from 'fast-deep-equal';
+import DataBuilderFormField from './Field.mjs';
+import { DataBuilderProvider } from './data-builder-context.mjs';
+import classes from './styles.module.css.mjs';
+
+function DataBuilderForm({
+  field,
+  isAdminMode,
+  readOnly,
+  onChange,
+  errorFieldsLocators = [],
+  frozenFieldsLocators = [],
+  editableVariablesSchemaLocators = [],
+  onAddVariable,
+  showNullValueFields,
+  hideReadOnlyFields,
+  collapsed,
+  fieldsToShow
+}) {
+  function handleOnChange(value) {
+    !deepEqual(value, field.value) && onChange(value);
+  }
+  return /* @__PURE__ */ jsx(
+    DataBuilderProvider,
+    {
+      topLevelField: field,
+      isAdminMode,
+      readOnly,
+      hideReadOnlyFields,
+      errorFieldsLocators,
+      frozenFieldsLocators,
+      showNullValueFields,
+      editableVariablesSchemaLocators,
+      onAddVariable,
+      collapsedDataBuilder: collapsed,
+      initialVisibleFieldCount: fieldsToShow,
+      children: /* @__PURE__ */ jsx("div", { className: classes.wrapper, children: /* @__PURE__ */ jsx(DataBuilderFormField, { field, onChange: handleOnChange }) })
+    }
+  );
+}
+
+export { DataBuilderForm };