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

package/dist/esm/components/DataBuilder/Nested/ObjectFields.mjs

@@ -0,0 +1,203 @@
+"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 { useState } from 'react';
+import { DEFAULT_FIELD_KEY, isRootField } from '../data-field.mjs';
+import DataBuilderFormField from '../Field.mjs';
+import { DataBuilderFieldControlPanel } from './FieldControlPanel/index.mjs';
+import { FieldListWrapper } from './FieldListWrapper/index.mjs';
+import useDataBuilder from '../data-builder-context.mjs';
+
+function DataBuilderFormNestedObjectFields({
+  field,
+  onChange
+}) {
+  const { showNullValueFields, hideReadOnlyFields } = useDataBuilder();
+  const [fieldToShowKeys, setFieldToShowKeys] = useState(
+    getInitialFieldsToShow(field)
+  );
+  function handleNewValue(newValue) {
+    if (Object.keys(newValue ?? {}).length > 0) {
+      onChange(newValue);
+    } else {
+      onChange(void 0);
+    }
+  }
+  function handlePropertyKeyChange(oldKey, newKey) {
+    const newProperties = {};
+    for (const [key, value] of Object.entries(field.value)) {
+      if (key == oldKey) {
+        newProperties[newKey] = value;
+      } else {
+        newProperties[key] = value;
+      }
+    }
+    handleNewValue(newProperties);
+    setFieldToShowKeys(
+      fieldToShowKeys.map((key) => key === oldKey ? newKey : key)
+    );
+  }
+  function handlePropertyValueChange(key, value) {
+    const newProperties = { ...field.value };
+    newProperties[key] = value;
+    handleNewValue(newProperties);
+  }
+  function handleAddProperty(fieldKey = DEFAULT_FIELD_KEY) {
+    handleNewValue({
+      ...field.value || {},
+      [fieldKey]: null
+    });
+    setFieldToShowKeys([...fieldToShowKeys, fieldKey]);
+  }
+  function handleDeleteProperty(propertyField) {
+    const newValue = { ...field.value || {} };
+    delete newValue[propertyField.key];
+    handleNewValue(newValue);
+    setFieldToShowKeys(fieldToShowKeys.filter((x) => x !== propertyField.key));
+  }
+  function isFieldHidden(field2) {
+    return hideReadOnlyFields && field2?.schema?.readOnly;
+  }
+  function isFieldDisplayedByDefault(field2) {
+    const isFieldRequired = field2?.isRequired;
+    const isFieldFilled = !!field2?.value || showNullValueFields && field2?.value === null;
+    const isFieldToShow = field2?.key !== void 0 ? fieldToShowKeys.includes(field2.key) : false;
+    return isFieldRequired || isFieldFilled || isFieldToShow;
+  }
+  function sortFieldByFieldToShowKey(fieldA, fieldB) {
+    const fieldAIndex = fieldToShowKeys.indexOf(fieldA.key);
+    const fieldBIndex = fieldToShowKeys.indexOf(fieldB.key);
+    if (fieldAIndex !== -1 && fieldBIndex !== -1) {
+      if (fieldAIndex === -1 || fieldAIndex < fieldBIndex) return -1;
+      if (fieldBIndex === -1 || fieldAIndex > fieldBIndex) return 1;
+    }
+    return 0;
+  }
+  const baseFields = (field?.subFields ?? []).filter((f) => !isFieldHidden(f)).filter(isFieldDisplayedByDefault).sort(sortFieldByFieldToShowKey);
+  const additionalFields = (field?.subFields ?? []).filter((f) => !isFieldHidden(f)).filter((x) => !isFieldDisplayedByDefault(x));
+  return /* @__PURE__ */ jsx(
+    FieldListCollapsible,
+    {
+      field,
+      baseFields,
+      additionalFields,
+      onChange: handlePropertyValueChange,
+      onKeyChange: handlePropertyKeyChange,
+      onDelete: handleDeleteProperty,
+      onAdd: handleAddProperty
+    }
+  );
+}
+function getInitialFieldsToShow(field) {
+  const subFields = field?.subFields ?? [];
+  const getKeysFromSubFields = (subFields2) => {
+    return subFields2.map((x) => x.key).filter((x) => x !== void 0);
+  };
+  const requiredFieldKeys = getKeysFromSubFields(
+    subFields.filter((x) => x.isRequired)
+  );
+  const fieldsWithValueKeys = getKeysFromSubFields(
+    subFields.filter((x) => x.value !== void 0)
+  );
+  const amountFieldsToShow = requiredFieldKeys.length + fieldsWithValueKeys.length;
+  if (isRootField(field) && amountFieldsToShow === 0) {
+    return getKeysFromSubFields(subFields);
+  }
+  return [...requiredFieldKeys, ...fieldsWithValueKeys];
+}
+function FieldListCollapsible({
+  field,
+  baseFields,
+  additionalFields,
+  onChange,
+  onKeyChange,
+  onDelete,
+  onAdd
+}) {
+  const { collapsedDataBuilder, initialVisibleFieldCount } = useDataBuilder();
+  const isRoot = field.level === 1;
+  const showCollapseWrapper = isRoot && collapsedDataBuilder && baseFields.length > initialVisibleFieldCount;
+  const [collapsed, setCollapsed] = useState(isRoot);
+  function toggleCollapsed() {
+    setCollapsed(!collapsed);
+  }
+  if (!isRoot || !showCollapseWrapper) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        BaseFieldsList,
+        {
+          baseFields,
+          onChange,
+          onKeyChange,
+          onAdd,
+          onDelete
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DataBuilderFieldControlPanel,
+        {
+          field,
+          onAdd,
+          additionalFields
+        }
+      )
+    ] });
+  }
+  const renderedFields = collapsed ? baseFields.slice(0, initialVisibleFieldCount) : baseFields;
+  const fieldsToShow = baseFields.length - initialVisibleFieldCount;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    FieldListWrapper,
+    {
+      collapsed,
+      onClick: toggleCollapsed,
+      fieldsToShow,
+      children: [
+        /* @__PURE__ */ jsx(
+          BaseFieldsList,
+          {
+            baseFields: renderedFields,
+            onChange,
+            onKeyChange,
+            onAdd,
+            onDelete
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsx(
+          DataBuilderFieldControlPanel,
+          {
+            field,
+            onAdd,
+            additionalFields
+          }
+        )
+      ]
+    }
+  ) });
+}
+function BaseFieldsList({
+  baseFields,
+  onChange,
+  onKeyChange,
+  onDelete,
+  onAdd
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: baseFields.map((field, idx) => /* @__PURE__ */ jsx(
+    DataBuilderFormField,
+    {
+      field,
+      onChange: (value) => onChange(field.key, value),
+      onKeyChange: (newKey) => onKeyChange(field.key, newKey),
+      onDelete: () => onDelete(field),
+      onEnter: onAdd
+    },
+    idx
+  )) });
+}
+
+export { DataBuilderFormNestedObjectFields as default };

