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

package/dist/esm/components/ComboBox/options-factories/enum.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 { filterOptionsByLabel } from './base.mjs';
+
+class EnumOptionFactory {
+  constructor(params) {
+    this.params = params;
+  }
+  async getOptions({ input }) {
+    return this.getOptionsSync({ input });
+  }
+  getOptionsSync({ input }) {
+    const options = [];
+    if (this.params.schema.enum && Array.isArray(this.params.schema.enum)) {
+      this.params.schema.enum.map((enumValue) => {
+        if (typeof enumValue == "object" && enumValue.value) {
+          options.push({
+            label: enumValue.label ?? enumValue.value,
+            value: enumValue.value
+          });
+        } else {
+          options.push({
+            label: enumValue,
+            value: enumValue
+          });
+        }
+      });
+    }
+    const filteredOptions = filterOptionsByLabel(options, input);
+    if (filteredOptions.length > 0) {
+      return [
+        {
+          label: "Possible Values",
+          iconUri: this.params.iconUri,
+          isSection: true
+        },
+        ...filteredOptions
+      ];
+    } else {
+      return [];
+    }
+  }
+}
+
+export { EnumOptionFactory };

package/dist/esm/components/ComboBox/options-factories/index.mjs

@@ -0,0 +1,36 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import 'fuse';
+import '../../SvgIcon/index.mjs';
+import '@integration-app/sdk';
+import 'js-convert-case';
+import 'react/jsx-runtime';
+import 'react';
+import '../../Tag/styles.module.css.mjs';
+
+function getSchemaHint(schema) {
+  function formatExample(example) {
+    const exampleStr = example.toString();
+    return exampleStr.length > 30 ? exampleStr.substr(0, 30) + "\u2026" : exampleStr;
+  }
+  if (schema.examples) {
+    return schema.examples.map(formatExample).join(", ");
+  } else if (schema.type == "object") {
+    const propertiesNum = Object.keys(schema.properties ?? {}).length;
+    if (propertiesNum > 0) {
+      return `Object with ${propertiesNum} propert${propertiesNum == 1 ? "y" : "ies"}`;
+    } else {
+      return "Object";
+    }
+  } else {
+    return schema.type;
+  }
+}
+
+export { getSchemaHint };

package/dist/esm/components/ComboBox/options-factories/object-fields.mjs

@@ -0,0 +1,106 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { toHeaderCase } from 'js-convert-case';
+import { isValidLocator, locatorToSteps, getSchemaByLocator, locatorToField, stepsToLocator, DataLocatorStepObjectProperty, getNameComponentsForLocator, getFullNameForLocator, getNameForLocator, getIconUriForLocator } from '@integration-app/sdk';
+import { filterOptionsByLabel } from './base.mjs';
+import { getOptionsForSchema } from './schema.mjs';
+import { doesSchemaMatchValueType } from '../value-spec.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+
+class ObjectFieldsOptionFactory {
+  constructor(parameters) {
+    this.parameters = parameters;
+  }
+  async getOptions({ input, spec }) {
+    return this.getOptionsSync({ input, spec });
+  }
+  getOptionsSync({ input, spec }) {
+    const locator = this.parameters.locator ?? "$";
+    if (!isValidLocator(locator)) {
+      return [];
+    }
+    const locatorSteps = locatorToSteps(locator);
+    const objectSchema = getSchemaByLocator(this.parameters.schema, locator);
+    if (objectSchema?.type !== "object") {
+      return [];
+    }
+    const isSchemaEditable = this.parameters.editableSchemaLocators?.some(
+      (l) => locatorToField(stepsToLocator(locatorSteps)).startsWith(
+        locatorToField(l)
+      )
+    );
+    const showFullName = !!input;
+    const options = [];
+    if (doesSchemaMatchValueType(objectSchema, spec) && locator && locator !== "$") {
+      options.push({
+        label: "Whole Object",
+        value: {
+          $var: stepsToLocator(locatorToSteps(locator))
+        },
+        iconType: SvgIconType.SchemaType_object
+      });
+    }
+    for (const [fieldKey, fieldSchema] of Object.entries(
+      objectSchema.properties || {}
+    )) {
+      const propertyLocator = [
+        ...locatorSteps,
+        new DataLocatorStepObjectProperty(fieldKey)
+      ];
+      const objectNameComponents = getNameComponentsForLocator(
+        this.parameters.schema,
+        locator
+      );
+      options.push(
+        ...getOptionsForSchema({
+          schema: this.parameters.schema,
+          locator: propertyLocator,
+          valueSpec: spec,
+          showIcons: !this.parameters.isSection,
+          schemaByLocator: fieldSchema,
+          exampleVariables: this.parameters.exampleVariables,
+          skipNameComponentsPrefix: objectNameComponents,
+          nameComponentsByLocator: [
+            /* FIXME: strictNullCheck temporary fix */
+            // @ts-expect-error TS(2488): Type 'string[] | undefined' must have a '[Symbol.iterator]()' m... Remove this comment to see the full error message
+            ...objectNameComponents,
+            fieldSchema?.title ?? toHeaderCase(fieldKey)
+          ],
+          expandObject: false
+        })
+      );
+    }
+    if (isSchemaEditable) {
+      options.push({
+        label: `New${this.parameters?.name ? ` "${this.parameters.name}"` : ""} property`,
+        searchLabel: "",
+        hint: `Add property to this object`,
+        iconType: SvgIconType.Add,
+        addVariable: `${stepsToLocator(locatorSteps)}`,
+        isHighlighted: true
+      });
+    }
+    const filteredOptions = filterOptionsByLabel(options, input);
+    if (filteredOptions.length > 0) {
+      const result = filteredOptions;
+      if (this.parameters.isSection) {
+        result.unshift({
+          label: showFullName ? getFullNameForLocator(this.parameters.schema, locator) : getNameForLocator(this.parameters.schema, locator),
+          isSection: true,
+          iconUri: getIconUriForLocator(this.parameters.schema, locator)
+        });
+      }
+      return result;
+    } else {
+      return [];
+    }
+  }
+}
+
+export { ObjectFieldsOptionFactory };

