@membranehq/react 0.1.0

package/dist/cjs/components/ComboBoxElements/Editor/helpers/transformValueToEditorSchema.cjs

@@ -0,0 +1,92 @@
+"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 EditorTagNode = require('../nodes/EditorTagNode.cjs');
+var common = require('./common.cjs');
+
+function transformValueToEditorSchema(value, schema) {
+  const paragraph = {
+    children: getParagraphNodes(value, schema),
+    direction: "ltr",
+    format: "",
+    indent: 0,
+    textFormat: 0,
+    textStyle: "",
+    type: "paragraph",
+    version: 1
+  };
+  return {
+    root: {
+      children: [paragraph],
+      direction: "ltr",
+      format: "",
+      indent: 0,
+      type: "root",
+      version: 1
+    }
+  };
+}
+const getParagraphNodes = (value, schema) => {
+  const safeValue = common.transformValueToTpl(value);
+  const template = common.getTemplateFromTplValue(safeValue);
+  const templateValues = common.getValuesFromTplValue(safeValue);
+  const chunks = common.splitStringToChunks(template);
+  if (!chunks.length) {
+    return [];
+  }
+  const schemaHasRefCollection = !!sdk.getReferenceCollectionPointerForSchema(schema);
+  if (chunks.length === 1 && schemaHasRefCollection) {
+    const [chunk] = chunks;
+    return [
+      {
+        type: EditorTagNode.EditorTagNode.getType(),
+        value: { value: chunk, autoOpen: false, id: "" },
+        version: 1
+      }
+    ];
+  }
+  const nodes = chunks.map((chunk) => {
+    if (common.isTagChunk(chunk)) {
+      const tagIdentifier = common.getTagChunkIdentifier(chunk);
+      const value2 = templateValues[tagIdentifier];
+      if (value2) {
+        return {
+          type: EditorTagNode.EditorTagNode.getType(),
+          value: { value: value2, autoOpen: false, id: tagIdentifier },
+          version: 1
+        };
+      }
+    }
+    return {
+      type: "text",
+      version: 1,
+      detail: 0,
+      format: 0,
+      mode: "normal",
+      style: "",
+      text: chunk
+    };
+  });
+  const valueHasTags = nodes.some((node) => node.type === EditorTagNode.EditorTagNode.getType());
+  return valueHasTags ? nodes : [
+    {
+      type: "text",
+      version: 1,
+      detail: 0,
+      format: 0,
+      mode: "normal",
+      style: "",
+      text: common.isValueTemplate(value) ? value.$tpl.template : value
+    }
+  ];
+};
+
+exports.transformValueToEditorSchema = transformValueToEditorSchema;

package/dist/cjs/components/ComboBoxElements/Editor/nodes/EditorTagBinding.cjs

