@membranehq/react 0.1.0

package/dist/cjs/components/ComboBox/options-factories/generate-schema-options.cjs

@@ -0,0 +1,204 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/sdk');
+var jsConvertCase = require('js-convert-case');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var shared = require('../shared.cjs');
+var valueSpec = require('../value-spec.cjs');
+var constant = require('./constant.cjs');
+var objectFields = require('./object-fields.cjs');
+var NestedBadgeValue = require('../Badges/EditorTagBadge/NestedBadgeValue.cjs');
+
+function getOptionsForSchema({
+  schema,
+  locator,
+  valueSpec: valueSpec$1,
+  showIcons = true,
+  skipNameComponentsPrefix = [],
+  ignorePrefix = false,
+  nameComponentsByLocator = null,
+  schemaByLocator = null,
+  exampleVariables = null,
+  expandObject = true,
+  editableSchemaLocators = []
+}) {
+  if (!sdk.isValidLocator(locator)) {
+    return [];
+  }
+  const locatorSteps = sdk.locatorToSteps(locator);
+  const options = [];
+  const optionsSchema = schemaByLocator ?? sdk.getSchemaByLocator(schema, locator);
+  if (!optionsSchema) {
+    return [];
+  }
+  let nameComponents = nameComponentsByLocator ?? sdk.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) => sdk.locatorToField(sdk.stepsToLocator(locatorSteps)).startsWith(sdk.locatorToField(l))
+  );
+  const label = getLabelNodeFromNameComponents(nameComponents);
+  const textLabel = nameComponents?.length > 0 ? nameComponents.join(" ") : optionsSchema.title;
+  const searchLabel = nameComponents.join(" ");
+  const iconUri = showIcons ? sdk.getIconUriForLocator(schema, locator) : null;
+  const iconType = !iconUri ? svgIconType.SvgIconType.ListOption : void 0;
+  if (optionsSchema.type == "object") {
+    const isInvisibleObject = optionsSchema.title === "";
+    if (expandObject || isInvisibleObject) {
+      const hideWholeObject = !optionsSchema.title && locator?.length === 0;
+      if (valueSpec.doesSchemaMatchValueType(optionsSchema, valueSpec$1) && !hideWholeObject) {
+        options.push({
+          label: label ?? textLabel,
+          searchLabel,
+          value: {
+            $var: sdk.stepsToLocator(sdk.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,
+          iconType
+        });
+      }
+      for (const key of Object.keys(optionsSchema.properties ?? {})) {
+        const propertySchema = optionsSchema.properties[key];
+        if (!propertySchema) {
+          continue;
+        }
+        const propertyLocator = [...locatorSteps, new sdk.DataLocatorStepObjectProperty(key)];
+        const newNameComponents = [...nameComponents];
+        const newNameComponent = propertySchema.title ?? jsConvertCase.toHeaderCase(key);
+        if (newNameComponent) {
+          newNameComponents.push(newNameComponent);
+        }
+        options.push(
+          ...getOptionsForSchema({
+            schema,
+            locator: propertyLocator,
+            valueSpec: valueSpec$1,
+            showIcons,
+            skipNameComponentsPrefix,
+            ignorePrefix,
+            nameComponentsByLocator: newNameComponents,
+            schemaByLocator: propertySchema,
+            exampleVariables,
+            expandObject: false,
+            editableSchemaLocators
+          })
+        );
+      }
+      if (isSchemaEditable) {
+        options.push({
+          label: `Add${textLabel ? ` "${textLabel}"` : ""} Property`,
+          searchLabel: "",
+          iconType: svgIconType.SvgIconType.Add,
+          addVariable: `${sdk.stepsToLocator(locatorSteps)}`
+        });
+      }
+    } else {
+      if (valueSpec.doesSchemaMatchValueType(optionsSchema, valueSpec$1, true) || isSchemaEditable) {
+        const propCount = Object.keys(optionsSchema.properties ?? {}).length;
+        options.push({
+          label,
+          searchLabel,
+          childrenCount: propCount > 0 ? propCount : void 0,
+          /* 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,
+          iconType,
+          drillDownOptionFactory: new objectFields.ObjectFieldsOptionFactory({
+            name: textLabel,
+            schema,
+            locator,
+            exampleVariables,
+            isSection: true,
+            editableSchemaLocators
+          }),
+          childCategory: shared.DropdownCategoryType.VARIABLE
+        });
+      }
+    }
+  } else if (optionsSchema.type == "array") {
+    if (valueSpec.doesSchemaMatchValueType(optionsSchema, valueSpec$1, true) || valueSpec.doesSchemaMatchValueType(optionsSchema.items, valueSpec$1, true)) {
+      const listOptions = [];
+      if (valueSpec.doesSchemaMatchValueType(optionsSchema, valueSpec$1)) {
+        listOptions.push({
+          label,
+          searchLabel,
+          value: {
+            $var: sdk.stepsToLocator(sdk.locatorToSteps(locator))
+          },
+          iconType,
+          iconUri: iconUri || void 0
+        });
+      }
+      if (optionsSchema.items && valueSpec.doesSchemaMatchValueType(optionsSchema.items, valueSpec$1, true)) {
+        const firstArrayItemLocator = [...locatorSteps, new sdk.DataLocatorStepArrayItem(0)];
+        listOptions.push(
+          ...getOptionsForSchema({
+            schema,
+            locator: firstArrayItemLocator,
+            valueSpec: valueSpec$1,
+            showIcons,
+            skipNameComponentsPrefix,
+            ignorePrefix,
+            nameComponentsByLocator: ["Item #1"],
+            schemaByLocator: optionsSchema.items,
+            exampleVariables,
+            expandObject,
+            editableSchemaLocators
+          })
+        );
+      }
+      options.push({
+        label,
+        searchLabel,
+        /* 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,
+        iconType,
+        drillDownOptionFactory: new constant.ConstantOptionFactory(listOptions)
+      });
+    }
+  } else {
+    if (valueSpec.doesSchemaMatchValueType(optionsSchema, valueSpec$1)) {
+      options.push({
+        label,
+        searchLabel,
+        value: {
+          $var: sdk.stepsToLocator(sdk.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,
+        iconType
+      });
+    }
+  }
+  return options;
+}
+function getLabelNodeFromNameComponents(nameComponents) {
+  if (!nameComponents?.length) {
+    return null;
+  }
+  if (nameComponents.length === 1) {
+    return nameComponents[0];
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nameComponents.map((name, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    idx ? /* @__PURE__ */ jsxRuntime.jsx(NestedBadgeValue.ValueNestingIcon, {}) : null,
+    name
+  ] }, idx)) });
+}
+
+exports.getOptionsForSchema = getOptionsForSchema;