package/dist/esm/components/DataBuilder/Nested/ValueMapping.mjs

@@ -0,0 +1,226 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import usePromise from '../../../_modules/react-use-promise.mjs';
+import { getFormula, DataBuilderFormulaType, buildDataSchema, getReferenceCollectionPathForSchema, makeDataLocationOperationPath } from '@integration-app/sdk';
+import DataBuilderFormFieldValue from '../FieldValue/index.mjs';
+import { NestedLevel, Row, Cell, Title } from '../../DataBuilderUI/index.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { FieldDelete } from '../FieldDelete.mjs';
+import { makeSubField } from '../data-field.mjs';
+import { DataBuilderFieldControlPanel } from './FieldControlPanel/index.mjs';
+import { useIntegrationAppClient } from '../../../contexts/integration-app-client-context.mjs';
+import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
+
+const MAX_EXPANDED_VALUES = 20;
+function ValueMapping({ field, onChange }) {
+  const { client } = useIntegrationAppClient();
+  const { connectionId } = useIntegrationAppConnection();
+  const formula = getFormula(field.value);
+  if (formula?.type !== DataBuilderFormulaType.MAP) {
+    return null;
+  }
+  const valueSchema = buildDataSchema(
+    formula?.args?.value,
+    field.variablesSchema
+  );
+  const [fieldRecords, fieldRecordsError] = usePromise(
+    () => loadSchemaRecords(field.schema, client, connectionId),
+    [JSON.stringify(field.schema)]
+  );
+  const [valueRecords, valueRecordsError] = usePromise(
+    () => loadSchemaRecords(valueSchema, client, connectionId),
+    [JSON.stringify(valueSchema)]
+  );
+  if (fieldRecordsError || valueRecordsError) {
+    return /* @__PURE__ */ jsx("p", { children: (fieldRecordsError || valueRecordsError).toString() });
+  }
+  if (!fieldRecords || !valueRecords) {
+    return /* @__PURE__ */ jsx("p", { children: "Loading..." });
+  }
+  let autoExpandedValues = valueRecords;
+  if (autoExpandedValues.length === 0 || autoExpandedValues.length > MAX_EXPANDED_VALUES) {
+    autoExpandedValues = null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: autoExpandedValues ? /* @__PURE__ */ jsx(
+    AutoExpandedMapping,
+    {
+      valueRecords: autoExpandedValues,
+      fieldRecords,
+      field,
+      onChange
+    }
+  ) : /* @__PURE__ */ jsx(
+    CustomMapping,
+    {
+      field,
+      valueSchema,
+      onChange
+    }
+  ) });
+}
+function AutoExpandedMapping({ valueRecords, field, fieldRecords, onChange }) {
+  const mapping = field.value?.$map?.mapping ?? [];
+  function handleMappingChange(fromRecord, toValue) {
+    const newMapping = JSON.parse(JSON.stringify(mapping));
+    let idx = newMapping.findIndex((m) => m.from === fromRecord.id);
+    if (idx === -1) {
+      idx = newMapping.length;
+    }
+    newMapping[idx] = {
+      from: fromRecord.id,
+      to: toValue
+    };
+    onChange(newMapping);
+  }
+  const fieldOptionsSchema = {
+    type: field.schema?.type
+  };
+  if (fieldRecords?.length) {
+    fieldOptionsSchema.referenceRecords = fieldRecords;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: valueRecords.map((valueRecord, idx) => {
+    const subField = makeSubField(field, {
+      schema: fieldOptionsSchema,
+      value: mapping.find((m) => m.from === valueRecord.id)?.to,
+      optionFactories: [],
+      variablesSchema: []
+    });
+    return /* @__PURE__ */ jsx(NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Cell.Name, { children: /* @__PURE__ */ jsx(Title, { children: valueRecord.name ?? valueRecord.id }) }),
+      /* @__PURE__ */ jsx(Cell.Icon, { type: SvgIconType.ValueMapping }),
+      /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, children: /* @__PURE__ */ jsx(
+        DataBuilderFormFieldValue,
+        {
+          field: subField,
+          onChange: (value) => handleMappingChange(valueRecord, value)
+        }
+      ) })
+    ] }) }, idx);
+  }) });
+}
+function CustomMapping({ field, valueSchema, onChange }) {
+  const mapping = field.value?.$map?.mapping ?? [];
+  function handleMappingItemChange(idx, value) {
+    const newMapping = JSON.parse(JSON.stringify(mapping));
+    newMapping[idx] = value;
+    onChange(newMapping);
+  }
+  function handleAddMapping() {
+    const newMapping = JSON.parse(JSON.stringify(mapping));
+    newMapping.push({});
+    onChange(newMapping);
+  }
+  function handleRemoveMapping(idx) {
+    const newMapping = JSON.parse(JSON.stringify(mapping));
+    newMapping.splice(idx, 1);
+    onChange(newMapping);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mapping.map((mappingItem, idx) => /* @__PURE__ */ jsx(
+      MappingListItem,
+      {
+        field,
+        item: mappingItem,
+        idx,
+        valueSchema,
+        onChange: (value) => handleMappingItemChange(idx, value),
+        onDelete: () => handleRemoveMapping(idx)
+      },
+      idx
+    )),
+    /* @__PURE__ */ jsx(
+      DataBuilderFieldControlPanel,
+      {
+        field,
+        addFieldLabel: "Add Mapping",
+        onAdd: handleAddMapping
+      }
+    )
+  ] });
+}
+function MappingListItem({
+  field,
+  item,
+  idx,
+  valueSchema,
+  onChange,
+  onDelete
+}) {
+  const fromField = makeSubField(field, {
+    valueLocator: `${field.valueLocator}.$map.mapping[${idx}].from`,
+    schema: valueSchema,
+    value: item?.from,
+    optionFactories: [],
+    variablesSchema: null
+  });
+  const toField = makeSubField(field, {
+    valueLocator: `${field.valueLocator}.$map.mapping[${idx}].to`,
+    schema: field.schema,
+    value: item?.to,
+    optionFactories: [],
+    variablesSchema: null
+  });
+  function handleFromChange(value) {
+    onChange({
+      ...item ?? {},
+      from: value
+    });
+  }
+  function handleToChange(value) {
+    onChange({
+      ...item ?? {},
+      to: value
+    });
+  }
+  return /* @__PURE__ */ jsx(NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsx(
+      DataBuilderFormFieldValue,
+      {
+        field: fromField,
+        onChange: (value) => handleFromChange(value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell.Icon, { type: SvgIconType.ValueMapping }),
+    /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsx(
+      DataBuilderFormFieldValue,
+      {
+        field: toField,
+        onChange: (value) => handleToChange(value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
+  ] }) });
+}
+async function loadSchemaRecords(schema, client, connectionId) {
+  if (!schema) {
+    return [];
+  }
+  if (schema.enum) {
+    return schema.enum.map((value) => ({
+      id: value
+    }));
+  } else if (schema.referenceRecords) {
+    return schema.referenceRecords;
+  } else if (getReferenceCollectionPathForSchema(schema) && client && connectionId) {
+    const listResponse = await client.connection(connectionId).request(
+      makeDataLocationOperationPath(
+        /* FIXME: strictNullCheck temporary fix */
+        // @ts-expect-error TS(2345): Argument of type 'string | undefined' is not... Remove this comment to see the full error message
+        getReferenceCollectionPathForSchema(schema),
+        "list"
+      )
+    );
+    return listResponse.records;
+  } else {
+    return [];
+  }
+}
+
+export { ValueMapping };

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

@@ -0,0 +1,28 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { isFormula } from '@integration-app/sdk';
+import useDataBuilderField from './field-context.mjs';
+import DataBuilderFormNestedArrayItems from './Nested/ArrayItems.mjs';
+import DataBuilderFormNestedObjectFields from './Nested/ObjectFields.mjs';
+import DataBuilderFormNestedNoSchema from './Nested/NoSchema.mjs';
+
+function DataBuilderFormNested({
+  field,
+  onChange
+}) {
+  const { localSchema } = useDataBuilderField();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !localSchema?.type && /* @__PURE__ */ jsx(DataBuilderFormNestedNoSchema, { field, onChange }),
+    localSchema?.type == "object" && !isFormula(field.value) && /* @__PURE__ */ jsx(DataBuilderFormNestedObjectFields, { field, onChange }),
+    localSchema?.type == "array" && /* @__PURE__ */ jsx(DataBuilderFormNestedArrayItems, { field, onChange })
+  ] });
+}
+
+export { DataBuilderFormNested as default };

