@drawbridge/components 0.0.78 → 0.1.0

package/dist/bridge/template-subdomain-link.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import Button from "../shared/button";
+const TemplateSubdomainLink = ({
+  element: Element,
+  className = "py-4 pr-3",
+  icon: Icon,
+  image,
+  buttonWithImageHeight,
+  // style here is a CSS object, not the brand object; renamed at cutover (spec rule 3)
+  style,
+  svg: Svg,
+  text,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...{
+        element: Element,
+        ...rest.target === "_blank" && {
+          "aria-label": text + " (Opens in a new tab)"
+        },
+        variant: "link",
+        ...rest
+      },
+      children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...{
+            className: "flex w-full items-center " + (Svg ? "justify-between " : "") + className,
+            style
+          },
+          children: [
+            (image || Icon || buttonWithImageHeight) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className: image ? "relative w-10 h-10 overflow-hidden shrink-0" : Icon ? "relative w-10 h-10 overflow-hidden shrink-0 flex items-center justify-center" : "relative w-3 h-10 overflow-hidden shrink-0",
+                  style: {
+                    borderRadius: style == null ? void 0 : style.borderRadius
+                  }
+                },
+                children: image ? /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    ...{
+                      alt: text,
+                      className: "object-cover",
+                      fill: true,
+                      sizes: "40px",
+                      src: image,
+                      unoptimized: true
+                    }
+                  }
+                ) : (
+                  // platform glyph fallback — fill:currentColor, so it inherits the
+                  // button text color from the Element's style and follows restyles
+                  Icon && /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      ...{
+                        "aria-hidden": true,
+                        className: "w-[22px] h-[22px]"
+                      }
+                    }
+                  )
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                ...{
+                  className: (image || buttonWithImageHeight) && !Svg ? "flex-1 text-center" : ""
+                },
+                children: text
+              }
+            ),
+            Svg ? /* @__PURE__ */ jsx(
+              Svg,
+              {
+                ...{
+                  className: "w-4 h-4"
+                }
+              }
+            ) : (image || Icon || buttonWithImageHeight) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className: (image || Icon ? "w-7" : "w-0") + " h-10 shrink-0"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var template_subdomain_link_default = TemplateSubdomainLink;
+export {
+  template_subdomain_link_default as default
+};

package/dist/bridge/template-subdomain.js