package/dist/cjs/components/ComboBox/options-factories/object-fields.cjs

@@ -0,0 +1,96 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/sdk');
+var jsConvertCase = require('js-convert-case');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var generateSchemaOptions = require('./generate-schema-options.cjs');
+var utils = require('./utils.cjs');
+var valueSpec = require('../value-spec.cjs');
+
+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 (!sdk.isValidLocator(locator)) {
+      return [];
+    }
+    const locatorSteps = sdk.locatorToSteps(locator);
+    const objectSchema = sdk.getSchemaByLocator(this.parameters.schema, locator);
+    if (objectSchema?.type !== "object") {
+      return [];
+    }
+    const isSchemaEditable = this.parameters.editableSchemaLocators?.some(
+      (l) => sdk.locatorToField(sdk.stepsToLocator(locatorSteps)).startsWith(sdk.locatorToField(l))
+    );
+    const showFullName = !!input;
+    const options = [];
+    if (valueSpec.doesSchemaMatchValueType(objectSchema, spec) && locator && locator !== "$") {
+      options.push({
+        label: "Whole Object",
+        value: {
+          $var: sdk.stepsToLocator(sdk.locatorToSteps(locator))
+        },
+        iconType: svgIconType.SvgIconType.SchemaType_object
+      });
+    }
+    for (const [fieldKey, fieldSchema] of Object.entries(objectSchema.properties || {})) {
+      const propertyLocator = [...locatorSteps, new sdk.DataLocatorStepObjectProperty(fieldKey)];
+      const objectNameComponents = sdk.getNameComponentsForLocator(this.parameters.schema, locator);
+      options.push(
+        ...generateSchemaOptions.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 ?? jsConvertCase.toHeaderCase(fieldKey)
+          ],
+          expandObject: false
+        })
+      );
+    }
+    if (isSchemaEditable) {
+      options.push({
+        label: `New${this.parameters?.name ? ` "${this.parameters.name}"` : ""} property`,
+        searchLabel: "",
+        iconType: svgIconType.SvgIconType.Add,
+        addVariable: `${sdk.stepsToLocator(locatorSteps)}`
+      });
+    }
+    const filteredOptions = utils.filterOptionsByLabel(options, input);
+    if (filteredOptions.length > 0) {
+      const result = filteredOptions;
+      if (this.parameters.isSection) {
+        result.unshift({
+          label: showFullName ? sdk.getFullNameForLocator(this.parameters.schema, locator) : sdk.getNameForLocator(this.parameters.schema, locator),
+          isSection: true,
+          iconUri: sdk.getIconUriForLocator(this.parameters.schema, locator)
+        });
+      }
+      return result;
+    } else {
+      return [];
+    }
+  }
+}
+
+exports.ObjectFieldsOptionFactory = ObjectFieldsOptionFactory;

