@drawbridge/components 0.0.78 → 0.1.0

package/dist/bridge/template-subdomain.mjs

@@ -0,0 +1,394 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
+import { icons } from "../icons/social";
+import Link from "next/link";
+import TemplateSubdomainGallery from "./template-subdomain-gallery";
+import TemplateSubdomainLink from "./template-subdomain-link";
+import { safeHref } from "./lib/url";
+import Countdown from "./countdown";
+import FormSubdomainShop from "./form-subdomain-shop";
+import Image from "next/image";
+import SubdomainContent from "./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] = useState(0);
+  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 = 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__ */ 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__ */ 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__ */ 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__ */ jsxs(
+                "div",
+                {
+                  ...{
+                    className: classes.controls.join(" ")
+                  },
+                  children: [
+                    (logo == null ? void 0 : logo.id) && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ...{
+                          className: "relative w-12 aspect-square shrink-0 lg:hidden"
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          Image,
+                          {
+                            ...{
+                              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: cdnSrc(logo, "200x200", logo == null ? void 0 : logo.updatedAt),
+                              unoptimized: true
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ 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__ */ jsx(
+          TemplateSubdomainGallery,
+          {
+            ...{
+              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__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ...{
+                      className: "relative"
+                    },
+                    children: [
+                      render,
+                      /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                              "h1",
+                              {
+                                ...{
+                                  className: "m-0 p-0 !text-3xl",
+                                  style: fonts.heading
+                                },
+                                children: data.headline
+                              }
+                            ) }),
+                            (data == null ? void 0 : data.description) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                ...{
+                                  className: "whitespace-pre-line leading-5 max-w-sm m-auto"
+                                },
+                                children: data.description
+                              }
+                            ) }),
+                            /* @__PURE__ */ 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__ */ jsx(
+                              Countdown,
+                              {
+                                ...{
+                                  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__ */ jsxs(
+                  "div",
+                  {
+                    ...{
+                      className: classes.column.join(" ")
+                    },
+                    children: [
+                      controls,
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ...{
+                            className: classes.content.join(" ")
+                          },
+                          children: /* @__PURE__ */ 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__ */ jsx(
+                                  SubdomainContent,
+                                  {
+                                    ...{
+                                      action: buttons.enter,
+                                      countdown: (data == null ? void 0 : data.countdown) ? /* @__PURE__ */ jsx(
+                                        Countdown,
+                                        {
+                                          ...{
+                                            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 safeHref(url) && /* @__PURE__ */ jsx(
+                                          TemplateSubdomainLink,
+                                          {
+                                            ...{
+                                              className: "w-full rounded-lg pl-1 pr-4 py-1",
+                                              disabled: iframe,
+                                              element: Link,
+                                              href: 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: 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) && icons[icon] && {
+                                                icon: 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__ */ jsx(
+                                        FormSubdomainShop,
+                                        {
+                                          ...{
+                                            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__ */ 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;
+export {
+  template_subdomain_default as default
+};

package/dist/dashboard/accordion.js

@@ -0,0 +1,141 @@
+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 accordion_exports = {};
+__export(accordion_exports, {
+  default: () => accordion_default
+});
+module.exports = __toCommonJS(accordion_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@headlessui/react");
+var import_badge = __toESM(require("../shared/badge"));
+var import_button = __toESM(require("../shared/button"));
+var import_chevron_down = __toESM(require("../icons/chevron-down"));
+var import_chevron_up = __toESM(require("../icons/chevron-up"));
+var import_warning = __toESM(require("../icons/warning"));
+const Accordion = ({
+  badge,
+  className,
+  classNameIcon = "w-5 h-5",
+  classNamePanel = "w-full",
+  children,
+  error,
+  // inset pads the header, for an accordion whose box is its own border ( the brand form ).
+  inset = false,
+  onClick,
+  open = false,
+  svgClose: SvgClose = import_chevron_up.default,
+  svgOpen: SvgOpen = import_chevron_down.default,
+  title
+}) => {
+  const classes = {
+    container: []
+  };
+  if (className) {
+    classes.container.push(className);
+  }
+  ;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react.Disclosure,
+    {
+      ...{
+        defaultOpen: open
+      },
+      children: ({ open: open2 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ...{
+            className: classes.container.join(" ")
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react.DisclosureButton,
+              {
+                ...{
+                  as: import_button.default,
+                  variant: "link",
+                  ...onClick && {
+                    onClick: () => onClick(open2)
+                  }
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "span",
+                  {
+                    ...{
+                      className: "flex items-center justify-between w-full text-left" + (inset ? " p-3" : "")
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "span",
+                        {
+                          ...{
+                            className: "flex items-center space-x-3"
+                          },
+                          children: [
+                            badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_badge.default,
+                              {
+                                ...(badge == null ? void 0 : badge.type) && {
+                                  type: badge.type
+                                },
+                                children: badge == null ? void 0 : badge.text
+                              }
+                            ),
+                            error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_warning.default,
+                              {
+                                ...{
+                                  className: classNameIcon + " text-red-dark"
+                                }
+                              }
+                            ),
+                            open2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SvgClose, { className: classNameIcon }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SvgOpen, { className: classNameIcon })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react.DisclosurePanel,
+              {
+                ...{
+                  className: classNamePanel
+                },
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var accordion_default = Accordion;

package/dist/dashboard/accordion.mjs

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
+import Badge from "../shared/badge";
+import Button from "../shared/button";
+import ChevronDown from "../icons/chevron-down";
+import ChevronUp from "../icons/chevron-up";
+import Warning from "../icons/warning";
+const Accordion = ({
+  badge,
+  className,
+  classNameIcon = "w-5 h-5",
+  classNamePanel = "w-full",
+  children,
+  error,
+  // inset pads the header, for an accordion whose box is its own border ( the brand form ).
+  inset = false,
+  onClick,
+  open = false,
+  svgClose: SvgClose = ChevronUp,
+  svgOpen: SvgOpen = ChevronDown,
+  title
+}) => {
+  const classes = {
+    container: []
+  };
+  if (className) {
+    classes.container.push(className);
+  }
+  ;
+  return /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      ...{
+        defaultOpen: open
+      },
+      children: ({ open: open2 }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...{
+            className: classes.container.join(" ")
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              DisclosureButton,
+              {
+                ...{
+                  as: Button,
+                  variant: "link",
+                  ...onClick && {
+                    onClick: () => onClick(open2)
+                  }
+                },
+                children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    ...{
+                      className: "flex items-center justify-between w-full text-left" + (inset ? " p-3" : "")
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("p", { children: title }),
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          ...{
+                            className: "flex items-center space-x-3"
+                          },
+                          children: [
+                            badge && /* @__PURE__ */ jsx(
+                              Badge,
+                              {
+                                ...(badge == null ? void 0 : badge.type) && {
+                                  type: badge.type
+                                },
+                                children: badge == null ? void 0 : badge.text
+                              }
+                            ),
+                            error && /* @__PURE__ */ jsx(
+                              Warning,
+                              {
+                                ...{
+                                  className: classNameIcon + " text-red-dark"
+                                }
+                              }
+                            ),
+                            open2 ? /* @__PURE__ */ jsx(SvgClose, { className: classNameIcon }) : /* @__PURE__ */ jsx(SvgOpen, { className: classNameIcon })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DisclosurePanel,
+              {
+                ...{
+                  className: classNamePanel
+                },
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var accordion_default = Accordion;
+export {
+  accordion_default as default
+};