@valbuild/react 0.12.0 → 0.13.3

package/dist/ValUI-371e9bf4.cjs.dev.js

@@ -0,0 +1,398 @@
+'use strict';
+
+var ValProvider = require('./ValProvider-7364ec46.cjs.dev.js');
+var slicedToArray = require('./slicedToArray-b7cf26e0.cjs.dev.js');
+var React = require('react');
+var ui = require('@valbuild/ui');
+var core = require('@valbuild/core');
+var reactDom = require('react-dom');
+var ReactJSXRuntime = require('react/jsx-runtime');
+require('./unsupportedIterableToArray-9e97e24a.cjs.dev.js');
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      ValProvider._defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+
+function ShadowContent(_ref) {
+  var root = _ref.root,
+    children = _ref.children;
+  return /*#__PURE__*/reactDom.createPortal(children, root);
+}
+var ShadowRoot = function ShadowRoot(_ref2) {
+  var children = _ref2.children;
+  var node = React.useRef(null);
+  var _useState = React.useState(null),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    root = _useState2[0],
+    setRoot = _useState2[1];
+  React.useLayoutEffect(function () {
+    if (node.current) {
+      var _root = node.current.attachShadow({
+        mode: "closed"
+      });
+      setRoot(_root);
+    }
+  }, []);
+  return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
+    ref: node,
+    children: root && /*#__PURE__*/ReactJSXRuntime.jsx(ShadowContent, {
+      root: root,
+      children: children
+    })
+  });
+};
+
+function ValUI(_ref) {
+  var _ref3;
+  var valApi = _ref.valApi,
+    valStore = _ref.valStore;
+  var _useState = React.useState([]),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    selectedSources = _useState2[0],
+    setSelectedSources = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    editMode = _useState4[0],
+    setEditMode = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+    editFormPosition = _useState6[0],
+    setEditFormPosition = _useState6[1];
+  var _useState7 = React.useState({
+      status: "not-asked"
+    }),
+    _useState8 = slicedToArray._slicedToArray(_useState7, 2),
+    authentication = _useState8[0],
+    setAuthentication = _useState8[1];
+  React.useEffect(function () {
+    if (editMode) {
+      valStore.updateAll();
+    }
+  }, [editMode]);
+  React.useEffect(function () {
+    var openValFormListener = undefined;
+    var styleElement = undefined;
+    var editButtonClickOptions = {
+      capture: true,
+      passive: true
+    };
+    if (editMode) {
+      // highlight val element by appending a new style
+      styleElement = document.createElement("style");
+      styleElement.id = "val-edit-highlight";
+      styleElement.innerHTML = "\n        .val-edit-mode >* [data-val-path] {\n          outline: #ffff00 solid 1px;\n          cursor: pointer;\n        }\n      ";
+      document.body.appendChild(styleElement);
+
+      // capture event clicks on data-val-path elements
+      openValFormListener = function openValFormListener(e) {
+        if (e.target instanceof Element) {
+          var _parent;
+          var parent = e.target;
+          while (parent && parent !== document.body) {
+            if (parent.getAttribute("data-val-path")) {
+              break;
+            }
+            if (parent.parentElement) {
+              parent = parent.parentElement;
+            } else {
+              break;
+            }
+          }
+          var valSources = (_parent = parent) === null || _parent === void 0 ? void 0 : _parent.getAttribute("data-val-path");
+          if (valSources) {
+            e.stopPropagation();
+            setSelectedSources(valSources.split(",") /* TODO: just split on commas will not work if path contains , */);
+
+            setEditFormPosition({
+              left: e.pageX,
+              top: e.pageY
+            });
+            // } else if (!isValElement(e.target)) {
+            //   console.log("click outside", e.target);
+            //   setEditFormPosition(null);
+            //   setSelectedSources([]);
+          }
+        }
+      };
+
+      document.addEventListener("click", openValFormListener, editButtonClickOptions);
+    }
+    return function () {
+      var _styleElement;
+      if (openValFormListener) {
+        document.removeEventListener("click", openValFormListener, editButtonClickOptions);
+      }
+      (_styleElement = styleElement) === null || _styleElement === void 0 ? void 0 : _styleElement.remove();
+    };
+  }, [editMode]);
+  React.useEffect(function () {
+    if (editMode) {
+      document.body.classList.add("val-edit-mode");
+    } else {
+      document.body.classList.remove("val-edit-mode");
+    }
+    if (editMode) {
+      if (authentication.status !== "authenticated") {
+        valApi.getSession().then( /*#__PURE__*/function () {
+          var _ref2 = ValProvider._asyncToGenerator( /*#__PURE__*/ValProvider._regeneratorRuntime().mark(function _callee(res) {
+            var data, message;
+            return ValProvider._regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  if (!(res.status === 401)) {
+                    _context.next = 4;
+                    break;
+                  }
+                  setAuthentication({
+                    status: "unauthenticated"
+                  });
+                  _context.next = 21;
+                  break;
+                case 4:
+                  if (!res.ok) {
+                    _context.next = 11;
+                    break;
+                  }
+                  _context.next = 7;
+                  return res.json();
+                case 7:
+                  data = _context.sent;
+                  if (data.mode === "local") {
+                    setAuthentication({
+                      status: "local"
+                    });
+                  } else if (data.mode === "proxy") {
+                    setAuthentication({
+                      status: "authenticated"
+                    });
+                  } else {
+                    setAuthentication({
+                      status: "error",
+                      message: "Unknown authentication mode"
+                    });
+                  }
+                  _context.next = 21;
+                  break;
+                case 11:
+                  message = "Unknown error";
+                  _context.prev = 12;
+                  _context.next = 15;
+                  return res.text();
+                case 15:
+                  message = _context.sent;
+                  _context.next = 20;
+                  break;
+                case 18:
+                  _context.prev = 18;
+                  _context.t0 = _context["catch"](12);
+                case 20:
+                  setAuthentication({
+                    status: "error",
+                    message: message
+                  });
+                case 21:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee, null, [[12, 18]]);
+          }));
+          return function (_x) {
+            return _ref2.apply(this, arguments);
+          };
+        }())["catch"](function (err) {
+          console.error("Failed to fetch session", err);
+          setAuthentication({
+            status: "error",
+            message: "Unknown authentication mode"
+          });
+        });
+      }
+    } else {
+      if (authentication.status === "error") {
+        setAuthentication({
+          status: "not-asked"
+        });
+      }
+    }
+  }, [editMode, authentication.status]);
+  var _useState9 = React.useState(false),
+    _useState10 = slicedToArray._slicedToArray(_useState9, 2),
+    showEditButton = _useState10[0],
+    setShowEditButton = _useState10[1];
+  React.useEffect(function () {
+    setShowEditButton(true);
+  }, []);
+  var _useState11 = React.useState({}),
+    _useState12 = slicedToArray._slicedToArray(_useState11, 2),
+    inputs = _useState12[0],
+    setInputs = _useState12[1];
+  React.useEffect(function () {
+    setInputs({});
+    var _iterator = ValProvider._createForOfIteratorHelper(selectedSources),
+      _step;
+    try {
+      var _loop = function _loop() {
+        var path = _step.value;
+        valApi.getModule(path).then(function (serializedModule) {
+          var input;
+          if (serializedModule.schema.type === "string" && typeof serializedModule.source === "string") {
+            input = {
+              status: "completed",
+              type: "text",
+              data: serializedModule.source
+            };
+          } else if (serializedModule.schema.type === "richtext" && slicedToArray._typeof(serializedModule.source) === "object") {
+            input = {
+              status: "completed",
+              type: "richtext",
+              data: serializedModule.source // TODO: validate
+            };
+          } else if (serializedModule.schema.type === "image" && serializedModule.source && slicedToArray._typeof(serializedModule.source) === "object" && core.FILE_REF_PROP in serializedModule.source && typeof serializedModule.source[core.FILE_REF_PROP] === "string" && core.VAL_EXTENSION in serializedModule.source && typeof serializedModule.source[core.VAL_EXTENSION] === "string") {
+            input = {
+              status: "completed",
+              type: "image",
+              data: core.Internal.convertImageSource(serializedModule.source)
+            };
+          }
+          console.log("input path", path);
+          console.log("serialized path", serializedModule.path);
+          if (!input) {
+            throw new Error("Unsupported module type: ".concat(serializedModule.schema.type));
+          }
+          setInputs(function (inputs) {
+            return _objectSpread2(_objectSpread2({}, inputs), {}, ValProvider._defineProperty({}, serializedModule.path, input));
+          });
+        });
+      };
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        _loop();
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }, [selectedSources.join(",")]);
+  if (!showEditButton) {
+    return null;
+  }
+  return /*#__PURE__*/ReactJSXRuntime.jsxs(ShadowRoot, {
+    children: [/*#__PURE__*/ReactJSXRuntime.jsx("link", {
+      rel: "preconnect",
+      href: "https://fonts.googleapis.com"
+    }), /*#__PURE__*/ReactJSXRuntime.jsx("link", {
+      rel: "preconnect",
+      href: "https://fonts.gstatic.com",
+      crossOrigin: "anonymous"
+    }), /*#__PURE__*/ReactJSXRuntime.jsx("link", {
+      href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap",
+      rel: "stylesheet"
+    }), /*#__PURE__*/ReactJSXRuntime.jsx(ui.Style, {}), /*#__PURE__*/ReactJSXRuntime.jsx("div", {
+      "data-mode": "dark",
+      children: /*#__PURE__*/ReactJSXRuntime.jsx(ui.ValOverlay, {
+        editMode: editMode,
+        setEditMode: setEditMode,
+        closeValWindow: function closeValWindow() {
+          setEditFormPosition(null);
+          setSelectedSources([]);
+          setInputs({});
+        },
+        valWindow: (_ref3 = editFormPosition && {
+          position: editFormPosition,
+          inputs: inputs,
+          onSubmit: function onSubmit(inputs) {
+            Promise.all(Object.entries(inputs).map(function (_ref4) {
+              var _ref5 = slicedToArray._slicedToArray(_ref4, 2),
+                path = _ref5[0],
+                input = _ref5[1];
+              if (input.status === "completed") {
+                var _Internal$splitModule = core.Internal.splitModuleIdAndModulePath(path),
+                  _Internal$splitModule2 = slicedToArray._slicedToArray(_Internal$splitModule, 2),
+                  moduleId = _Internal$splitModule2[0],
+                  modulePath = _Internal$splitModule2[1];
+                if (input.type === "text") {
+                  var patch = [{
+                    value: input.data,
+                    op: "replace",
+                    path: "/".concat(modulePath.split(".").map(function (p) {
+                      return JSON.parse(p);
+                    }).join("/"))
+                  }];
+                  return valApi.patchModuleContent(moduleId, patch);
+                } else if (input.type === "image") {
+                  var pathParts = modulePath.split(".").map(function (p) {
+                    return JSON.parse(p);
+                  });
+                  if (!(input !== null && input !== void 0 && input.data) || !("src" in input.data)) {
+                    // TODO: We probably need to have an Output type that is different from the Input: we have a union of both cases in Input right now, and we believe we do not want that
+                    console.warn("No .src on input provided - this might mean no changes was made");
+                    return;
+                  }
+                  var _patch = [{
+                    value: input.data.src,
+                    op: "replace",
+                    path: "/".concat(pathParts.slice(0, -1).join("/"), "/$").concat(pathParts[pathParts.length - 1])
+                  }];
+                  if (input.data.metadata) {
+                    if (input.data.addMetadata) {
+                      _patch.push({
+                        value: input.data.metadata,
+                        op: "add",
+                        path: "/".concat(pathParts.join("/"), "/metadata")
+                      });
+                    } else {
+                      _patch.push({
+                        value: input.data.metadata,
+                        op: "replace",
+                        path: "/".concat(pathParts.join("/"), "/metadata")
+                      });
+                    }
+                  }
+                  console.log("patch", _patch);
+                  return valApi.patchModuleContent(moduleId, _patch);
+                } else if (input.type === "richtext") {
+                  var _patch2 = [{
+                    value: input.data,
+                    op: "replace",
+                    path: "/".concat(modulePath.split(".").map(function (p) {
+                      return JSON.parse(p);
+                    }).join("/"))
+                  }];
+                  return valApi.patchModuleContent(moduleId, _patch2);
+                }
+                throw new Error("Unsupported input type: ".concat(input.type));
+              } else {
+                console.error("Submitted incomplete input, ignoring...");
+                return Promise.resolve();
+              }
+            })).then(function () {
+              setEditFormPosition(null);
+              setSelectedSources([]);
+              setInputs({});
+            });
+          }
+        }) !== null && _ref3 !== void 0 ? _ref3 : undefined
+      })
+    })]
+  });
+}
+
+exports["default"] = ValUI;