package/dist/esm/components/ComboBox/options-factories/reference-records.mjs

@@ -0,0 +1,46 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { filterOptionsByLabel } from './base.mjs';
+
+class ReferenceRecordsOptionsFactory {
+  constructor(params) {
+    this.params = params;
+  }
+  async getOptions({ input }) {
+    return this.getOptionsSync({ input });
+  }
+  getOptionsSync({ input }) {
+    const options = [];
+    if (this.params.schema.referenceRecords && Array.isArray(this.params.schema.referenceRecords)) {
+      this.params.schema.referenceRecords.map((record) => {
+        if (typeof record == "object" && record.id !== void 0) {
+          options.push({
+            label: record.name ?? record.id,
+            value: record.id
+          });
+        }
+      });
+    }
+    const filteredOptions = filterOptionsByLabel(options, input);
+    if (filteredOptions.length > 0) {
+      return [
+        {
+          label: "Possible Values",
+          isSection: true,
+          iconUri: this.params.iconUri
+        },
+        ...filteredOptions
+      ];
+    } else {
+      return [];
+    }
+  }
+}
+
+export { ReferenceRecordsOptionsFactory };

package/dist/esm/components/ComboBox/options-factories/reference-udm.mjs

@@ -0,0 +1,34 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { UNIFIED_DATA_MODELS } from '@integration-app/sdk';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { filterOptionsByLabel } from './base.mjs';
+
+class ReferenceUdmOptionFactory {
+  constructor(schema) {
+    this.schema = schema;
+  }
+  async getOptions({ input }) {
+    const options = [];
+    const udm = this.schema?.referenceUdm;
+    const udmSpec = UNIFIED_DATA_MODELS[udm];
+    if (udmSpec) {
+      options.push({
+        label: "Select Dynamically Using Variables",
+        iconType: SvgIconType.Search,
+        value: {
+          $lookup: {}
+        }
+      });
+    }
+    return filterOptionsByLabel(options, input);
+  }
+}
+
+export { ReferenceUdmOptionFactory };

package/dist/esm/components/ComboBox/options-factories/schema.mjs

