@membranehq/react 0.1.0

package/dist/cjs/components/DataBuilder/data-field.cjs

@@ -0,0 +1,290 @@
+"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');
+
+function getFieldSchemaOptions(field) {
+  if (field?.schema?.type) {
+    if (Array.isArray(field.schema.type)) {
+      return field.schema.type.map((type) => ({ type }));
+    } else {
+      return [field.schema];
+    }
+  } else if (Array.isArray(field?.schema?.anyOf)) {
+    const options = [];
+    for (const anyOfSchema of field?.schema?.anyOf ?? []) {
+      options.push(...getFieldSchemaOptions({ ...field, schema: anyOfSchema }));
+    }
+    return options;
+  } else {
+    return [
+      {
+        type: "string"
+      },
+      {
+        type: "number"
+      },
+      {
+        type: "boolean"
+      },
+      {
+        type: "object"
+      },
+      {
+        type: "array"
+      }
+    ];
+  }
+}
+const DEFAULT_FALLBACK_SCHEMA = { type: "string" };
+function getFieldSchemaFromValue(field) {
+  if (!field?.value) {
+    return void 0;
+  }
+  const options = getFieldSchemaOptions(field);
+  const schemaFromValue2 = sdk.getSchemaFromValue(field.value, field.variablesSchema);
+  const option = options.find((o) => o.type === schemaFromValue2?.type);
+  return option ?? options?.[0] ?? schemaFromValue2;
+}
+function getDefaultFieldSchemaOption(field) {
+  if (field?.value) {
+    return getFieldSchemaFromValue(field);
+  }
+  const options = getFieldSchemaOptions(field);
+  return options?.[0] ?? DEFAULT_FALLBACK_SCHEMA;
+}
+function schemaFromValue(value, variablesSchema) {
+  const schemaType = schemaTypeFromValue(value, variablesSchema);
+  return schemaType ? { type: schemaType } : {};
+}
+function schemaTypeFromValue(value, variablesSchema) {
+  if (sdk.isFormula(value)) {
+    const formula = sdk.getFormula(value);
+    if (formula.type === sdk.DataBuilderFormulaType.VAR) {
+      const schema = sdk.getSchemaByLocator(variablesSchema, formula.locator);
+      return schema?.type ?? "string";
+    } else if (formula.type == sdk.DataBuilderFormulaType.PLAIN) {
+      return schemaTypeFromValue(formula.value);
+    } else {
+      return "string";
+    }
+  } else {
+    switch (typeof value) {
+      case "object":
+        if (Array.isArray(value)) {
+          return "array";
+        } else {
+          return "object";
+        }
+      case "boolean":
+        return "boolean";
+      case "bigint":
+      case "number":
+        return "number";
+      default:
+        return "string";
+    }
+  }
+}
+function extractFieldSubFields(field) {
+  let subfields = [];
+  const schema = getDefaultFieldSchemaOption(field);
+  if (!schema?.type) {
+    subfields = getSubfieldsFromValue(field);
+  } else if (schema?.type === "object") {
+    const subfieldsFromObjectSchema = getSubfieldsFromObjectSchema(field);
+    const subfieldsFromValue = getSubfieldsFromValue(field);
+    subfields = mergeSubfieldsFromObjectSchemaAndValues(subfieldsFromObjectSchema, subfieldsFromValue);
+    subfields = subfields.length > 0 ? [...subfields.slice(0, -1), { ...subfields.slice(-1)[0], isLastChild: true }] : subfields;
+  } else if (schema?.type === "array") {
+    if (Array.isArray(field.value)) {
+      subfields = getSubfieldsFromValue(field);
+    }
+  }
+  return subfields;
+}
+function mergeSubfieldsFromObjectSchemaAndValues(subfieldsFromObjectSchema, subfieldsFromValue) {
+  function getSubfieldKey(field) {
+    return field.key ?? "root";
+  }
+  if (subfieldsFromValue.length === 0) {
+    return subfieldsFromObjectSchema;
+  }
+  const subfieldMap = /* @__PURE__ */ new Map();
+  subfieldsFromObjectSchema.forEach((field) => {
+    subfieldMap.set(getSubfieldKey(field), field);
+  });
+  subfieldsFromValue.forEach((field) => {
+    const fieldKey = getSubfieldKey(field);
+    const primaryField = subfieldMap.get(fieldKey);
+    if (primaryField) {
+      subfieldMap.set(fieldKey, { ...primaryField, value: field.value });
+    } else {
+      subfieldMap.set(fieldKey, field);
+    }
+  });
+  return Object.values(Object.fromEntries(subfieldMap.entries()));
+}
+function makeSubField(field, overrides) {
+  const childFieldData = {
+    key: overrides?.key,
+    schema: overrides?.schema,
+    level: field.level + 1,
+    // default behavior
+    optionFactories: field.optionFactories,
+    variablesSchema: field.variablesSchema,
+    exampleVariables: field.exampleVariables,
+    iconUri: field.iconUri,
+    dynamicSchema: field.dynamicSchema,
+    dynamicSchemaVariables: field.dynamicSchemaVariables
+  };
+  if (overrides) {
+    Object.entries(overrides).forEach(([key, value]) => {
+      childFieldData[key] = value;
+    });
+  }
+  childFieldData.subFields = extractFieldSubFields(childFieldData);
+  return childFieldData;
+}
+function getSubfieldsFromObjectSchema(field) {
+  const fields = [];
+  const schema = getDefaultFieldSchemaOption(field);
+  if (schema?.properties) {
+    Object.entries(schema.properties).forEach(([key, value]) => {
+      const isRequired = schema.required && schema.required.includes(key);
+      fields.push(
+        makeSubField(field, {
+          key,
+          valueLocator: sdk.makeObjectPropertyLocator(field.valueLocator, key),
+          isRequired,
+          isDeletable: !isRequired,
+          isInSchema: !value?.isImplied,
+          hasSiblings: countObjectFieldProperties(field) > 1,
+          schema: value,
+          value: field.value ? field.value[key] : void 0,
+          level: getLevelForNestedFields(field)
+        })
+      );
+    });
+  }
+  return fields;
+}
+function fieldLabel(field) {
+  return field.schema?.title ?? jsConvertCase.toHeaderCase(field.key ?? "");
+}
+function getSubfieldsFromValue(field) {
+  const fields = [];
+  if (Array.isArray(field.value)) {
+    return field.value.map((item, idx) => {
+      const dynamicSchemaVariables = structuredClone(field.dynamicSchemaVariables);
+      const valueLocatorForDynamicSchema = field?.valueLocator?.replace(/\[\d+\]/g, "") ?? "";
+      sdk.setValueAtLocator(dynamicSchemaVariables, valueLocatorForDynamicSchema, item);
+      const currentEvaluatedSchema = sdk.buildData(field.dynamicSchema, sdk.buildData(dynamicSchemaVariables));
+      const valueLocator = `${field.valueLocator}[${idx}]`;
+      const schema = sdk.getSchemaByLocator(currentEvaluatedSchema, valueLocator);
+      return makeSubField(field, {
+        key: `item_${idx + 1}`,
+        valueLocator,
+        isInSchema: !schema?.isImplied,
+        hasSiblings: field.value.length > 0,
+        isLastChild: idx === field.value.length,
+        schema,
+        value: item,
+        isDeletable: true,
+        dynamicSchemaVariables
+      });
+    });
+  } else if (typeof field.value == "object" && field.value !== null && !sdk.isFormula(field.value)) {
+    Object.entries(field.value).forEach(([key, value]) => {
+      if (value === void 0) {
+        return;
+      }
+      if (!field.schema || !field.schema.properties || !(key in field.schema.properties)) {
+        fields.push(
+          /* FIXME: strictNullCheck temporary fix */
+          // @ts-expect-error TS(2345): Argument of type 'IDataBuilderField' is not assign... Remove this comment to see the full error message
+          makeSubField(field, {
+            key,
+            valueLocator: `${field.valueLocator}.${key}`,
+            isRequired: false,
+            hasSiblings: countObjectFieldProperties(field) > 1,
+            isInSchema: false,
+            isDeletable: true,
+            schema: void 0,
+            value,
+            level: getLevelForNestedFields(field)
+          })
+        );
+      }
+    });
+  }
+  return fields;
+}
+function isFieldVisible(field) {
+  if (field.schema?.type === "object" || field.schema?.type === "array") {
+    if ((field.isInSchema || field.level === 1) && !field.schema?.title && !field.hasSiblings && !field.key) {
+      return false;
+    }
+  }
+  return true;
+}
+function countObjectFieldProperties(field) {
+  const fieldKeys = [];
+  if (typeof field.value === "object" && field.value !== null) {
+    fieldKeys.push(...Object.keys(field.value));
+  }
+  if (field.schema && field.schema.properties) {
+    fieldKeys.push(...Object.keys(field.schema.properties ?? {}));
+  }
+  return new Set(fieldKeys).size;
+}
+function getLevelForNestedFields(field) {
+  return isFieldVisible(field) ? field.level + 1 : field.level;
+}
+function isObjectAllowedAdditionalProperties(field) {
+  if (field.schema?.type !== "object") {
+    return true;
+  }
+  if (Object.keys(field.schema.properties ?? {}).length === 0) {
+    return true;
+  }
+  return !!field.schema?.additionalProperties;
+}
+function getFieldValueProps(field) {
+  const isEmpty = field.value === null || field.value === void 0;
+  const isRequired = field.isRequired;
+  return {
+    isEmpty,
+    isRequired
+  };
+}
+function schemaIsScalarArray(schema) {
+  return schema?.type === "array" && schema.items && sdk.schemaIsScalar(schema.items);
+}
+function isRootField(field) {
+  return field.level === 1 && !isFieldVisible(field);
+}
+const DEFAULT_FIELD_KEY = "";
+
+exports.DEFAULT_FIELD_KEY = DEFAULT_FIELD_KEY;
+exports.extractFieldSubFields = extractFieldSubFields;
+exports.fieldLabel = fieldLabel;
+exports.getDefaultFieldSchemaOption = getDefaultFieldSchemaOption;
+exports.getFieldSchemaFromValue = getFieldSchemaFromValue;
+exports.getFieldSchemaOptions = getFieldSchemaOptions;
+exports.getFieldValueProps = getFieldValueProps;
+exports.getLevelForNestedFields = getLevelForNestedFields;
+exports.isFieldVisible = isFieldVisible;
+exports.isObjectAllowedAdditionalProperties = isObjectAllowedAdditionalProperties;
+exports.isRootField = isRootField;
+exports.makeSubField = makeSubField;
+exports.schemaFromValue = schemaFromValue;
+exports.schemaIsScalarArray = schemaIsScalarArray;