package/dist/cjs/components/ComboBox/options-factories/reference-records.cjs

@@ -0,0 +1,50 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+var utils = require('./utils.cjs');
+
+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,
+            iconType: svgIconType.SvgIconType.ListOption
+          });
+        }
+      });
+    }
+    const filteredOptions = utils.filterOptionsByLabel(options, input);
+    if (filteredOptions.length > 0) {
+      return [
+        {
+          label: "Possible Values",
+          isSection: true,
+          iconUri: this.params.iconUri
+        },
+        ...filteredOptions
+      ];
+    } else {
+      return [];
+    }
+  }
+}
+
+exports.ReferenceRecordsOptionsFactory = ReferenceRecordsOptionsFactory;

package/dist/cjs/components/ComboBox/options-factories/root.cjs

@@ -0,0 +1,100 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var shared = require('../shared.cjs');
+var index = require('./custom-field/index.cjs');
+var index$1 = require('./formula/index.cjs');
+var utils = require('./utils.cjs');
+var variable = require('./variable.cjs');
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+const EXCLUDED_CATEGORIES = [shared.DropdownCategoryType.OPTIONS, shared.DropdownCategoryType.LOOKUP_OPTIONS];
+class RootOptionFactory {
+  constructor(categories) {
+    __publicField(this, "categories");
+    if (!categories && categories === null) {
+      this.categories = [];
+    } else {
+      this.categories = categories;
+    }
+  }
+  async getOptions({
+    input,
+    spec,
+    variablesSchema,
+    editableVariablesSchemaLocators
+  }) {
+    if (this.categories.length === 1) {
+      const [category] = this.categories;
+      const childCategoryFactory = this.getChildFactoryForCategory({
+        category,
+        schema: variablesSchema,
+        editableSchemaLocators: editableVariablesSchemaLocators
+      });
+      if (childCategoryFactory) {
+        return childCategoryFactory?.getOptions({
+          input,
+          spec,
+          variablesSchema,
+          editableVariablesSchemaLocators
+        });
+      }
+    }
+    return this.getOptionsSync({
+      input,
+      spec,
+      variablesSchema,
+      editableVariablesSchemaLocators
+    });
+  }
+  getOptionsSync({ input, variablesSchema, editableVariablesSchemaLocators }) {
+    const options = [];
+    if (input) {
+      return options;
+    }
+    this.categories?.filter((category) => !EXCLUDED_CATEGORIES.includes(category))?.map((category) => {
+      const factory = this.getChildFactoryForCategory({
+        category,
+        schema: variablesSchema,
+        editableSchemaLocators: editableVariablesSchemaLocators
+      });
+      options.push({
+        label: shared.dropdownCategoryConfig[category].title,
+        iconType: shared.dropdownCategoryConfig[category].icon,
+        drillDownOptionFactory: factory,
+        childCategory: category
+      });
+    });
+    return utils.filterOptionsByLabel(options, input);
+  }
+  getChildFactoryForCategory({
+    category,
+    schema,
+    editableSchemaLocators
+  }) {
+    switch (category) {
+      case shared.DropdownCategoryType.VARIABLE:
+        return new variable.VariableOptionFactory({
+          schema,
+          editableSchemaLocators
+        });
+      case shared.DropdownCategoryType.FORMULA:
+        return new index$1.FormulaListOptionsFactory();
+      case shared.DropdownCategoryType.CUSTOM:
+        return new index.CustomFieldOptionsFactory();
+      default:
+        return void 0;
+    }
+  }
+}
+
+exports.RootOptionFactory = RootOptionFactory;