@@ -0,0 +1,251 @@
+"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 { toHeaderCase } from 'js-convert-case';
+import { getNameComponentsForLocator, getFullNameForLocator, getNameForLocator, getIconUriForLocator, isValidLocator, locatorToSteps, getSchemaByLocator, locatorToField, stepsToLocator, DataLocatorStepObjectProperty, DataLocatorStepArrayItem, getValueAtLocator } from '@integration-app/sdk';
+import { Fragment as Fragment$1 } from 'react';
+import { SegmentSeparator } from '../../Tag/SegmentSeparator.mjs';
+import { doesSchemaMatchValueType } from '../value-spec.mjs';
+import { getSchemaHint } from './index.mjs';
+import { ObjectFieldsOptionFactory } from './object-fields.mjs';
+import { ConstantOptionFactory } from './constant.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+
+class SchemaOptionFactory {
+  constructor(parameters) {
+    this.parameters = parameters;
+  }
+  async getOptions({ input, spec }) {
+    return this.getOptionsSync({ input, spec });
+  }
+  getOptionsSync({ input, spec }) {
+    const locator = this.parameters.locator ?? "$";
+    const showFullPath = !!input;
+    const options = getOptionsForSchema({
+      schema: this.parameters.schema,
+      locator: this.parameters.locator ?? [],
+      valueSpec: spec,
+      showIcons: !this.parameters.isSection,
+      skipNameComponentsPrefix: getNameComponentsForLocator(
+        this.parameters.schema,
+        locator
+      ),
+      ignorePrefix: !showFullPath,
+      nameComponentsByLocator: this.parameters.isSection ? getNameComponentsForLocator(this.parameters.schema, locator) : [],
+      exampleVariables: this.parameters.exampleVariables,
+      editableSchemaLocators: this.parameters.editableSchemaLocators
+    });
+    const filteredOptions = options.filter(
+      (o) => !input || (o.searchLabel ?? o.label?.toString())?.toLowerCase()?.includes(input.toLowerCase())
+    );
+    if (filteredOptions.length > 0) {
+      const result = filteredOptions;
+      if (this.parameters.isSection) {
+        result.unshift({
+          label: showFullPath ? getFullNameForLocator(this.parameters.schema, locator) : getNameForLocator(this.parameters.schema, locator),
+          isSection: true,
+          iconUri: getIconUriForLocator(this.parameters.schema, locator)
+        });
+      }
+      return result;
+    } else {
+      return [];
+    }
+  }
+}
+function getOptionsForSchema({
+  schema,
+  locator,
+  valueSpec,
+  showIcons = true,
+  skipNameComponentsPrefix = [],
+  ignorePrefix = false,
+  nameComponentsByLocator = null,
+  schemaByLocator = null,
+  exampleVariables = null,
+  expandObject = true,
+  editableSchemaLocators = []
+}) {
+  if (!isValidLocator(locator)) {
+    return [];
+  }
+  const locatorSteps = locatorToSteps(locator);
+  const options = [];
+  const optionsSchema = schemaByLocator ?? getSchemaByLocator(schema, locator);
+  if (!optionsSchema) {
+    return [];
+  }
+  let nameComponents = nameComponentsByLocator ?? getNameComponentsForLocator(schema, locator);
+  nameComponents = ignorePrefix ? nameComponents : nameComponents.filter(
+    // If skipNameComponentsPrefix is set, filter out its items from name components
+    (component, idx) => !(skipNameComponentsPrefix?.[idx] === component)
+  );
+  const isSchemaEditable = editableSchemaLocators.some(
+    (l) => locatorToField(stepsToLocator(locatorSteps)).startsWith(locatorToField(l))
+  );
+  const label = getLabelNodeFromNameComponents(nameComponents);
+  const textLabel = nameComponents?.length > 0 ? nameComponents.join(" ") : optionsSchema.title;
+  const searchLabel = nameComponents.join(" ");
+  const iconUri = showIcons ? getIconUriForLocator(schema, locator) : null;
+  if (optionsSchema.type == "object") {
+    const isInvisibleObject = optionsSchema.title === "";
+    if (expandObject || isInvisibleObject) {
+      const hideWholeObject = !optionsSchema.title && locator?.length === 0;
+      if (doesSchemaMatchValueType(optionsSchema, valueSpec) && !hideWholeObject) {
+        options.push({
+          label: label ?? textLabel,
+          searchLabel,
+          hint: "Whole Object",
+          value: {
+            $var: stepsToLocator(locatorToSteps(locator))
+          },
+          /* FIXME: strictNullCheck temporary fix */
+          // @ts-expect-error TS(2322): Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
+          iconUri
+        });
+      }
+      for (const key of Object.keys(optionsSchema.properties ?? {})) {
+        const propertySchema = optionsSchema.properties[key];
+        if (!propertySchema) {
+          continue;
+        }
+        const propertyLocator = [
+          ...locatorSteps,
+          new DataLocatorStepObjectProperty(key)
+        ];
+        const newNameComponents = [...nameComponents];
+        const newNameComponent = propertySchema.title ?? toHeaderCase(key);
+        if (newNameComponent) {
+          newNameComponents.push(newNameComponent);
+        }
+        options.push(
+          ...getOptionsForSchema({
+            schema,
+            locator: propertyLocator,
+            valueSpec,
+            showIcons,
+            skipNameComponentsPrefix,
+            ignorePrefix,
+            nameComponentsByLocator: newNameComponents,
+            schemaByLocator: propertySchema,
+            exampleVariables,
+            expandObject: false,
+            editableSchemaLocators
+          })
+        );
+      }
+      if (isSchemaEditable) {
+        options.push({
+          label: `Add${textLabel ? ` "${textLabel}"` : ""} Property`,
+          searchLabel: "",
+          hint: `Add property to this object`,
+          iconType: SvgIconType.Add,
+          addVariable: `${stepsToLocator(locatorSteps)}`,
+          isHighlighted: true
+        });
+      }
+    } else {
+      if (doesSchemaMatchValueType(optionsSchema, valueSpec, true) || isSchemaEditable) {
+        const propCount = Object.keys(optionsSchema.properties ?? {}).length;
+        options.push({
+          label,
+          searchLabel,
+          hint: propCount === 0 ? "Object" : `Object with ${propCount} ${propCount === 1 ? "property" : "properties"}`,
+          /* FIXME: strictNullCheck temporary fix */
+          // @ts-expect-error TS(2322): Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
+          iconUri,
+          drilldownOptionFactories: [
+            new ObjectFieldsOptionFactory({
+              name: textLabel,
+              schema,
+              locator,
+              exampleVariables,
+              isSection: true,
+              editableSchemaLocators
+            })
+          ]
+        });
+      }
+    }
+  } else if (optionsSchema.type == "array") {
+    if (doesSchemaMatchValueType(optionsSchema, valueSpec, true) || doesSchemaMatchValueType(optionsSchema.items, valueSpec, true)) {
+      const listOptions = [];
+      if (doesSchemaMatchValueType(optionsSchema, valueSpec)) {
+        listOptions.push({
+          label,
+          searchLabel,
+          hint: "Whole List",
+          value: {
+            $var: stepsToLocator(locatorToSteps(locator))
+          },
+          iconUri: iconUri || void 0
+        });
+      }
+      if (optionsSchema.items && doesSchemaMatchValueType(optionsSchema.items, valueSpec, true)) {
+        const firstArrayItemLocator = [
+          ...locatorSteps,
+          new DataLocatorStepArrayItem(0)
+        ];
+        listOptions.push(
+          ...getOptionsForSchema({
+            schema,
+            locator: firstArrayItemLocator,
+            valueSpec,
+            showIcons,
+            skipNameComponentsPrefix,
+            ignorePrefix,
+            nameComponentsByLocator: ["Item #1"],
+            schemaByLocator: optionsSchema.items,
+            exampleVariables,
+            expandObject,
+            editableSchemaLocators
+          })
+        );
+      }
+      options.push({
+        label,
+        searchLabel,
+        hint: "List",
+        /* FIXME: strictNullCheck temporary fix */
+        // @ts-expect-error TS(2322): Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
+        iconUri,
+        drilldownOptionFactories: [new ConstantOptionFactory(listOptions)]
+      });
+    }
+  } else {
+    if (doesSchemaMatchValueType(optionsSchema, valueSpec)) {
+      options.push({
+        label,
+        searchLabel,
+        hint: getValueAtLocator(exampleVariables, locator) ?? getSchemaHint(optionsSchema),
+        value: {
+          $var: stepsToLocator(locatorToSteps(locator))
+        },
+        /* FIXME: strictNullCheck temporary fix */
+        // @ts-expect-error TS(2322): Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message
+        iconUri
+      });
+    }
+  }
+  return options;
+}
+function getLabelNodeFromNameComponents(nameComponents) {
+  if (!nameComponents?.length) {
+    return null;
+  }
+  if (nameComponents.length === 1) {
+    return nameComponents[0];
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: nameComponents.map((name, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    idx ? /* @__PURE__ */ jsx(SegmentSeparator, {}) : null,
+    name
+  ] }, idx)) });
+}
+
+export { SchemaOptionFactory, getOptionsForSchema };