@@ -0,0 +1,423 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var template_subdomain_exports = {};
+__export(template_subdomain_exports, {
+  default: () => template_subdomain_default
+});
+module.exports = __toCommonJS(template_subdomain_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_cdn = require("@drawbridge/drawbridge-utils/cdn");
+var import_social = require("../icons/social");
+var import_link = __toESM(require("next/link"));
+var import_template_subdomain_gallery = __toESM(require("./template-subdomain-gallery"));
+var import_template_subdomain_link = __toESM(require("./template-subdomain-link"));
+var import_url = require("./lib/url");
+var import_countdown = __toESM(require("./countdown"));
+var import_form_subdomain_shop = __toESM(require("./form-subdomain-shop"));
+var import_image = __toESM(require("next/image"));
+var import_subdomain_content = __toESM(require("./subdomain-content"));
+const TemplateSubdomain = ({
+  buttons,
+  cart,
+  data,
+  fonts,
+  iframe,
+  modal,
+  preview,
+  setModal,
+  setPanel,
+  style,
+  tracking
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const [scrollProgress, setScrollProgress] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    let ticking = false;
+    const updateScroll = () => {
+      setScrollProgress(Math.min(window.scrollY / 56, 1));
+    };
+    const onScroll = () => {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(() => {
+        updateScroll();
+        ticking = false;
+      });
+    };
+    updateScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  const gallery = (data == null ? void 0 : data.gallery) || [];
+  const logo = (_a = data == null ? void 0 : data.images) == null ? void 0 : _a.logo;
+  const opacity = (_d = (_c = (_b = style == null ? void 0 : style.background) == null ? void 0 : _b.color) == null ? void 0 : _c.rgb) == null ? void 0 : _d.replace(")", ",.9)");
+  const controlPaddingTop = 56 - 32 * scrollProgress;
+  const controlBackgroundOpacity = 0.8 * scrollProgress;
+  const classes = (0, import_react.useMemo)(
+    () => ({
+      column: [
+        "z-10 relative flex flex-col items-center w-full",
+        "lg:float-right lg:h-dvh lg:flex-row",
+        "transition ease-in-out",
+        gallery.length > 0 ? "lg:w-2/3 lg:justify-center" : "min-h-dvh justify-center",
+        ...modal ? ["blur-[8px]"] : []
+      ],
+      content: [
+        "flex flex-col items-center w-full lg:h-full",
+        "transition duration-300 ease-in-out",
+        "data-[closed]:opacity-0 data-[closed]:lg:translate-y-10"
+      ],
+      controls: [
+        "flex items-center w-full px-5 lg:px-5 lg:justify-center lg:space-x-2",
+        (logo == null ? void 0 : logo.id) ? "justify-between" : "justify-end",
+        gallery.length > 1 ? "pt-[var(--controls-padding-top)] lg:pt-6" : "pt-6"
+      ]
+    }),
+    [gallery.length, logo == null ? void 0 : logo.id, modal]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: [
+          "relative w-full min-h-dvh",
+          ...((_e = data == null ? void 0 : data.links) == null ? void 0 : _e.length) > 0 || ((_f = data == null ? void 0 : data.products) == null ? void 0 : _f.length) > 0 ? ["space-y-4 lg:space-y-0"] : [""]
+        ].join(" "),
+        style: {
+          ...fonts.body,
+          ...(style == null ? void 0 : style.background) && {
+            backgroundColor: (_h = (_g = style == null ? void 0 : style.background) == null ? void 0 : _g.color) == null ? void 0 : _h.rgb
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ...{
+              className: "z-30 fixed top-0 left-0 right-1 lg:left-auto lg:right-1.5 lg:w-auto",
+              style: {
+                ...gallery.length > 1 && {
+                  "--controls-padding-top": controlPaddingTop + "px"
+                }
+              }
+            },
+            children: [
+              controlBackgroundOpacity > 0 && (style == null ? void 0 : style.background) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  ...{
+                    className: "lg:hidden absolute inset-0",
+                    style: {
+                      background: "linear-gradient(to bottom, " + ((_j = (_i = style.background.color) == null ? void 0 : _i.rgb) == null ? void 0 : _j.replace(")", ", " + controlBackgroundOpacity + ")")) + ", transparent)"
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  ...{
+                    className: classes.controls.join(" ")
+                  },
+                  children: [
+                    (logo == null ? void 0 : logo.id) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        ...{
+                          className: "relative w-12 aspect-square shrink-0 lg:hidden"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_image.default,
+                          {
+                            ...{
+                              alt: data.headline + " - logo - " + (logo == null ? void 0 : logo.filename),
+                              className: "object-cover object-center rounded-full overflow-hidden ml-1 lg:ml-0",
+                              fill: true,
+                              priority: true,
+                              sizes: "(min-width: 1024px) 64px, 48px",
+                              src: (0, import_cdn.cdnSrc)(logo, "200x200", logo == null ? void 0 : logo.updatedAt),
+                              unoptimized: true
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        ...{
+                          className: "flex items-center space-x-2 z-30"
+                        },
+                        children: [
+                          ((_k = data == null ? void 0 : data.products) == null ? void 0 : _k.length) > 0 && buttons.shop("cart"),
+                          buttons.menu
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_template_subdomain_gallery.default,
+          {
+            ...{
+              compact: ((_m = data == null ? void 0 : data.links) == null ? void 0 : _m.length) > 0 || ((_n = data == null ? void 0 : data.products) == null ? void 0 : _n.length) > 0,
+              gallery,
+              modal,
+              preview,
+              style
+            },
+            children: ({
+              controls,
+              render
+            }) => {
+              var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    ...{
+                      className: "relative"
+                    },
+                    children: [
+                      render,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          ...{
+                            className: "lg:hidden absolute bottom-2 left-0 w-full px-6 pb-4 pt-12 lg:pt-20 text-center z-20 space-y-4",
+                            style: {
+                              ...(style == null ? void 0 : style.text) && {
+                                color: (_a2 = style.text.color) == null ? void 0 : _a2.rgb
+                              },
+                              ...(style == null ? void 0 : style.background) && {
+                                background: "linear-gradient(to top, " + ((_c2 = (_b2 = style.background.color) == null ? void 0 : _b2.rgb) == null ? void 0 : _c2.replace(")", ",.85)")) + " 55%, transparent)"
+                              }
+                            }
+                          },
+                          children: [
+                            (data == null ? void 0 : data.headline) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "h1",
+                              {
+                                ...{
+                                  className: "m-0 p-0 !text-3xl",
+                                  style: fonts.heading
+                                },
+                                children: data.headline
+                              }
+                            ) }),
+                            (data == null ? void 0 : data.description) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "p",
+                              {
+                                ...{
+                                  className: "whitespace-pre-line leading-5 max-w-sm m-auto"
+                                },
+                                children: data.description
+                              }
+                            ) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "div",
+                              {
+                                ...{
+                                  // Always 8px under the button: a countdown that has ended renders nothing.
+                                  className: "m-auto pb-2 lg:max-w-xl lg:text-lg"
+                                },
+                                children: buttons.enter
+                              }
+                            ),
+                            data.countdown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_countdown.default,
+                              {
+                                ...{
+                                  className: "h-4 mt-1.5",
+                                  date: data.countdown
+                                }
+                              },
+                              data.countdown
+                            ),
+                            !((_d2 = data == null ? void 0 : data.links) == null ? void 0 : _d2.length) && !((_e2 = data == null ? void 0 : data.products) == null ? void 0 : _e2.length) && buttons.brandingCompact
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    ...{
+                      className: classes.column.join(" ")
+                    },
+                    children: [
+                      controls,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          ...{
+                            className: classes.content.join(" ")
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "div",
+                            {
+                              ...{
+                                className: [
+                                  "flex flex-col self-center items-center w-full lg:h-full ",
+                                  ...((_f2 = data == null ? void 0 : data.products) == null ? void 0 : _f2.length) > 0 || ((_g2 = data == null ? void 0 : data.links) == null ? void 0 : _g2.length) > 0 ? [gallery.length > 0 ? "lg:pt-20" : "pt-10"] : []
+                                ].join(" ")
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  import_subdomain_content.default,
+                                  {
+                                    ...{
+                                      action: buttons.enter,
+                                      countdown: (data == null ? void 0 : data.countdown) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                        import_countdown.default,
+                                        {
+                                          ...{
+                                            className: "h-4 mt-4",
+                                            date: data.countdown
+                                          }
+                                        },
+                                        data.countdown
+                                      ) : null,
+                                      data,
+                                      fonts,
+                                      gallery,
+                                      linksSection: ((data == null ? void 0 : data.links) || []).length > 0 ? data.links.map(({ file, icon, slug, title, url }, key) => {
+                                        var _a3, _b3, _c3, _d3, _e3, _f3, _g3, _h3, _i3, _j3, _k3, _l3, _m3, _n3, _o, _p, _q, _r;
+                                        return (0, import_url.safeHref)(url) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          import_template_subdomain_link.default,
+                                          {
+                                            ...{
+                                              className: "w-full rounded-lg pl-1 pr-4 py-1",
+                                              disabled: iframe,
+                                              element: import_link.default,
+                                              href: (0, import_url.safeHref)(url),
+                                              buttonWithImageHeight: true,
+                                              // Bounded variant, never the raw original: the button
+                                              // renders ~40px, but sizes.original is the unbounded
+                                              // upload — one multi-MB link image can torpedo the
+                                              // page. cdnSrc returns undefined without updatedAt,
+                                              // so the original stays as the last-resort fallback.
+                                              ...((_a3 = file == null ? void 0 : file.sizes) == null ? void 0 : _a3.original) && {
+                                                image: (0, import_cdn.cdnSrc)(file, "200x200", file == null ? void 0 : file.updatedAt) || file.sizes.original
+                                              },
+                                              // image > icon > nothing: the platform glyph only
+                                              // fills the slot when no image asset is set
+                                              ...!((_b3 = file == null ? void 0 : file.sizes) == null ? void 0 : _b3.original) && import_social.icons[icon] && {
+                                                icon: import_social.icons[icon]
+                                              },
+                                              ...slug && {
+                                                onClick: () => {
+                                                  tracking.track({
+                                                    name: "link-" + slug
+                                                  });
+                                                }
+                                              },
+                                              style: {
+                                                WebkitTouchCallout: "none",
+                                                ...style && {
+                                                  backgroundColor: ((_e3 = (_d3 = (_c3 = style == null ? void 0 : style.button) == null ? void 0 : _c3.background) == null ? void 0 : _d3.color) == null ? void 0 : _e3.rgb) || ((_g3 = (_f3 = style == null ? void 0 : style.text) == null ? void 0 : _f3.color) == null ? void 0 : _g3.rgb),
+                                                  borderColor: ((_j3 = (_i3 = (_h3 = style == null ? void 0 : style.button) == null ? void 0 : _h3.background) == null ? void 0 : _i3.color) == null ? void 0 : _j3.rgb) || ((_l3 = (_k3 = style == null ? void 0 : style.text) == null ? void 0 : _k3.color) == null ? void 0 : _l3.rgb),
+                                                  borderRadius: ((_m3 = style == null ? void 0 : style.button) == null ? void 0 : _m3.radius) != null ? style.button.radius / 4 + "px" : void 0,
+                                                  color: ((_p = (_o = (_n3 = style == null ? void 0 : style.button) == null ? void 0 : _n3.text) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb) || ((_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.rgb)
+                                                }
+                                              },
+                                              target: "_blank",
+                                              text: title
+                                            }
+                                          },
+                                          key
+                                        );
+                                      }) : null,
+                                      productsSection: ((data == null ? void 0 : data.products) || []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                        import_form_subdomain_shop.default,
+                                        {
+                                          ...{
+                                            cart,
+                                            columns: ((_h2 = data == null ? void 0 : data.shop) == null ? void 0 : _h2.productColumns) || 2,
+                                            onProductClick: (item) => {
+                                              var _a3;
+                                              tracking.track({
+                                                name: "product-" + ((_a3 = item.title) == null ? void 0 : _a3.toLowerCase().replace(/\s+/g, "-"))
+                                              });
+                                              setPanel({
+                                                name: "product",
+                                                data: {
+                                                  product: item
+                                                }
+                                              });
+                                              setModal(true);
+                                            },
+                                            products: data == null ? void 0 : data.products,
+                                            style
+                                          }
+                                        }
+                                      ) : null,
+                                      style
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "div",
+                                  {
+                                    ...{
+                                      className: ["w-full", ...((_i2 = data == null ? void 0 : data.links) == null ? void 0 : _i2.length) > 0 || ((_j2 = data == null ? void 0 : data.products) == null ? void 0 : _j2.length) > 0 ? ["py-10 lg:py-[4.5rem]"] : [], ...gallery.length === 0 ? [" py-5 lg:py-10"] : [], ...gallery.length > 0 && !((_k2 = data == null ? void 0 : data.links) == null ? void 0 : _k2.length) && !((_l2 = data == null ? void 0 : data.products) == null ? void 0 : _l2.length) ? ["hidden lg:block lg:pb-5"] : []].join(" "),
+                                      style: {
+                                        background: opacity,
+                                        color: (_n2 = (_m2 = style == null ? void 0 : style.text) == null ? void 0 : _m2.color) == null ? void 0 : _n2.rgb
+                                      }
+                                    },
+                                    children: buttons.branding
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] });
+            }
+          },
+          (_l = data == null ? void 0 : data.gallery) == null ? void 0 : _l.map((item) => item.id).join(",")
+        )
+      ]
+    }
+  );
+};
+var template_subdomain_default = TemplateSubdomain;