package/dist/cjs/components/DataBuilder/field-context.cjs

@@ -0,0 +1,83 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dataField = require('./data-field.cjs');
+
+function useDataBuilderField() {
+  return React.useContext(DataBuilderFieldContext);
+}
+const DataBuilderFieldContext = React.createContext({
+  field: { level: 0, optionFactories: [] },
+  localSchema: {},
+  setLocalSchema: () => {
+  },
+  resetLocalSchema: () => {
+  },
+  localSchemaChangedManually: false,
+  setLocalSchemaChangedManually: () => {
+  },
+  autoOpen: false,
+  setAutoOpen: () => {
+  }
+});
+DataBuilderFieldContext.displayName = "DataBuilderFieldContext";
+const DataBuilderFieldProvider = ({ field, children }) => {
+  const [localSchema, setLocalSchema] = React.useState(getDefaultLocalSchema(field));
+  function resetLocalSchema() {
+    setLocalSchema(getDefaultLocalSchema(field));
+  }
+  const [localSchemaChangedManually, setLocalSchemaChangedManually] = React.useState(false);
+  const [autoOpen, setAutoOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataBuilderFieldContext.Provider,
+    {
+      value: {
+        field,
+        localSchema,
+        setLocalSchema,
+        resetLocalSchema,
+        localSchemaChangedManually,
+        setLocalSchemaChangedManually,
+        autoOpen,
+        setAutoOpen
+      },
+      children
+    }
+  );
+};
+function getDefaultLocalSchema(field) {
+  const fieldSchemaFromValue = dataField.getFieldSchemaFromValue(field);
+  const fieldSchemaOptions = dataField.getFieldSchemaOptions(field);
+  if (field?.schema) {
+    if (!field?.schema?.type) {
+      return fieldSchemaFromValue || {
+        ...field.schema,
+        type: fieldSchemaOptions[0].type
+      };
+    }
+    if (Array.isArray(field.schema.type)) {
+      return fieldSchemaFromValue || {
+        ...field.schema,
+        type: field.schema.type[0]
+      };
+    }
+    return field.schema;
+  }
+  return fieldSchemaFromValue || {
+    type: fieldSchemaOptions[0].type
+  };
+}
+
+exports.DataBuilderFieldProvider = DataBuilderFieldProvider;
+exports.default = useDataBuilderField;