package/dist/esm/components/DataBuilder/data-builder-context.mjs

@@ -0,0 +1,64 @@
+"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 { createContext, useContext } from 'react';
+
+const FIELDS_TO_SHOW = 5;
+function useDataBuilder() {
+  return useContext(DataBuilderContext);
+}
+const DataBuilderContext = createContext({
+  drilldownStack: [],
+  isAdminMode: false,
+  isReadOnly: false,
+  showNullValueFields: false,
+  hideReadOnlyFields: false,
+  frozenFieldsLocators: [],
+  errorFieldsLocators: [],
+  editableVariablesSchemaLocators: [],
+  collapsedDataBuilder: false,
+  initialVisibleFieldCount: FIELDS_TO_SHOW
+});
+DataBuilderContext.displayName = "DataBuilderContext";
+const DataBuilderProvider = ({
+  topLevelField,
+  isAdminMode = false,
+  children,
+  errorFieldsLocators = [],
+  frozenFieldsLocators = [],
+  editableVariablesSchemaLocators = [],
+  onAddVariable,
+  readOnly = false,
+  showNullValueFields = false,
+  hideReadOnlyFields = false,
+  collapsedDataBuilder = false,
+  initialVisibleFieldCount = FIELDS_TO_SHOW
+}) => {
+  return /* @__PURE__ */ jsx(
+    DataBuilderContext.Provider,
+    {
+      value: {
+        topLevelField,
+        isAdminMode,
+        isReadOnly: readOnly,
+        errorFieldsLocators,
+        frozenFieldsLocators,
+        showNullValueFields,
+        hideReadOnlyFields: !!hideReadOnlyFields,
+        editableVariablesSchemaLocators,
+        onAddVariable,
+        initialVisibleFieldCount,
+        collapsedDataBuilder
+      },
+      children
+    }
+  );
+};
+
+export { DataBuilderProvider, useDataBuilder as default };