@membranehq/react 0.1.0

package/dist/cjs/components/DataBuilderUI/Cell.cjs

@@ -0,0 +1,177 @@
+"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');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+var index = require('../SvgIcon/index.cjs');
+
+const dataBuilderCellRecipe = sva.sva({
+  className: "data-builder-cell",
+  slots: ["root"],
+  base: {
+    root: {
+      overflowX: "hidden",
+      display: "flex",
+      flexDir: "column",
+      alignItems: "start",
+      justifyContent: "center",
+      borderLeftWidth: "1px",
+      borderLeftColor: "slate.3",
+      px: "2.5",
+      py: "1.5",
+      minH: "8.5",
+      bg: "white",
+      borderWidth: "1px 1px 1px 0",
+      borderColor: "slate.3",
+      _first: {
+        borderLeftWidth: "1px",
+        borderBottomLeftRadius: "token(sizes.2.5)",
+        borderTopLeftRadius: "token(sizes.2.5)"
+      },
+      _last: {
+        borderBottomRightRadius: "token(sizes.2.5)",
+        borderTopRightRadius: "token(sizes.2.5)"
+      }
+    }
+  },
+  variants: {
+    type: {
+      name: {
+        root: {
+          flexGrow: "0",
+          flexShrink: "0",
+          flexWrap: "nowrap",
+          alignSelf: "stretch",
+          minW: "40"
+        }
+      },
+      combobox: {
+        root: {
+          flexDir: "row",
+          flexWrap: "wrap",
+          justifyContent: "start",
+          alignItems: "center",
+          px: "0",
+          py: "0"
+        }
+      },
+      input: {
+        root: {
+          px: "2",
+          py: "2",
+          "& > input": {
+            w: "full"
+          }
+        }
+      },
+      value: {
+        root: {
+          py: "2"
+        }
+      },
+      icon: {
+        root: {
+          flexGrow: "0",
+          flexShrink: "0",
+          flexWrap: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "neutral.10",
+          px: "2.5",
+          py: "2.5",
+          "& svg": {
+            w: "3.5",
+            h: "3.5"
+          }
+        }
+      }
+    },
+    disabled: {
+      true: {
+        root: {
+          pointerEvents: "none",
+          bg: "slate.1"
+        }
+      },
+      false: {}
+    },
+    span: {
+      shrink: {
+        root: {
+          flexGrow: "0",
+          flexShrink: "1"
+        }
+      },
+      grow: {
+        root: {
+          flexGrow: "1"
+        }
+      }
+    }
+  }
+});
+const Cell = React.forwardRef(
+  ({ children, disabled, className, type, span, icon, ...props }, ref) => {
+    const styles = dataBuilderCellRecipe({ type, disabled, span });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx.clsx(styles.root, className),
+        "aria-disabled": disabled,
+        "aria-readonly": disabled,
+        ...props,
+        ref,
+        children: icon ? /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type: icon }) : children
+      }
+    );
+  }
+);
+Cell.displayName = "Cell";
+const dataBuilderCellButtonRecipe = sva.sva({
+  className: "data-builder-cell-button",
+  slots: ["root"],
+  base: {
+    root: {
+      cursor: "pointer",
+      _hover: {
+        bg: "slate.2"
+      },
+      _active: {
+        bg: "slate.3"
+      }
+    }
+  }
+});
+const CellButton = React.forwardRef(({ children, disabled, className, type, icon, ...props }, ref) => {
+  const styles = dataBuilderCellRecipe({ type, disabled });
+  const buttonStyles = dataBuilderCellButtonRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: clsx.clsx(styles.root, buttonStyles.root, className),
+      "aria-disabled": disabled,
+      "aria-readonly": disabled,
+      ...props,
+      ref,
+      children: icon ? /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type: icon }) : children
+    }
+  );
+});
+CellButton.displayName = "CellButton";
+
+exports.Cell = Cell;
+exports.CellButton = CellButton;
+exports.dataBuilderCellButtonRecipe = dataBuilderCellButtonRecipe;
+exports.dataBuilderCellRecipe = dataBuilderCellRecipe;

package/dist/cjs/components/DataBuilderUI/FieldControlPanel/index.cjs

