@valbuild/react 0.16.0 → 0.18.0

package/dist/ValUI-0bb9cc3d.cjs.prod.js

@@ -1,383 +0,0 @@
-'use strict';
-
-var defineProperty = require('./defineProperty-36ed93cd.cjs.prod.js');
-var objectSpread2 = require('./objectSpread2-7b752a35.cjs.prod.js');
-var slicedToArray = require('./slicedToArray-0eb0bcdb.cjs.prod.js');
-var ValProvider = require('./ValProvider-d7afb84b.cjs.prod.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-afbea1dd.cjs.prod.js');
-
-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) {
-      if (node.current.shadowRoot) {
-        setRoot(node.current.shadowRoot);
-      } else {
-        var _root = node.current.attachShadow({
-          mode: "open"
-        });
-        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(objectSpread2._objectSpread2({}, inputs), {}, defineProperty._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);
-                }
-                console.log("->", input);
-                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;