package/dist/esm/components/ComboBox/types.mjs

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+var ComboBoxTabType = /* @__PURE__ */ ((ComboBoxTabType2) => {
+  ComboBoxTabType2["VARIABLE"] = "variable";
+  ComboBoxTabType2["OPTIONS"] = "options";
+  ComboBoxTabType2["FORMULA"] = "formula";
+  ComboBoxTabType2["CUSTOM"] = "custom";
+  ComboBoxTabType2["LOOKUP_OPTIONS"] = "lookup_options";
+  ComboBoxTabType2["SELECT_FROM_COLLECTION_DYNAMICALLY"] = "select_from_collection_dynamically";
+  ComboBoxTabType2["SELECT_FROM_UDM_DYNAMICALLY"] = "select_from_udm_dynamically";
+  return ComboBoxTabType2;
+})(ComboBoxTabType || {});
+
+export { ComboBoxTabType };

package/dist/esm/components/ComboBox/value-spec.mjs

@@ -0,0 +1,105 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { schemaAllowsCustomValue, schemaIsScalar } from '@integration-app/sdk';
+
+var ValueType = /* @__PURE__ */ ((ValueType2) => {
+  ValueType2["STRING"] = "string";
+  ValueType2["DATE"] = "date";
+  ValueType2["DATETIME"] = "datetime";
+  ValueType2["TIME"] = "time";
+  ValueType2["NUMBER"] = "number";
+  ValueType2["BOOLEAN"] = "boolean";
+  ValueType2["ARRAY"] = "array";
+  ValueType2["OBJECT"] = "object";
+  ValueType2["ANY"] = "any";
+  ValueType2["CUSTOM"] = "custom";
+  return ValueType2;
+})(ValueType || {});
+function getValueSpecFromSchema(schema) {
+  if (typeof schema?.type !== "string") {
+    return { type: "any" /* ANY */, allowCustom: true };
+  }
+  switch (schema.type?.toLowerCase?.()) {
+    case "string":
+      if (schema.format?.toLowerCase() == "date") {
+        return {
+          type: "date" /* DATE */,
+          allowCustom: true
+        };
+      }
+      if (schema.format?.toLowerCase() == "date-time") {
+        return {
+          type: "datetime" /* DATETIME */,
+          allowCustom: true
+        };
+      }
+      if (schema.format?.toLowerCase() == "time") {
+        return {
+          type: "time" /* TIME */,
+          allowCustom: true
+        };
+      } else {
+        return {
+          type: "string" /* STRING */,
+          allowCustom: schemaAllowsCustomValue(schema)
+        };
+      }
+    case "object":
+      return { type: "object" /* OBJECT */ };
+    case "array":
+      return {
+        type: "array" /* ARRAY */,
+        allowCustom: true
+      };
+    case "number":
+    case "integer":
+      return {
+        type: "number" /* NUMBER */,
+        allowCustom: schemaAllowsCustomValue(schema)
+      };
+    case "boolean":
+      return { type: "boolean" /* BOOLEAN */ };
+    default:
+      return { type: "any" /* ANY */, allowCustom: true };
+  }
+}
+function doesSchemaMatchValueType(schema, valueSpec, deep = false) {
+  if (!valueSpec?.type || valueSpec.type === "any" /* ANY */) {
+    return true;
+  }
+  if (!schema?.type) {
+    return true;
+  }
+  if (schema.type == "null") {
+    return false;
+  }
+  if (schema.type == valueSpec.type) {
+    return true;
+  }
+  if (schemaIsScalar(schema)) {
+    if (valueSpec.type != "array" /* ARRAY */ && valueSpec.type != "object" /* OBJECT */) {
+      return true;
+    }
+    return false;
+  }
+  if (deep) {
+    if (schema.type === "object" && schema.properties) {
+      return Object.values(schema.properties).some(
+        (prop) => doesSchemaMatchValueType(prop, valueSpec, true)
+      );
+    }
+    if (schema.type === "array" && schema.items) {
+      return doesSchemaMatchValueType(schema.items, valueSpec, true);
+    }
+    return false;
+  }
+  return false;
+}
+
+export { ValueType, doesSchemaMatchValueType, getValueSpecFromSchema };