@@ -0,0 +1,124 @@
+"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');
+require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+var sva = require('../../../styled-system/css/sva.cjs');
+
+const fieldControlPanelRecipe = sva.sva({
+  className: "field-control-panel",
+  slots: ["root", "delimiter", "group", "button"],
+  base: {
+    root: {
+      maxW: "full",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      columnGap: "2",
+      rowGap: "1"
+    },
+    delimiter: {
+      color: "slate.10",
+      fontWeight: "medium"
+    },
+    group: {
+      display: "flex",
+      flexDir: "row",
+      flexWrap: "nowrap",
+      overflow: "hidden",
+      maxW: "full"
+    },
+    button: {
+      maxW: "full",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "2",
+      transition: "all",
+      transitionDuration: "200ms",
+      bg: "slate.2",
+      color: "slate.10",
+      borderWidth: "1px",
+      borderColor: "slate.3",
+      rounded: "token(sizes.2.5)",
+      fontWeight: "medium",
+      m: "0",
+      py: "1",
+      px: "2.5",
+      _hover: {
+        bg: "slate.3",
+        borderColor: "slate.4",
+        color: "slate.11"
+      },
+      _disabled: {
+        color: "slate.8",
+        cursor: "not-allowed"
+      },
+      "& svg": {
+        h: "3",
+        w: "3",
+        flexShrink: "0",
+        flexGrow: "0",
+        strokeWidth: "token(sizes.0.5)"
+      },
+      ".field-control-panel__group &": {
+        rounded: "none",
+        "&:not(:first-child)": {
+          borderLeft: "none"
+        },
+        _first: {
+          roundedLeft: "token(sizes.2.5)"
+        },
+        _last: {
+          roundedRight: "token(sizes.2.5)"
+        }
+      }
+    }
+  },
+  variants: {
+    noWrap: {
+      true: {
+        root: {
+          flexWrap: "nowrap"
+        }
+      },
+      false: {}
+    }
+  }
+});
+function FieldControlPanelRoot({ children, noWrap }) {
+  const styles = fieldControlPanelRecipe({ noWrap });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.root, children });
+}
+function FieldControlPanelDelimiter({ children }) {
+  const styles = fieldControlPanelRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.delimiter, children });
+}
+function FieldControlButtonGroup({ children }) {
+  const styles = fieldControlPanelRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.group, children });
+}
+const FieldControlButtonElement = React.forwardRef(({ children, className, ...props }, ref) => {
+  const styles = fieldControlPanelRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, className: clsx.clsx(styles.button, className), ...props, children });
+});
+const FieldControlPanel = Object.assign(FieldControlPanelRoot, {
+  Delimiter: FieldControlPanelDelimiter,
+  ButtonGroup: FieldControlButtonGroup,
+  Button: FieldControlButtonElement
+});
+
+exports.FieldControlPanel = FieldControlPanel;
+exports.fieldControlPanelRecipe = fieldControlPanelRecipe;

package/dist/cjs/components/DataBuilderUI/NestedLevel.cjs

@@ -0,0 +1,23 @@
+"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 clsx = require('clsx');
+var styles_module = require('./styles.module.css.cjs');
+
+const BASE_LEVEL = 1;
+function NestedLevel({ level = BASE_LEVEL, children }) {
+  if (level === BASE_LEVEL - 1) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(styles_module.default.nestedLevel), children: /* @__PURE__ */ jsxRuntime.jsx(NestedLevel, { level: level - 1, children }) });
+}
+
+exports.NestedLevel = NestedLevel;

package/dist/cjs/components/DataBuilderUI/Row.cjs

@@ -0,0 +1,48 @@
+"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 clsx = require('clsx');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+
+const dataBuilderRowRecipe = sva.sva({
+  className: "data-builder-row",
+  slots: ["row"],
+  base: {
+    row: {
+      w: "full",
+      position: "relative",
+      display: "flex",
+      flexDir: "row",
+      flexWrap: "nowrap",
+      alignItems: "stretch",
+      justifyContent: "start"
+    }
+  },
+  variants: {
+    span: {
+      short: {
+        row: {
+          width: "fit-content"
+        }
+      },
+      default: {}
+    }
+  }
+});
+function Row({ children, className, span, ...rest }) {
+  const styles = dataBuilderRowRecipe({ span });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(styles.row, className), ...rest, children });
+}
+
+exports.Row = Row;
+exports.dataBuilderRowRecipe = dataBuilderRowRecipe;

package/dist/cjs/components/DataBuilderUI/Title.cjs