package/dist/cjs/components/ComboBox/options-factories/utils.cjs

@@ -0,0 +1,25 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var Fuse = require('fuse');
+
+function filterOptionsByLabel(options, searchString, fuzzy = true, additionalKeys = []) {
+  if (!searchString || typeof searchString !== "string") {
+    return options;
+  }
+  return new Fuse(options, {
+    shouldSort: true,
+    keys: ["searchLabel", "label", ...additionalKeys],
+    threshold: fuzzy ? 0.3 : 0
+    // 0 = exact match, 1 = match all
+  }).search(searchString.trim()).map(({ item }) => item);
+}
+
+exports.filterOptionsByLabel = filterOptionsByLabel;

package/dist/cjs/components/ComboBox/options-factories/variable.cjs

@@ -0,0 +1,59 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/sdk');
+var shared = require('../shared.cjs');
+var generateSchemaOptions = require('./generate-schema-options.cjs');
+
+class VariableOptionFactory {
+  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 = generateSchemaOptions.getOptionsForSchema({
+      schema: this.parameters.schema,
+      locator: this.parameters.locator ?? [],
+      valueSpec: spec,
+      showIcons: !this.parameters.isSection,
+      skipNameComponentsPrefix: sdk.getNameComponentsForLocator(this.parameters.schema, locator),
+      ignorePrefix: !showFullPath,
+      nameComponentsByLocator: this.parameters.isSection ? sdk.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 ? sdk.getFullNameForLocator(this.parameters.schema, locator) : sdk.getNameForLocator(this.parameters.schema, locator),
+          isSection: true,
+          iconUri: sdk.getIconUriForLocator(this.parameters.schema, locator)
+        });
+      }
+      result.unshift({
+        label: shared.dropdownCategoryConfig[shared.DropdownCategoryType.VARIABLE].title,
+        isSection: true
+      });
+      return result;
+    } else {
+      return [];
+    }
+  }
+}
+
+exports.VariableOptionFactory = VariableOptionFactory;

package/dist/cjs/components/ComboBox/shared.cjs

@@ -0,0 +1,64 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+
+var DropdownCategoryType = /* @__PURE__ */ ((DropdownCategoryType2) => {
+  DropdownCategoryType2["ROOT"] = "root";
+  DropdownCategoryType2["VARIABLE"] = "variable";
+  DropdownCategoryType2["OPTIONS"] = "options";
+  DropdownCategoryType2["FORMULA"] = "formula";
+  DropdownCategoryType2["FORMULA_CONFIG"] = "formula_config";
+  DropdownCategoryType2["CUSTOM"] = "custom";
+  DropdownCategoryType2["LOOKUP_OPTIONS"] = "lookup_options";
+  DropdownCategoryType2["SELECT_FROM_UDM_DYNAMICALLY"] = "select_from_udm_dynamically";
+  return DropdownCategoryType2;
+})(DropdownCategoryType || {});
+const dropdownCategoryConfig = {
+  ["root" /* ROOT */]: {
+    title: "Root",
+    hideSearchInput: false
+  },
+  ["custom" /* CUSTOM */]: {
+    title: "Custom Value",
+    icon: svgIconType.SvgIconType.SchemaType_object,
+    hideSearchInput: true
+  },
+  ["variable" /* VARIABLE */]: {
+    title: "Variables",
+    icon: svgIconType.SvgIconType.Variable
+  },
+  ["options" /* OPTIONS */]: {
+    title: "Option"
+  },
+  ["formula" /* FORMULA */]: {
+    title: "Formulas",
+    icon: svgIconType.SvgIconType.Function,
+    hideSearchInput: false
+  },
+  ["formula_config" /* FORMULA_CONFIG */]: {
+    title: "Formulas",
+    icon: svgIconType.SvgIconType.Function,
+    hideSearchInput: true
+  },
+  ["lookup_options" /* LOOKUP_OPTIONS */]: {
+    title: "Lookup Options",
+    hideSearchInput: false
+  },
+  ["select_from_udm_dynamically" /* SELECT_FROM_UDM_DYNAMICALLY */]: {
+    title: "Select Dynamically",
+    hideSearchInput: true,
+    hasConfigUI: true,
+    icon: svgIconType.SvgIconType.Search
+  }
+};
+
+exports.DropdownCategoryType = DropdownCategoryType;
+exports.dropdownCategoryConfig = dropdownCategoryConfig;