@drawbridge/components 0.0.78 → 0.1.0

package/dist/product.mjs

@@ -1,15 +1,379 @@
 "use client";
-import {
-  product_default
-} from "./chunk-DPFPNFJT.mjs";
-import "./chunk-PT7UR6AO.mjs";
-import "./chunk-7GRIGQDC.mjs";
-import "./chunk-FYA7EAMR.mjs";
-import "./chunk-2ZYGRSSA.mjs";
-import "./chunk-WUZE3BIA.mjs";
-import "./chunk-KSCQQUFC.mjs";
-import "./chunk-Q3UIVGPQ.mjs";
-import "./chunk-6F23WKP2.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { cdnShopify } from "@drawbridge/drawbridge-utils/cdn";
+import { formatCurrency } from "@drawbridge/drawbridge-utils";
+import InputGroup from "./input-group";
+import InputSelect from "./input-select";
+import WrapperGradient from "./wrapper-gradient";
+import Loader from "./icons/loader";
+import Button from "./shared/button";
+import { buttonStyle, headerStyle, inputStyle } from "./styles";
+const DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    ...{
+      alt,
+      className,
+      src,
+      style
+    }
+  }
+);
+const Product = ({
+  action = null,
+  addToCart = true,
+  buttonFontSize,
+  disabled = false,
+  errors = {},
+  header,
+  ImageComponent = DefaultImage,
+  onAdd = () => {
+  },
+  onBuy = () => {
+  },
+  onVariantChange = () => {
+  },
+  product,
+  style = {},
+  variant
+}) => {
+  var _a, _b, _c;
+  const resolved = {
+    ...style,
+    background: {
+      ...style == null ? void 0 : style.background,
+      color: ((_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) || { hex: "#FFFFFF", rgb: "rgb( 255, 255, 255 )" }
+    },
+    text: {
+      ...style == null ? void 0 : style.text,
+      color: ((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) || { hex: "#000000", rgb: "rgb( 0, 0, 0 )" }
+    }
+  };
+  const imageRadius = ((_c = resolved == null ? void 0 : resolved.image) == null ? void 0 : _c.radius) != null ? resolved.image.radius + "px" : "12px";
+  const available = useMemo(
+    () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
+    [product]
+  );
+  const [activeImage, setActiveImage] = useState(0);
+  const [emblaRef, emblaApi] = useEmblaCarousel();
+  const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
+  const images = useMemo(
+    () => {
+      const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
+      const result = [];
+      const seen = /* @__PURE__ */ new Set();
+      if (product == null ? void 0 : product.image) {
+        seen.add(product.image);
+        result.push({
+          src: product.image,
+          variant: null
+        });
+      }
+      for (const v of variants) {
+        if (v.image && !seen.has(v.image)) {
+          seen.add(v.image);
+          result.push({
+            src: v.image,
+            variant: v
+          });
+        }
+      }
+      return result;
+    },
+    [product]
+  );
+  useEffect(
+    () => {
+      if (!emblaApi) return;
+      const onSelect = () => {
+        const idx = emblaApi.selectedScrollSnap();
+        setActiveImage(idx);
+        const img = images[idx];
+        if (img == null ? void 0 : img.variant) onVariantChange(img.variant.id);
+      };
+      emblaApi.on("select", onSelect);
+      return () => emblaApi.off("select", onSelect);
+    },
+    [emblaApi, images, onVariantChange]
+  );
+  const handleVariant = (value) => {
+    onVariantChange(value);
+    const v = available.find((x) => x.id === value);
+    if (!(v == null ? void 0 : v.image)) return;
+    const idx = images.findIndex((img) => img.src === v.image);
+    if (idx >= 0) {
+      setActiveImage(idx);
+      emblaApi == null ? void 0 : emblaApi.scrollTo(idx);
+    }
+    ;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "space-y-6",
+        style: {
+          backgroundColor: resolved.background.color.rgb,
+          color: resolved.text.color.rgb
+        }
+      },
+      children: [
+        header,
+        images.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "flex items-center " + (images.length > 1 ? "pr-12" : ""),
+              style: {
+                height: "12rem"
+              }
+            },
+            children: [
+              images.length > 1 && /* @__PURE__ */ jsx(
+                WrapperGradient,
+                {
+                  ...{
+                    classNameScroll: "flex flex-col w-12 h-48 space-y-3",
+                    color: resolved.background.color.rgb
+                  },
+                  children: images.map(({ src }, key) => /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...{
+                        onClick: () => {
+                          setActiveImage(key);
+                          emblaApi == null ? void 0 : emblaApi.scrollTo(key);
+                        },
+                        variant: "link",
+                        inline: true
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          ...{
+                            // Active state is conveyed purely by a dimmed image (no border).
+                            className: "block relative w-12 h-12 overflow-hidden",
+                            style: {
+                              borderRadius: imageRadius
+                            }
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            ImageComponent,
+                            {
+                              ...{
+                                alt: product.title + " thumbnail " + key,
+                                className: "object-cover",
+                                fill: true,
+                                sizes: "48px",
+                                src: cdnShopify(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
+                                // Always set opacity + transition so switching the active
+                                // thumbnail animates the fade in both directions.
+                                style: {
+                                  opacity: activeImage === key ? 0.6 : 1,
+                                  transition: "opacity 300ms ease"
+                                },
+                                unoptimized: true
+                              }
+                            }
+                          )
+                        }
+                      )
+                    },
+                    "thumbnail-" + key
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...{
+                    // Dimensions are inline rather than Tailwind size utilities:
+                    // those sizes live only in this package's dist, and a consuming
+                    // app's Tailwind scan of node_modules can lag and drop them,
+                    // silently collapsing the carousel. Inline styles are immune.
+                    className: "overflow-hidden m-auto",
+                    ref: emblaRef,
+                    style: {
+                      borderRadius: imageRadius,
+                      width: "12rem",
+                      height: "12rem"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...{
+                        className: "flex",
+                        style: {
+                          height: "100%"
+                        }
+                      },
+                      children: images.map(({ src }, key) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ...{
+                            className: "min-w-0 relative bg-gray-100",
+                            style: {
+                              flex: "0 0 100%",
+                              height: "100%"
+                            }
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            ImageComponent,
+                            {
+                              ...{
+                                alt: product.title + " image " + key,
+                                className: "object-cover",
+                                fill: true,
+                                sizes: "192px",
+                                src: cdnShopify(src, "400x400", product == null ? void 0 : product.updatedAt) || src,
+                                unoptimized: true
+                              }
+                            }
+                          )
+                        },
+                        "image-" + key
+                      ))
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "text-center space-y-2"
+            },
+            children: [
+              (product == null ? void 0 : product.title) && /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  ...{
+                    className: "max-w-80 mx-auto",
+                    style: headerStyle(style)
+                  },
+                  children: product == null ? void 0 : product.title
+                }
+              ),
+              !available.length ? /* @__PURE__ */ jsx("p", { children: "Unavailable" }) : (selectedVariant == null ? void 0 : selectedVariant.price) && /* @__PURE__ */ jsx("p", { children: formatCurrency({
+                code: selectedVariant.currency,
+                display: "parts",
+                value: selectedVariant.price
+              }) }),
+              (product == null ? void 0 : product.description) && /* @__PURE__ */ jsx(
+                WrapperGradient,
+                {
+                  ...{
+                    classNameScroll: "max-h-[4.5em]",
+                    color: resolved.background.color.rgb
+                  },
+                  children: /* @__PURE__ */ jsx("p", { children: product.description })
+                }
+              )
+            ]
+          }
+        ),
+        available.length > 1 && /* @__PURE__ */ jsx(
+          InputGroup,
+          {
+            ...{
+              error: errors == null ? void 0 : errors.variant,
+              input: /* @__PURE__ */ jsx(
+                InputSelect,
+                {
+                  ...{
+                    disabled,
+                    onChange: handleVariant,
+                    options: available.map((v) => ({
+                      label: v.title,
+                      value: v.id
+                    })),
+                    style: resolved,
+                    value: variant || ""
+                  }
+                }
+              ),
+              style: resolved
+            }
+          }
+        ),
+        available.length > 0 && /* @__PURE__ */ jsx(
+          InputGroup,
+          {
+            ...{
+              error: errors == null ? void 0 : errors.root,
+              input: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ...{
+                    className: addToCart ? "grid grid-cols-2 gap-5" : "",
+                    // The buttons take a fixed size from here (the ad card's is 16px).
+                    ...buttonFontSize && {
+                      style: {
+                        fontSize: buttonFontSize
+                      }
+                    }
+                  },
+                  children: [
+                    addToCart && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        ...{
+                          disabled: disabled || Boolean(action),
+                          onClick: onAdd,
+                          variant: "link"
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            ...{
+                              className: "flex items-center justify-center w-full border py-3 px-4 rounded",
+                              style: {
+                                ...inputStyle(resolved),
+                                borderRadius: buttonStyle(resolved).borderRadius
+                              }
+                            },
+                            children: action === "add" ? /* @__PURE__ */ jsx(
+                              Loader,
+                              {
+                                ...{
+                                  className: "w-6 h-6 animate-spin"
+                                }
+                              }
+                            ) : "Add to cart"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        ...{
+                          disabled: disabled || Boolean(action),
+                          loading: action === "buy",
+                          onClick: onBuy,
+                          style: resolved
+                        },
+                        children: "Buy now"
+                      }
+                    )
+                  ]
+                }
+              ),
+              style: resolved
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var product_default = Product;
 export {
   product_default as default
 };

package/dist/provider-font.js

@@ -15,35 +15,19 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// components/provider-font.js
 var provider_font_exports = {};
 __export(provider_font_exports, {
   default: () => provider_font_default
 });
 module.exports = __toCommonJS(provider_font_exports);
-var import_react = require("react");
-
-// components/styles.js
-var DEFAULT_FAMILY = "Roboto Flex";
-var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
-var toFontWeight = (variant) => {
-  var _a;
-  if (!variant) return void 0;
-  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
-  if (variant.includes("regular")) return "normal";
-  return variant;
-};
-var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
-
-// components/provider-font.js
 var import_jsx_runtime = require("react/jsx-runtime");
-var defaults = {
+var import_react = require("react");
+var import_styles = require("./styles");
+const defaults = {
   family: "Roboto Flex",
   transform: "none"
 };
-var ProviderFont = (0, import_react.memo)(({
+const ProviderFont = (0, import_react.memo)(({
   body,
   children,
   heading,
@@ -59,26 +43,26 @@ var ProviderFont = (0, import_react.memo)(({
       ];
       const fonts2 = {
         body: {
-          fontFamily: toFontFamily(bodyFamily),
+          fontFamily: (0, import_styles.toFontFamily)(bodyFamily),
           textTransform: (body == null ? void 0 : body.transform) || defaults.transform
         },
         heading: {
-          fontFamily: toFontFamily(headingFamily),
+          fontFamily: (0, import_styles.toFontFamily)(headingFamily),
           textTransform: (heading == null ? void 0 : heading.transform) || defaults.transform
         }
       };
       if (body == null ? void 0 : body.weight) {
         url2.push(":" + body.weight);
-        fonts2.body.fontWeight = toFontWeight(body.weight);
-        fonts2.body.fontStyle = toFontStyle(body.weight);
+        fonts2.body.fontWeight = (0, import_styles.toFontWeight)(body.weight);
+        fonts2.body.fontStyle = (0, import_styles.toFontStyle)(body.weight);
       }
       if (!same) {
         url2.push("%7C" + headingFamily.replace(/ /g, "+"));
       }
       if (heading == null ? void 0 : heading.weight) {
         url2.push((same ? "," : ":") + heading.weight);
-        fonts2.heading.fontWeight = toFontWeight(heading.weight);
-        fonts2.heading.fontStyle = toFontStyle(heading.weight);
+        fonts2.heading.fontWeight = (0, import_styles.toFontWeight)(heading.weight);
+        fonts2.heading.fontStyle = (0, import_styles.toFontStyle)(heading.weight);
       }
       url2.push("&display=swap");
       return { url: url2, fonts: fonts2 };

package/dist/provider-font.mjs

@@ -1,17 +1,11 @@
-import {
-  toFontFamily,
-  toFontStyle,
-  toFontWeight
-} from "./chunk-6F23WKP2.mjs";
-
-// components/provider-font.js
-import { Fragment, memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var defaults = {
+import { Fragment, memo, useMemo } from "react";
+import { toFontFamily, toFontStyle, toFontWeight } from "./styles";
+const defaults = {
   family: "Roboto Flex",
   transform: "none"
 };
-var ProviderFont = memo(({
+const ProviderFont = memo(({
   body,
   children,
   heading,

package/dist/shared/address-lines.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var address_lines_exports = {};
+__export(address_lines_exports, {
+  default: () => address_lines_default
+});
+module.exports = __toCommonJS(address_lines_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const AddressLines = ({
+  address,
+  address2,
+  city,
+  country,
+  postal,
+  province
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      ...{
+        className: "block"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+          address,
+          " ",
+          address2
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "p",
+          {
+            ...{
+              className: "capitalize"
+            },
+            children: [
+              city,
+              ", ",
+              province
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "p",
+          {
+            ...{
+              className: "capitalize"
+            },
+            children: [
+              country,
+              ", ",
+              postal
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var address_lines_default = AddressLines;

package/dist/shared/address-lines.mjs

@@ -0,0 +1,55 @@
+import { jsxs } from "react/jsx-runtime";
+const AddressLines = ({
+  address,
+  address2,
+  city,
+  country,
+  postal,
+  province
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...{
+        className: "block"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("p", { children: [
+          address,
+          " ",
+          address2
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "p",
+          {
+            ...{
+              className: "capitalize"
+            },
+            children: [
+              city,
+              ", ",
+              province
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "p",
+          {
+            ...{
+              className: "capitalize"
+            },
+            children: [
+              country,
+              ", ",
+              postal
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var address_lines_default = AddressLines;
+export {
+  address_lines_default as default
+};