@@ -0,0 +1,58 @@
+"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 LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var useLexicalNodeSelection = require('@lexical/react/useLexicalNodeSelection');
+var lexical = require('lexical');
+var ComboBox = require('../../../ComboBox/ComboBox.cjs');
+var comboboxContext = require('../../../ComboBox/context/combobox-context.cjs');
+var EditorTagNode = require('./EditorTagNode.cjs');
+var dataBuilderContext = require('../../../DataBuilder/data-builder-context.cjs');
+var hooks = require('../../../DataBuilder/hooks.cjs');
+
+const EditorTagBinding = ({
+  internalKey,
+  value,
+  autoOpen
+}) => {
+  const { isReadOnly } = dataBuilderContext.default();
+  const isFrozenField = hooks.usIsFieldFrozen();
+  const { variablesSchema, schema } = comboboxContext.useComboBox();
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [isSelected] = useLexicalNodeSelection.useLexicalNodeSelection(internalKey);
+  const handleChange = (value2) => {
+    editor.update(() => {
+      const node = lexical.$getNodeByKey(internalKey);
+      if (EditorTagNode.$isEditorTagNode(node)) {
+        if (value2 === void 0) {
+          node.remove();
+        } else {
+          node.setValue(value2);
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComboBox.ComboBox,
+    {
+      value,
+      schema,
+      variablesOnly: true,
+      disabled: isReadOnly || isFrozenField,
+      variablesSchema,
+      onChange: handleChange,
+      autoOpen,
+      "data-selected": isSelected
+    }
+  );
+};
+
+exports.EditorTagBinding = EditorTagBinding;

package/dist/cjs/components/ComboBoxElements/Editor/nodes/EditorTagNode.cjs

@@ -0,0 +1,88 @@
+"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 lexical = require('lexical');
+var EditorTagBinding = require('./EditorTagBinding.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, typeof key !== "symbol" ? key + "" : key, value);
+const NODE_DATA_ATTR = "data-editor-tag";
+class EditorTagNode extends lexical.DecoratorNode {
+  constructor(value, key) {
+    super(key);
+    __publicField(this, "__value");
+    __publicField(this, "__id");
+    __publicField(this, "__autoOpen");
+    this.__value = value.value;
+    this.__autoOpen = value.autoOpen;
+    this.__id = value.id;
+  }
+  static getType() {
+    return "editor-tag-node";
+  }
+  static clone(node) {
+    return new EditorTagNode({ value: node.__value, autoOpen: node.__autoOpen, id: node.__id }, node.__key);
+  }
+  createDOM() {
+    const element = document.createElement("span");
+    element.setAttribute(NODE_DATA_ATTR, "true");
+    element.setAttribute("contenteditable", "false");
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  setValue(value) {
+    const writable = this.getWritable();
+    writable.__value = value;
+  }
+  decorate() {
+    return /* @__PURE__ */ jsxRuntime.jsx(EditorTagBinding.EditorTagBinding, { value: this.__value, internalKey: this.__key, autoOpen: this.__autoOpen });
+  }
+  static importJSON(serializedNode) {
+    const node = $createEditorTagNode(serializedNode.value);
+    return node;
+  }
+  exportJSON() {
+    return {
+      type: EditorTagNode.getType(),
+      value: this.__value,
+      version: 1
+    };
+  }
+  isKeyboardSelectable() {
+    return false;
+  }
+  isIsolated() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
+  get id() {
+    return this.__id;
+  }
+  get value() {
+    return this.__value;
+  }
+}
+function $createEditorTagNode(value) {
+  return new EditorTagNode(value);
+}
+function $isEditorTagNode(node) {
+  return node instanceof EditorTagNode;
+}
+
+exports.$createEditorTagNode = $createEditorTagNode;
+exports.$isEditorTagNode = $isEditorTagNode;
+exports.EditorTagNode = EditorTagNode;
+exports.NODE_DATA_ATTR = NODE_DATA_ATTR;

package/dist/cjs/components/ComboBoxElements/Editor/plugins/ConfigPlugin.cjs

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+
+function ConfigPlugin({ disabled = false }) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useEffect(() => {
+    editor.setEditable(!disabled);
+  }, [disabled, editor]);
+  return null;
+}
+
+exports.ConfigPlugin = ConfigPlugin;

package/dist/cjs/components/ComboBoxElements/Editor/plugins/EditorTagPlugin.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 React = require('react');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var commands = require('./commands.cjs');
+var EditorTagNode = require('../nodes/EditorTagNode.cjs');
+
+function EditorTagPlugin() {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useEffect(() => {
+    if (!editor.hasNodes([EditorTagNode.EditorTagNode])) {
+      throw new Error("EditorTagPlugin: EditorTagNode not registered on editor");
+    }
+    editor.registerCommand(
+      commands.INSERT_EDITOR_TAG_COMMAND,
+      (payload) => {
+        editor.update(() => {
+          lexical.$insertNodes([EditorTagNode.$createEditorTagNode(payload)]);
+        });
+        return true;
+      },
+      lexical.COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  return null;
+}
+
+exports.EditorTagPlugin = EditorTagPlugin;

package/dist/cjs/components/ComboBoxElements/Editor/plugins/KeyboardPlugin.cjs

@@ -0,0 +1,33 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+
+function KeyboardPlugin() {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useEffect(() => {
+    return editor.registerCommand(
+      lexical.KEY_ENTER_COMMAND,
+      (event) => {
+        if (!event.shiftKey) {
+          event.preventDefault();
+          return true;
+        }
+        return false;
+      },
+      lexical.COMMAND_PRIORITY_LOW
+    );
+  }, [editor]);
+  return null;
+}
+
+exports.KeyboardPlugin = KeyboardPlugin;

package/dist/cjs/components/ComboBoxElements/Editor/plugins/StateSyncPlugin.cjs

@@ -0,0 +1,42 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var transformValueToEditorSchema = require('../helpers/transformValueToEditorSchema.cjs');
+
+const getRootParagraphNodes = (editorState) => {
+  const paragraph = editorState.toJSON().root.children[0];
+  if (paragraph.type !== "paragraph") return [];
+  return paragraph.children;
+};
+function StateSyncPlugin({ value, schema }) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useEffect(() => {
+    editor.update(() => {
+      const currentState = editor.getEditorState();
+      const newState = editor.parseEditorState(transformValueToEditorSchema.transformValueToEditorSchema(value, schema));
+      const currentRootParagraph = JSON.stringify(getRootParagraphNodes(currentState));
+      const newRootParagraph = JSON.stringify(getRootParagraphNodes(newState));
+      if (currentRootParagraph !== newRootParagraph) {
+        const selection = lexical.$getSelection();
+        editor.setEditorState(newState, {
+          tag: lexical.HISTORY_MERGE_TAG
+        });
+        const selectionClone = selection?.clone();
+        lexical.$setSelection(selectionClone ?? null);
+      }
+    });
+  }, [JSON.stringify(value)]);
+  return null;
+}
+
+exports.StateSyncPlugin = StateSyncPlugin;

package/dist/cjs/components/ComboBoxElements/Editor/plugins/commands.cjs

@@ -0,0 +1,15 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var lexical = require('lexical');
+
+const INSERT_EDITOR_TAG_COMMAND = lexical.createCommand();
+
+exports.INSERT_EDITOR_TAG_COMMAND = INSERT_EDITOR_TAG_COMMAND;

package/dist/cjs/components/ComboBoxElements/Editor/useEditor.cjs

@@ -0,0 +1,47 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var commands = require('./plugins/commands.cjs');
+
+const $getEditorNodesSummary = () => {
+  const children = lexical.$getRoot().getChildren();
+  const rootParagraph = children[0];
+  return {
+    textNodes: rootParagraph.getAllTextNodes().length,
+    otherNodes: rootParagraph.getChildrenSize() - rootParagraph.getAllTextNodes().length
+  };
+};
+const useEditor = () => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  function pasteTag({
+    value,
+    autoOpen,
+    allowEditorSearchClear = false
+  }) {
+    if (allowEditorSearchClear) {
+      editor.update(() => {
+        const { otherNodes } = $getEditorNodesSummary();
+        if (otherNodes === 0) {
+          lexical.$getRoot().clear();
+        }
+      });
+    }
+    editor.dispatchCommand(commands.INSERT_EDITOR_TAG_COMMAND, {
+      id: (/* @__PURE__ */ new Date()).getTime().toString(),
+      value,
+      autoOpen
+    });
+  }
+  return { editor, pasteTag };
+};
+
+exports.useEditor = useEditor;

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

@@ -0,0 +1,190 @@
+"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 sdk = require('@membranehq/sdk');
+var css = require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+var ComboBox = require('../../ComboBox/ComboBox.cjs');
+require('../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../../DataBuilderUI/Cell.cjs');
+var NestedLevel = require('../../DataBuilderUI/NestedLevel.cjs');
+var Row = require('../../DataBuilderUI/Row.cjs');
+require('../../DataBuilderUI/Title.cjs');
+var dataField = require('../data-field.cjs');
+var fieldContext = require('../field-context.cjs');
+var FieldDelete = require('../FieldDelete.cjs');
+var index = require('../FieldValue/index.cjs');
+var index$1 = require('../Nested/FieldControlPanel/index.cjs');
+
+function DataBuilderCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = sdk.getFormula(field.value);
+  switch (formula?.type) {
+    case sdk.DataBuilderFormulaType.AND:
+      return /* @__PURE__ */ jsxRuntime.jsx(And, { field, onChange });
+    case sdk.DataBuilderFormulaType.EVAL:
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(EvalCondition, { field, onChange, onDelete, isNested });
+  }
+}
+function And({ field, onChange }) {
+  const formula = sdk.getFormula(field.value);
+  let conditions = formula?.args;
+  if (!conditions || !Array.isArray(conditions) || conditions.length === 0) {
+    conditions = [null];
+  }
+  function getConditionField(idx) {
+    const value = conditions[idx];
+    return dataField.makeSubField(field, {
+      value,
+      valueLocator: `${field.valueLocator}.$and[${idx}]`,
+      // Temporary: remove this when we implement the new conditions UI
+      level: field.level
+    });
+  }
+  function handleConditionChange(idx, value) {
+    const newConditions = [...conditions];
+    newConditions[idx] = value;
+    onChange({
+      $and: newConditions
+    });
+  }
+  function handleAddCondition() {
+    onChange({
+      $and: [...conditions, null]
+    });
+  }
+  function handleDeleteCondition(idx) {
+    const newConditions = [...conditions];
+    newConditions.splice(idx, 1);
+    onChange({
+      $and: newConditions
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    conditions.map((_condition, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      DataBuilderCondition,
+      {
+        field: getConditionField(idx),
+        onChange: (value) => handleConditionChange(idx, value),
+        onDelete: () => handleDeleteCondition(idx),
+        isNested: true
+      },
+      idx
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.DataBuilderFieldControlPanel, { field, onAdd: handleAddCondition })
+  ] });
+}
+function EvalCondition({
+  field,
+  onChange,
+  onDelete,
+  isNested
+}) {
+  const formula = sdk.getFormula(field.value);
+  let value;
+  let operator;
+  let operatorOptions = [];
+  let operand;
+  if (formula instanceof sdk.Formula.Eval) {
+    value = formula.value;
+    operator = formula.getOperator(field.variablesSchema);
+    operand = formula.operand;
+    operatorOptions = formula.getAvailableOperators(field.variablesSchema).map((op) => ({
+      label: op.name,
+      value: op.key
+    }));
+  }
+  const valueField = dataField.makeSubField(field, {
+    value,
+    valueLocator: `${field.valueLocator}.$eval`
+  });
+  const operandField = dataField.makeSubField(field, {
+    value: operand,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2454): Variable 'operator' is used before being assigned.
+    valueLocator: `${field.valueLocator}.${operator?.key}`,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2454): Variable 'operator' is used before being assigned.
+    schema: operator?.operandSchema
+  });
+  function handleValueChange(value2) {
+    onChange({
+      ...formula?.toObject() ?? {},
+      $eval: value2
+    });
+  }
+  function handleOperatorChange(operatorKey) {
+    const newValue = {
+      $eval: value
+    };
+    if (operatorKey) {
+      newValue[operatorKey] = operand ?? null;
+    }
+    onChange(newValue);
+  }
+  function handleOperandChange(operand2) {
+    onChange({
+      $eval: value,
+      [operator.key]: operand2
+    });
+  }
+  function handleTransformToAnd() {
+    onChange({
+      $and: [field.value, null]
+    });
+  }
+  const hasOperand = operator && operator.hasOperand;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NestedLevel.NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", className: css.css({ maxW: "2/6", flexGrow: "3" }), children: /* @__PURE__ */ jsxRuntime.jsx(fieldContext.DataBuilderFieldProvider, { field: valueField, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ComboBox.ComboBox,
+        {
+          placeholder: "Value",
+          value: valueField.value,
+          onChange: handleValueChange,
+          variablesSchema: valueField.variablesSchema,
+          optionFactories: valueField.optionFactories,
+          schema: void 0
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Cell.Cell,
+        {
+          type: "combobox",
+          disabled: !value,
+          "data-formula": "condition",
+          className: css.css({ minW: "10", flexGrow: "2", pt: "1px" }),
+          children: value && /* @__PURE__ */ jsxRuntime.jsx(
+            ComboBox.ComboBox,
+            {
+              value: operator?.key,
+              options: operatorOptions,
+              onChange: handleOperatorChange
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", disabled: !hasOperand, className: css.css({ maxW: "3/6", flexGrow: "4" }), children: hasOperand && /* @__PURE__ */ jsxRuntime.jsx(fieldContext.DataBuilderFieldProvider, { field: operandField, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { field: operandField, onChange: handleOperandChange, allowScalarArray: true }) }) }),
+      onDelete && /* @__PURE__ */ jsxRuntime.jsx(FieldDelete.FieldDelete, { onClick: onDelete })
+    ] }) }),
+    !isNested && /* @__PURE__ */ jsxRuntime.jsx(index$1.DataBuilderFieldControlPanel, { field, onAdd: handleTransformToAnd })
+  ] });
+}
+
+exports.default = DataBuilderCondition;