package/dist/cjs/components/DataBuilder/hooks.cjs

@@ -0,0 +1,37 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var dataBuilderContext = require('./data-builder-context.cjs');
+var fieldContext = require('./field-context.cjs');
+var valueSpec = require('../ComboBox/value-spec.cjs');
+
+function useDataBuilderFieldCanUseVarFromVariables() {
+  const { field, localSchema } = fieldContext.default();
+  const localSchemaIsArrayOrObject = ["array", "object"].includes(localSchema?.type || "");
+  if (!localSchemaIsArrayOrObject) {
+    return false;
+  }
+  const valueSpec$1 = valueSpec.getValueSpecFromSchema(localSchema);
+  const hasMatchedVariables = Object.values(field?.variablesSchema?.properties ?? {}).some(
+    (schema) => valueSpec.doesSchemaMatchValueType(schema, valueSpec$1, true)
+  );
+  const hasOptionFactories = (field?.optionFactories ?? []).length > 0;
+  return hasMatchedVariables || hasOptionFactories;
+}
+function usIsFieldFrozen() {
+  const { frozenFieldsLocators = [] } = dataBuilderContext.default();
+  const { field } = fieldContext.default();
+  return frozenFieldsLocators.some(
+    (frozenFieldLocator) => frozenFieldLocator && field?.valueLocator === frozenFieldLocator
+  );
+}
+
+exports.usIsFieldFrozen = usIsFieldFrozen;
+exports.useDataBuilderFieldCanUseVarFromVariables = useDataBuilderFieldCanUseVarFromVariables;

