@makeswift/runtime 0.2.18 → 0.3.0

package/dist/index.es2.js

@@ -29,486 +29,112 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { useMemo, useRef, useState, useCallback, forwardRef, useImperativeHandle, Children } from "react";
-import styled, { css } from "styled-components";
-import { motion } from "framer-motion";
-import NextImage from "next/image";
-import { c as cssMediaRules } from "./cssMediaRules.es.js";
-import { L as isNonNullable, v as useQuery, N as FILES_BY_ID, F as SWATCHES_BY_ID, q as useIsomorphicLayoutEffect, p as colorToString } from "./index.es.js";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import ReactPlayer from "react-player";
-function useBackgrounds(value) {
-  const fileIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => background.type === "image" && background.payload != null ? background.payload.imageId : null).filter(isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []);
-  const swatchIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => {
-    if (background.type === "color" && background.payload != null) {
-      return [background.payload.swatchId];
-    }
-    if (background.type === "gradient" && background.payload != null) {
-      return background.payload.stops.map((stop) => stop.color && stop.color.swatchId).filter(isNonNullable);
-    }
-    if (background.type === "video" && background.payload != null) {
-      return [background.payload.maskColor && background.payload.maskColor.swatchId];
-    }
-    return null;
-  }).filter(isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []).filter(isNonNullable);
-  const skip = value == null;
-  const filesResult = useQuery(FILES_BY_ID, {
-    skip: skip || fileIds.length === 0,
-    variables: { ids: fileIds }
-  });
-  const swatchesResult = useQuery(SWATCHES_BY_ID, {
-    skip: skip || swatchIds.length === 0,
-    variables: { ids: swatchIds }
-  });
-  return useMemo(() => {
-    const { data: filesData = {} } = filesResult;
-    const { data: swatchesData = {} } = swatchesResult;
-    if (value == null || filesResult.error != null || swatchesResult.error != null) {
-      return null;
-    }
-    const { files = [] } = filesData;
-    const { swatches = [] } = swatchesData;
-    return value.map((_a) => {
-      var _b = _a, { value: backgrounds } = _b, restOfValue = __objRest(_b, ["value"]);
-      return __spreadProps(__spreadValues({}, restOfValue), {
-        value: backgrounds.map((bg) => {
-          if (bg.type === "image" && bg.payload != null && bg.payload.imageId != null) {
-            const _a2 = bg.payload, { imageId } = _a2, restOfPayload = __objRest(_a2, ["imageId"]);
-            const file = files.find((f) => f && f.id === imageId);
-            return file && {
-              id: bg.id,
-              type: "image",
-              payload: __spreadProps(__spreadValues({}, restOfPayload), {
-                publicUrl: file.publicUrl,
-                dimensions: file.dimensions
-              })
-            };
-          }
-          if (bg.type === "color" && bg.payload != null) {
-            const { swatchId, alpha } = bg.payload;
-            const swatch = swatches.find((s) => s && s.id === swatchId);
-            return { id: bg.id, type: "color", payload: { swatch, alpha } };
-          }
-          if (bg.type === "gradient" && bg.payload != null && bg.payload.stops.length > 0) {
-            return {
-              id: bg.id,
-              type: "gradient",
-              payload: {
-                angle: bg.payload.angle,
-                isRadial: bg.payload.isRadial,
-                stops: bg.payload.stops.map((_b2) => {
-                  var _c = _b2, { color } = _c, restOfStop = __objRest(_c, ["color"]);
-                  return __spreadProps(__spreadValues({}, restOfStop), {
-                    color: color && {
-                      swatch: swatches.find((s) => s && s.id === color.swatchId),
-                      alpha: color.alpha
-                    }
-                  });
-                })
-              }
-            };
-          }
-          if (bg.type === "video" && bg.payload != null) {
-            const _d = bg.payload, { maskColor } = _d, restOfPayload = __objRest(_d, ["maskColor"]);
-            const swatch = maskColor && swatches.find((s) => s && s.id === maskColor.swatchId);
-            return {
-              id: bg.id,
-              type: "video",
-              payload: __spreadProps(__spreadValues({}, restOfPayload), {
-                maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha }
-              })
-            };
-          }
-          return null;
-        }).filter(Boolean)
-      });
-    });
-  }, [filesResult, swatchesResult, value]);
-}
-const clamp = (min, val, max) => Math.min(Math.max(min, val), max);
-function isScrollable(element) {
-  const {
-    overflow,
-    overflowY,
-    overflowX
-  } = element.ownerDocument.defaultView.getComputedStyle(element);
-  return /(auto|scroll)/.test(overflow + overflowX + overflowY);
-}
-function getScrollParent(element) {
-  const {
-    parentElement
-  } = element;
-  if (!element || !parentElement)
-    return element;
-  if (isScrollable(element))
-    return element;
-  return getScrollParent(parentElement);
-}
-function Parallax(_a) {
+import { forwardRef } from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
+import NextLink from "next/link";
+import { n as usePage, X as useElementId } from "./index.es.js";
+import { jsx } from "react/jsx-runtime";
+const Link = forwardRef(function Link2(_a, ref) {
   var _b = _a, {
-    strength,
-    children
-  } = _b, rest = __objRest(_b, [
-    "strength",
-    "children"
-  ]);
-  const container = useRef(null);
-  const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength);
-  const lastScrollParentScrollTop = useRef(0);
-  useIsomorphicLayoutEffect(() => {
-    if (!container.current || strength == null || strength === 0)
-      return void 0;
-    const containerDocument = container.current.ownerDocument;
-    const scrollParent = getScrollParent(container.current);
-    const eventTarget = containerDocument.documentElement === scrollParent ? containerDocument.defaultView : scrollParent;
-    lastScrollParentScrollTop.current = scrollParent.scrollTop;
-    setContainerScrollTop(strength);
-    function handleScroll() {
-      containerDocument.defaultView.requestAnimationFrame(() => {
-        if (!container.current)
-          return;
-        const {
-          top: containerTop,
-          bottom: containerBottom
-        } = container.current.getBoundingClientRect();
-        const {
-          top: scrollParentTop,
-          bottom: scrollParentBottom
-        } = scrollParent === containerDocument.documentElement ? {
-          top: 0,
-          bottom: containerDocument.defaultView.innerHeight
-        } : scrollParent.getBoundingClientRect();
-        const {
-          scrollTop: scrollParentScrollTop
-        } = scrollParent === containerDocument.documentElement ? {
-          scrollTop: containerDocument.defaultView.pageYOffset
-        } : scrollParent;
-        const scrollParentHeight = scrollParentBottom - scrollParentTop;
-        const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current;
-        lastScrollParentScrollTop.current = scrollParentScrollTop;
-        setContainerScrollTop((scrollTop) => {
-          const isContainerVisible = containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop;
-          const containerScrollRemaining = scrollParentScrollDelta > 0 ? 2 * strength - scrollTop : scrollTop;
-          const scrollParentScrollRemaining = scrollParentScrollDelta > 0 ? scrollParentTop + containerBottom : scrollParentHeight - containerTop;
-          const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining;
-          const containerScrollDelta = isContainerVisible ? parallaxRatio * scrollParentScrollDelta : 0;
-          return clamp(0, scrollTop + containerScrollDelta, strength * 2);
-        });
-      });
+    link,
+    onClick = () => {
     }
-    eventTarget.addEventListener("scroll", handleScroll);
-    return () => eventTarget.removeEventListener("scroll", handleScroll);
-  }, [strength]);
-  const getProps = useCallback((_a2) => {
-    var _b2 = _a2, {
-      style
-    } = _b2, restOfChildrenProps = __objRest(_b2, [
-      "style"
-    ]);
-    return __spreadProps(__spreadValues({}, restOfChildrenProps), {
-      style: __spreadValues(__spreadProps(__spreadValues({}, style), {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0
-      }), strength == null || strength === 0 ? {} : {
-        top: -strength,
-        bottom: -strength,
-        transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`
-      })
-    });
-  }, [strength, containerScrollTop]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), {
-    ref: container,
-    style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
-    },
-    children: children(getProps)
-  }));
-}
-const Container$1 = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
-`;
-const Mask = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: ${(props) => props.backgroundColor};
-  opacity: ${(props) => props.visible ? 1 : 0};
-  transition: opacity 1s;
-`;
-const getScale = (element, aspectRatio, zoom) => {
-  const {
-    offsetWidth: width,
-    offsetHeight: height
-  } = element;
-  const computedAspectRatio = width / height;
-  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom;
-};
-function BackgroundVideo({
-  url = "",
-  aspectRatio = 16 / 9,
-  zoom = 1,
-  maskColor,
-  opacity
-}) {
-  var _a;
-  const [ready, setReady] = useState(false);
-  const [scale, setScale] = useState(1);
-  const container = useRef(null);
-  useIsomorphicLayoutEffect(() => {
-    const {
-      current: containerEl
-    } = container;
-    if (!containerEl)
-      return void 0;
-    const {
-      defaultView
-    } = containerEl.ownerDocument;
-    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom));
-    handleResize();
-    defaultView.addEventListener("resize", handleResize);
-    return () => defaultView.removeEventListener("resize", handleResize);
-  }, [aspectRatio, zoom]);
-  if (!ReactPlayer.canPlay(url))
-    return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsxs(Container$1, {
-    ref: container,
-    children: [container.current && /* @__PURE__ */ jsx(ReactPlayer, {
-      url,
-      config: {
-        vimeo: {
-          playerOptions: {
-            background: true
-          }
-        },
-        youtube: {
-          playerVars: {
-            origin: (_a = container.current.ownerDocument.defaultView) == null ? void 0 : _a.location.origin
-          }
-        },
-        wistia: {
-          options: {
-            endVideoBehavior: "loop",
-            playbackRateControl: false,
-            playbar: false,
-            playButton: false,
-            volumeControl: false,
-            fullscreenButton: false,
-            muted: true
-          }
+  } = _b, restOfProps = __objRest(_b, [
+    "link",
+    "onClick"
+  ]);
+  var _a2;
+  const page = usePage(link && link.type === "OPEN_PAGE" ? link.payload.pageId : null);
+  const elementKey = (link == null ? void 0 : link.type) === "SCROLL_TO_ELEMENT" ? (_a2 = link.payload.elementIdConfig) == null ? void 0 : _a2.elementKey : null;
+  const elementId = useElementId(elementKey);
+  let useNextLink;
+  let href;
+  let target;
+  let block;
+  if (link) {
+    switch (link.type) {
+      case "OPEN_PAGE": {
+        if (page) {
+          useNextLink = true;
+          href = `/${page.pathname}`;
         }
-      },
-      playing: true,
-      loop: true,
-      muted: true,
-      controls: false,
-      onReady: () => setReady(true),
-      style: {
-        transform: `scale3d(${scale}, ${scale}, 1)`,
-        opacity
-      },
-      width: "100%",
-      height: "100%"
-    }), /* @__PURE__ */ jsx(Mask, {
-      backgroundColor: maskColor,
-      visible: !ready
-    })]
-  });
-}
-function getColor(color) {
-  if (color == null)
-    return "black";
-  if (color.swatch == null) {
-    return colorToString(__spreadProps(__spreadValues({}, color), {
-      swatch: {
-        hue: 0,
-        saturation: 0,
-        lightness: 0
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
       }
-    }));
-  }
-  return colorToString(color);
-}
-const getStopsStyle = (stops) => stops.map(({
-  color,
-  location
-}) => `${getColor(color)} ${location}%`).join(",");
-const getAspectRatio = (aspectRatio) => {
-  switch (aspectRatio) {
-    case "wide":
-      return 16 / 9;
-    case "standard":
-      return 4 / 3;
-    default:
-      return 16 / 9;
+      case "OPEN_URL": {
+        useNextLink = true;
+        href = link.payload.url;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "SEND_EMAIL": {
+        useNextLink = false;
+        const {
+          to,
+          subject = "",
+          body = ""
+        } = link.payload;
+        if (to != null)
+          href = `mailto:${to}?subject=${subject}&body=${body}`;
+        break;
+      }
+      case "CALL_PHONE": {
+        useNextLink = false;
+        href = `tel:${link.payload.phoneNumber}`;
+        break;
+      }
+      case "SCROLL_TO_ELEMENT": {
+        useNextLink = false;
+        href = `#${elementId != null ? elementId : ""}`;
+        block = link.payload.block;
+        break;
+      }
+      default:
+        throw new RangeError(`Invalid link type "${link.type}."`);
+    }
   }
-};
-const AbsoluteFill = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-`;
-const Container = styled(AbsoluteFill)`
-  border-radius: inherit;
-`;
-const BackgroundsContainer$1 = styled(Container)`
-  overflow: hidden;
-  ${(p) => cssMediaRules([p.visibility], ([visibility]) => css`
-        display: ${visibility === true ? "block" : "none"};
-      `)}
-`;
-function Backgrounds({
-  backgrounds
-}) {
-  if (backgrounds == null)
-    return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: backgrounds.map(({
-      value,
-      deviceId
-    }) => {
-      const visibility = backgrounds.map((v) => ({
-        deviceId: v.deviceId,
-        value: v.deviceId === deviceId
-      }));
-      return /* @__PURE__ */ jsx(BackgroundsContainer$1, {
-        visibility,
-        children: [...value].reverse().map((bg) => {
-          if (bg.type === "color") {
-            return /* @__PURE__ */ jsx(Container, {
-              style: {
-                backgroundColor: getColor(bg.payload)
-              }
-            }, bg.id);
-          }
-          if (bg.type === "image" && bg.payload) {
-            const {
-              publicUrl,
-              position,
-              repeat = "no-repeat",
-              size = "cover",
-              opacity,
-              parallax
-            } = bg.payload;
-            const backgroundPosition = `${position.x}% ${position.y}%`;
-            if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
-              return /* @__PURE__ */ jsx(Parallax, {
-                strength: parallax,
-                children: (getParallaxProps) => /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
-                  style: {
-                    opacity,
-                    overflow: "hidden"
-                  }
-                })), {
-                  children: /* @__PURE__ */ jsx(NextImage, {
-                    src: publicUrl,
-                    layout: "fill",
-                    objectPosition: backgroundPosition,
-                    objectFit: size
-                  })
-                }))
-              }, bg.id);
-            }
-            return /* @__PURE__ */ jsx(Parallax, {
-              strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container, __spreadValues({}, getParallaxProps({
-                style: {
-                  backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
-                  backgroundPosition,
-                  backgroundRepeat: repeat,
-                  backgroundSize: size,
-                  opacity
-                }
-              })))
-            }, bg.id);
-          }
-          if (bg.type === "gradient" && bg.payload) {
-            const {
-              angle,
-              stops,
-              isRadial
-            } = bg.payload;
-            const gradient = `${getStopsStyle(stops)}`;
-            return /* @__PURE__ */ jsx(Container, {
-              style: {
-                background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
-              }
-            }, bg.id);
-          }
-          if (bg.type === "video" && bg.payload) {
-            const {
-              url,
-              aspectRatio,
-              maskColor,
-              zoom,
-              opacity,
-              parallax
-            } = bg.payload;
-            return /* @__PURE__ */ jsx(Parallax, {
-              strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, getParallaxProps({})), {
-                children: /* @__PURE__ */ jsx(BackgroundVideo, {
-                  url,
-                  zoom,
-                  opacity,
-                  aspectRatio: getAspectRatio(aspectRatio),
-                  maskColor: getColor(maskColor)
-                })
-              }))
-            }, bg.id);
-          }
-          return null;
-        })
-      }, deviceId);
-    })
-  });
-}
-const OuterContainer = styled(motion.div)`
-  position: relative;
-  width: 100%;
-  margin: 0 auto;
-
-  > * {
-    border-radius: inherit;
-    height: inherit;
+  function handleClick(event) {
+    onClick(event);
+    if (event.defaultPrevented)
+      return;
+    if (event.currentTarget.isContentEditable)
+      return event.preventDefault();
+    if (link && link.type === "SCROLL_TO_ELEMENT") {
+      let hash;
+      try {
+        if (href != null)
+          hash = new URL(`http://www.example.com/${href}`).hash;
+      } catch (error) {
+        console.error(`Link received invalid href: ${href}`, error);
+      }
+      if (href != null && hash != null && href === hash) {
+        event.preventDefault();
+        const view = event.view;
+        scrollIntoView(view.document.querySelector(hash), {
+          behavior: "smooth",
+          block
+        });
+        if (view.location.hash !== hash)
+          view.history.pushState({}, "", hash);
+      }
+    }
   }
-
-  > :last-child {
-    position: relative;
+  if (useNextLink && href != null) {
+    return /* @__PURE__ */ jsx(NextLink, {
+      href,
+      children: /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, restOfProps), {
+        ref,
+        target,
+        onClick: handleClick
+      }))
+    });
   }
-`;
-var BackgroundsContainer = forwardRef(function BackgroundsContainer2(_c, ref) {
-  var _d = _c, {
-    backgrounds,
-    children
-  } = _d, restOfProps = __objRest(_d, [
-    "backgrounds",
-    "children"
-  ]);
-  const [handle, setHandle] = useState(null);
-  useImperativeHandle(ref, () => handle, [handle]);
-  return /* @__PURE__ */ jsxs(OuterContainer, __spreadProps(__spreadValues({}, restOfProps), {
-    ref: setHandle,
-    children: [/* @__PURE__ */ jsx(Backgrounds, {
-      backgrounds: useBackgrounds(backgrounds)
-    }), Children.only(children)]
+  return /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    href,
+    target,
+    onClick: handleClick
   }));
 });
-export { BackgroundsContainer as B, useBackgrounds as u };
+export { Link as L };
 //# sourceMappingURL=index.es2.js.map