@@ -0,0 +1,125 @@
+"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 css = require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+var index = require('../Tooltip/index.cjs');
+
+const dataBuilderTitleRecipe = sva.sva({
+  className: "data-builder-title",
+  slots: ["root", "left-side", "right-side", "title", "title-wrap"],
+  base: {
+    root: {
+      display: "flex",
+      flexDir: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "2",
+      w: "full",
+      maxW: "full"
+    },
+    "left-side": {
+      display: "flex",
+      flexDir: "row",
+      alignItems: "center",
+      flex: "1"
+    },
+    "right-side": {
+      display: "flex",
+      flexDir: "row",
+      alignItems: "center",
+      gap: "1",
+      h: "full"
+    },
+    title: {
+      truncate: true,
+      flex: "1",
+      maxW: "fit-content",
+      whiteSpace: "nowrap",
+      fontWeight: "medium"
+    },
+    "title-wrap": {
+      whiteSpace: "normal"
+    }
+  }
+});
+const Title = React.forwardRef(
+  ({
+    children,
+    required,
+    hasValue,
+    hasError,
+    hasNameConflict,
+    leftSlot,
+    typeSelectorSlot,
+    rightSlot,
+    childrenWrap = false,
+    ...props
+  }, ref) => {
+    const styles = dataBuilderTitleRecipe();
+    const childrenAsText = React.Children.toArray(children).reduce((acc, el) => {
+      return acc + (typeof el === "string" ? el : "");
+    }, "");
+    const showRequiredDot = required && !hasError && !hasValue;
+    const hasRightSlot = rightSlot || hasError || showRequiredDot;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.root, ...props, ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles["left-side"], children: [
+        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: leftSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(styles.title, childrenWrap && styles["title-wrap"]), title: childrenAsText, children }),
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeSelectorSlot })
+      ] }),
+      hasRightSlot && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles["right-side"], children: [
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rightSlot }),
+        hasError && /* @__PURE__ */ jsxRuntime.jsx(Dot, { reason: "Field has error" }),
+        hasNameConflict && /* @__PURE__ */ jsxRuntime.jsx(Dot, { reason: "Current field name is already used" }),
+        showRequiredDot && /* @__PURE__ */ jsxRuntime.jsx(Dot, { reason: "Field is required" })
+      ] })
+    ] });
+  }
+);
+Title.displayName = "Title";
+const dotRecipe = sva.sva({
+  className: "data-builder-title-dot",
+  slots: ["root", "dot"],
+  base: {
+    root: {
+      w: "4",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    dot: {
+      flexShrink: "0",
+      flexGrow: "0",
+      w: "2",
+      h: "2",
+      bg: "tomato.10",
+      rounded: "full",
+      display: "inline-block",
+      cursor: "help"
+    }
+  }
+});
+const Dot = React.forwardRef(({ reason, className, ...rest }, ref) => {
+  const styles = dotRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip: reason, delayToShow: 0, usePortal: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(styles.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.dot, ...rest, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: css.css({ srOnly: true }), children: reason })
+  ] }) });
+});
+
+exports.Dot = Dot;
+exports.Title = Title;
+exports.dataBuilderTitleRecipe = dataBuilderTitleRecipe;
+exports.dotRecipe = dotRecipe;

package/dist/cjs/components/DataBuilderUI/styles.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * 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 styleInject = require('style-inject');
+
+var css_248z = "/* ### Nested Levels ### */\n.styles-module_nestedLevel__fV46p {\n  position: relative;\n}\n.styles-module_nestedLevel__fV46p:not(:has(.styles-module_nestedLevel__fV46p)) {\n  margin-right: 0.625rem;\n}\n.styles-module_nestedLevel__fV46p > .styles-module_nestedLevel__fV46p {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII=');\n  background-size: 1px 1px;\n  background-repeat: repeat-y;\n  background-position: top 0 left 1rem;\n  padding-left: 2rem;\n}\n.styles-module_nestedLevel__fV46p .styles-module_nestedLevel__fV46p {\n  flex-grow: 1;\n}\n.styles-module_nestedLevel__fV46p:not(:empty) + .styles-module_nestedLevel__fV46p:not(:has(> .styles-module_nestedLevel__fV46p)),\n.styles-module_nestedLevel__fV46p:not(:empty) > .styles-module_nestedLevel__fV46p:has(> :not(.styles-module_nestedLevel__fV46p)) {\n  padding-top: 0.5rem;\n}\n.styles-module_nestedLevel__fV46p .styles-module_nestedLevel__fV46p:has(> :not(.styles-module_nestedLevel__fV46p))::before {\n  content: '';\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII=');\n  background-size: 3rem 1px;\n  background-repeat: repeat-x;\n  background-position: 0 0;\n  display: block;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: absolute;\n  top: 50%;\n  left: 1rem;\n  margin-top: 0.25rem;\n  width: 1rem;\n  height: 1px;\n}\n";
+var classes = {"nestedLevel":"styles-module_nestedLevel__fV46p"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/DataInput/index.cjs

@@ -0,0 +1,57 @@
+"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 index = require('../DataBuilder/index.cjs');
+var Form = require('../DataBuilder/Form.cjs');
+var useResolvedDataSchema = require('./useResolvedDataSchema.cjs');
+
+function DataInput({
+  schema,
+  variablesSchema,
+  value,
+  onChange,
+  readOnly,
+  editableVariablesSchemaLocators,
+  onAddVariable,
+  isAdminMode,
+  errorFieldsLocators,
+  frozenFieldsLocators,
+  showNullValueFields,
+  hideReadOnlyFields
+}) {
+  const { schema: resolvedSchema, error } = useResolvedDataSchema.useDynamicDataSchema(schema, value);
+  const field = index.makeDataField({
+    schema: resolvedSchema,
+    variablesSchema,
+    value,
+    resolveDynamicSchema: false
+  });
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: error.message });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form.DataBuilderForm,
+    {
+      field,
+      isAdminMode,
+      readOnly,
+      onChange,
+      editableVariablesSchemaLocators,
+      onAddVariable,
+      errorFieldsLocators,
+      frozenFieldsLocators,
+      showNullValueFields,
+      hideReadOnlyFields
+    }
+  );
+}
+
+exports.DataInput = DataInput;