package/dist/cjs/components/DataBuilder/index.cjs

@@ -0,0 +1,72 @@
+"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 dataField = require('./data-field.cjs');
+require('react/jsx-runtime');
+require('../../ui-kit/styled/text.cjs');
+require('../Tooltip/index.cjs');
+
+function makeDataField({
+  key = void 0,
+  schema: inputSchema,
+  value,
+  optionFactories,
+  variablesSchema,
+  exampleVariables,
+  iconUri,
+  valueLocator,
+  level = 1,
+  resolveDynamicSchema = true
+}) {
+  let schema = inputSchema;
+  if (resolveDynamicSchema) {
+    schema = sdk.buildData(inputSchema, sdk.buildData(value));
+  }
+  schema = addAdditionalPropertiesPropertyToNestedObjects(schema);
+  const field = {
+    key,
+    valueLocator: valueLocator ?? schema?.locator ?? "$",
+    schema,
+    level,
+    isInSchema: !schema?.isImplied,
+    hasSiblings: false,
+    variablesSchema,
+    exampleVariables,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2322): Type 'ComboBoxOptionsFactory[] | undefined' is no... Remove this comment to see the full error message
+    optionFactories,
+    value,
+    iconUri,
+    dynamicSchema: inputSchema,
+    dynamicSchemaVariables: value
+  };
+  field.subFields = dataField.extractFieldSubFields(field);
+  return field;
+}
+function addAdditionalPropertiesPropertyToNestedObjects(schema) {
+  if (schema?.type !== "object") {
+    return schema;
+  }
+  const isAdditionalPropertiesAllowed = schema?.additionalProperties ?? dataField.isObjectAllowedAdditionalProperties({
+    schema
+  });
+  const additionalPropertiesObject = isAdditionalPropertiesAllowed ? { additionalProperties: true } : {};
+  return {
+    ...schema,
+    ...additionalPropertiesObject,
+    // Iterate over all properties and calculate `additionalProperties` flag for them
+    properties: Object.fromEntries(
+      Object.entries(schema?.properties ?? {}).map(([k, v]) => [k, addAdditionalPropertiesPropertyToNestedObjects(v)])
+    )
+  };
+}
+
+exports.makeDataField = makeDataField;

package/dist/cjs/components/DataBuilderUI/ActionBar.cjs

@@ -0,0 +1,93 @@
+"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 clsx = require('clsx');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var useEventStopPropagation = require('../../helpers/hooks/useEventStopPropagation.cjs');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+var index$1 = require('../SvgIcon/index.cjs');
+var index = require('../Tooltip/index.cjs');
+
+const dataBuilderActionBarRecipe = sva.sva({
+  className: "data-builder-action-bar",
+  slots: ["root", "button"],
+  base: {
+    root: {
+      display: "flex",
+      flexDir: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      w: "5",
+      ml: "-0.5",
+      mr: "-2.5"
+    },
+    button: {
+      display: "flex",
+      flexShrink: "0",
+      flexGrow: "0",
+      justifyContent: "center",
+      alignItems: "center",
+      w: "5",
+      h: "5",
+      border: "1px",
+      borderStyle: "solid",
+      borderColor: "gray.6",
+      bg: "slate.2",
+      color: "slate.10",
+      _hover: {
+        bg: "slate.4"
+      },
+      "& > svg": {
+        w: "3",
+        h: "3",
+        strokeWidth: "2"
+      }
+    }
+  }
+});
+const ActionBarRoot = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const styles = dataBuilderActionBarRecipe();
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(styles.root, className), ...props, ref, children });
+  }
+);
+ActionBarRoot.displayName = "ActionBarRoot";
+const ActionBarDeleteButton = React.forwardRef(
+  ({ className, onClick, ...props }, ref) => {
+    const styles = dataBuilderActionBarRecipe();
+    const handleOnClick = useEventStopPropagation.default(
+      (e) => onClick?.(e)
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip: "Delete", className: styles.root, usePortal: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx.clsx(styles["button"], className),
+        onClick: handleOnClick,
+        "aria-label": "Delete",
+        ...props,
+        ref,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: svgIconType.SvgIconType.Close })
+      }
+    ) });
+  }
+);
+ActionBarDeleteButton.displayName = "ActionBarDeleteButton";
+const ActionBar = Object.assign(ActionBarRoot, {
+  DeleteButton: ActionBarDeleteButton
+});
+
+exports.ActionBar = ActionBar;
+exports.dataBuilderActionBarRecipe = dataBuilderActionBarRecipe;