package/dist/cjs/components/DataInput/useResolvedDataSchema.cjs

@@ -0,0 +1,49 @@
+"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 sdk = require('@membranehq/sdk');
+var integrationAppContext = require('../../contexts/integration-app-context.cjs');
+var integrationAppConnectionContext = require('../../contexts/integration-app-connection-context.cjs');
+
+function useDynamicDataSchema(schema, value) {
+  const integrationApp = integrationAppContext.useIntegrationApp();
+  const { connectionId } = integrationAppConnectionContext.useIntegrationAppConnection();
+  const [previousSourceSchema, setPreviousSourceSchema] = React.useState(void 0);
+  const [resolvedSchema, setResolvedSchema] = React.useState(schema);
+  const [error, setError] = React.useState(void 0);
+  async function resolveSchema(schema2, value2) {
+    try {
+      const resolvedSchema2 = await sdk.resolveFormulas(schema2, {
+        variables: await sdk.resolveFormulas(value2, {}),
+        getDataCollection: connectionId ? async (key, parameters) => {
+          const dataCollection = await integrationApp.connection(connectionId).dataCollection(key, parameters).get();
+          return dataCollection;
+        } : void 0
+      });
+      setResolvedSchema(resolvedSchema2);
+      setError(void 0);
+    } catch (err) {
+      setError(err);
+    }
+  }
+  React.useEffect(() => {
+    if (schema !== previousSourceSchema) {
+      setPreviousSourceSchema(schema);
+      setResolvedSchema(schema);
+    }
+    if (schema) {
+      void resolveSchema(schema, value);
+    }
+  }, [schema ? JSON.stringify(schema) : void 0, value ? JSON.stringify(value) : void 0, connectionId]);
+  return { schema: resolvedSchema, error };
+}
+
+exports.useDynamicDataSchema = useDynamicDataSchema;

package/dist/cjs/components/DataLinks/data-link-tables-option-factory.cjs

@@ -0,0 +1,48 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var utils = require('../ComboBox/options-factories/utils.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);
+class DataLinkTablesOptionsFactory {
+  constructor(args) {
+    this.args = args;
+    __publicField(this, "cachedOptions", null);
+  }
+  async getOptions({ input }) {
+    const options = await this.getCachedOptions();
+    return utils.filterOptionsByLabel(options, input);
+  }
+  async getCachedOptions() {
+    if (this.cachedOptions === null) {
+      const { client, connectionId, isAdminMode } = this.args;
+      if (isAdminMode) {
+        const responsePage = await client.dataLinkTables.find();
+        this.cachedOptions = responsePage.items.map((item) => ({
+          label: item.name,
+          value: item.key
+        }));
+      } else {
+        const responsePage = await client.dataLinkTableInstances.find({
+          connectionId
+        });
+        this.cachedOptions = responsePage.items.filter((i) => !!i.dataLinkTable).map((item) => ({
+          label: item?.dataLinkTable?.name,
+          value: item?.dataLinkTable?.key
+        }));
+      }
+    }
+    return this.cachedOptions;
+  }
+}
+
+exports.DataLinkTablesOptionsFactory = DataLinkTablesOptionsFactory;