@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/card-tile.mjs

@@ -0,0 +1,425 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Badge from "../shared/badge.mjs";
+import Progress from "../shared/progress.mjs";
+import ArrowRight from "../icons/arrow-right.mjs";
+import External from "../icons/external.mjs";
+import Lock from "../icons/lock.mjs";
+import Link from "./link.mjs";
+import Button from "../shared/button.mjs";
+import { capitalize, formatDateString } from "@drawbridge/drawbridge-utils";
+import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
+const classes = {
+  container: [
+    "group relative flex w-full h-full p-6 space-x-6 transition duration-200 ease-in xl:aspect-video 2xl:space-x-12"
+  ],
+  button: [
+    "text-sm flex items-center space-x-2 md:text-base"
+  ],
+  content: [
+    "relative z-10 flex flex-col justify-center",
+    "space-y-1 w-full h-full xl:space-y-3",
+    "items-start text-left"
+  ],
+  description: [
+    "text-sm md:text-base"
+  ],
+  image: {
+    inner: [
+      "block w-full h-full bg-contain bg-center bg-no-repeat bg-center shrink-0 bg-green rounded"
+    ],
+    // A campaign's hero is a photograph filling a portrait slot, so it covers
+    // rather than contains — bg-contain would letterbox it against the green
+    // that the promo tiles' logo artwork is designed to sit on.
+    photo: [
+      "block w-full h-full bg-cover bg-center bg-no-repeat shrink-0 rounded"
+    ],
+    outer: [
+      "aspect-square xl:aspect-[2/3] shrink-0"
+    ]
+  },
+  title: [
+    "text-lg xl:text-2xl"
+  ],
+  wrapper: [
+    "flex-[0_0_100%]"
+  ]
+};
+const CardTile = ({
+  badge,
+  description,
+  link,
+  image,
+  title
+}) => (
+  // A carousel slide: a link Button is full width and never shrinks, as the slide's flex-[0_0_100%] did.
+  /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...{
+        element: Link,
+        href: link == null ? void 0 : link.href,
+        variant: "link"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...{
+            // The whole tile is one link, so the hover lives on the container.
+            className: [...classes.container, "hover:opacity-80"].join(" ")
+          },
+          children: [
+            image && /* @__PURE__ */ jsx(
+              "span",
+              {
+                ...{
+                  className: classes.image.outer.join(" ")
+                },
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...{
+                      className: classes.image.inner.join(" "),
+                      style: {
+                        backgroundImage: "url(" + image + ")"
+                      }
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                ...{
+                  className: classes.content.join(" ")
+                },
+                children: [
+                  badge && /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      ...{
+                        type: "success"
+                      },
+                      children: badge
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      ...{
+                        className: classes.title.join(" ")
+                      },
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      ...{
+                        className: classes.description.join(" ")
+                      },
+                      children: description
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      ...{
+                        className: classes.button.join(" ")
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: link == null ? void 0 : link.title }),
+                        /* @__PURE__ */ jsx(
+                          ArrowRight,
+                          {
+                            ...{
+                              className: "w-4 h-4 shrink-0"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  )
+);
+var card_tile_default = CardTile;
+const tileImage = (page) => {
+  var _a;
+  const hero = ((page == null ? void 0 : page.gallery) || []).find((file) => {
+    var _a2;
+    return (_a2 = file == null ? void 0 : file.sizes) == null ? void 0 : _a2["1080x1920"];
+  });
+  return cdnSrc(hero, "1080x1920", page == null ? void 0 : page.updatedAt) || cdnSrc((_a = page == null ? void 0 : page.images) == null ? void 0 : _a.preview, "1080x1920", page == null ? void 0 : page.updatedAt);
+};
+const tilePercentage = (progress) => (progress == null ? void 0 : progress.total) > 0 ? Math.min(100, Math.round(progress.completed / progress.total * 100)) : 0;
+const tileDate = (date) => date && formatDateString({
+  date,
+  options: {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  }
+});
+const TileRecord = ({
+  description,
+  eyebrow,
+  generating,
+  image,
+  manage,
+  percentage,
+  placeholder,
+  title,
+  view
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...{
+      className: classes.wrapper.join(" ")
+    },
+    children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...{
+          className: classes.container.join(" ")
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...{
+                className: classes.image.outer.join(" ")
+              },
+              children: !generating && image ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...{
+                    className: classes.image.photo.join(" "),
+                    style: {
+                      backgroundImage: "url(" + image + ")"
+                    }
+                  }
+                }
+              ) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...{
+                    className: classes.image.inner.join(" "),
+                    style: {
+                      backgroundImage: "url(" + placeholder + ")"
+                    }
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...{
+                className: classes.content.join(" ")
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    ...{
+                      className: "text-xs text-gray-dark"
+                    },
+                    children: eyebrow
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    ...{
+                      className: classes.title.join(" ")
+                    },
+                    children: title
+                  }
+                ),
+                generating ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...{
+                      // content is a fixed-height flex column at xl (aspect-video); the
+                      // title/description text can't shrink below their min-content
+                      // height, so without shrink-0 the flex algorithm crushes this
+                      // bar — the one child with no text floor — down to nothing.
+                      className: "w-full shrink-0"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Progress,
+                      {
+                        ...{
+                          percentage
+                        }
+                      }
+                    )
+                  }
+                ) : description && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    ...{
+                      // Deliberately not classes.description — that steps up to
+                      // text-base at md, and this line is supporting detail
+                      // under the name rather than body copy.
+                      className: "text-sm"
+                    },
+                    children: description
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    ...{
+                      className: "flex items-center gap-x-3 pt-2"
+                    },
+                    children: [
+                      generating ? /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          ...{
+                            disabled: true,
+                            inline: true,
+                            size: "small"
+                          },
+                          children: "Processing"
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          ...{
+                            element: Link,
+                            href: manage,
+                            inline: true,
+                            size: "small"
+                          },
+                          children: "Manage"
+                        }
+                      ),
+                      (generating || view) && (generating ? /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          ...{
+                            // Icon-only, so it needs an accessible name — the label is
+                            // what a screen reader and the tooltip both read.
+                            "aria-label": "View page",
+                            disabled: true,
+                            icon: Lock,
+                            inline: true,
+                            size: "small",
+                            title: "View page",
+                            variant: "secondary"
+                          }
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          ...{
+                            "aria-label": "View page",
+                            element: "a",
+                            href: view,
+                            icon: External,
+                            inline: true,
+                            rel: "noopener noreferrer",
+                            size: "small",
+                            target: "_blank",
+                            title: "View page",
+                            variant: "secondary"
+                          },
+                          children: "View"
+                        }
+                      ))
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  }
+);
+const TileCampaign = ({
+  campaign,
+  organization,
+  page,
+  updatedAt
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const generating = ((_b = (_a = campaign == null ? void 0 : campaign.process) == null ? void 0 : _a.ai) == null ? void 0 : _b.status) === "pending";
+  const status = (campaign == null ? void 0 : campaign.status) || "drafted";
+  const touched = updatedAt || (campaign == null ? void 0 : campaign.updatedAt);
+  const description = [
+    capitalize(status),
+    (_c = campaign == null ? void 0 : campaign.type) == null ? void 0 : _c.key,
+    tileDate(touched)
+  ].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsx(
+    TileRecord,
+    {
+      ...{
+        description,
+        eyebrow: generating ? "Generating page from" : "Most recently updated",
+        generating,
+        image: tileImage(page),
+        manage: "/organizations/" + organization + "/campaigns/" + (campaign == null ? void 0 : campaign.id),
+        percentage: tilePercentage((_e = (_d = campaign == null ? void 0 : campaign.process) == null ? void 0 : _d.ai) == null ? void 0 : _e.progress),
+        // Same asset, same bg-contain-on-bg-green treatment CardTile's own
+        // default placeholder above already uses for the API's promo-tile
+        // icons — just pointed at drawbridge-api's public/images/. It stands
+        // in whenever there is no photo to show: while the page is still
+        // generating, and for a finished campaign whose page carries neither
+        // a gallery photo nor a preview image — that case dropped the image
+        // slot entirely and left the slide as text against white.
+        placeholder: process.env.NEXT_PUBLIC_API_URI + "/images/campaigns.png",
+        title: generating ? (_f = campaign == null ? void 0 : campaign.source) == null ? void 0 : _f.url : campaign == null ? void 0 : campaign.title,
+        view: (_g = page == null ? void 0 : page.share) == null ? void 0 : _g.url
+      }
+    }
+  );
+};
+const TilePage = ({
+  campaign,
+  organization,
+  page
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const generating = ((_b = (_a = page == null ? void 0 : page.process) == null ? void 0 : _a.ai) == null ? void 0 : _b.status) === "pending";
+  const status = (page == null ? void 0 : page.status) || "drafted";
+  const description = [
+    capitalize(status),
+    tileDate(page == null ? void 0 : page.updatedAt)
+  ].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsx(
+    TileRecord,
+    {
+      ...{
+        description,
+        eyebrow: generating ? "Generating page from" : "Most recently updated",
+        generating,
+        image: tileImage(page),
+        manage: "/organizations/" + organization + "/campaigns/" + campaign + "/pages/" + (page == null ? void 0 : page.id),
+        percentage: tilePercentage((_d = (_c = page == null ? void 0 : page.process) == null ? void 0 : _c.ai) == null ? void 0 : _d.progress),
+        placeholder: process.env.NEXT_PUBLIC_API_URI + "/images/pages.png",
+        // A generating page has no title of its own yet — the pages list
+        // falls back to the scraped url the same way.
+        title: generating ? (_e = page == null ? void 0 : page.source) == null ? void 0 : _e.url : page == null ? void 0 : page.title,
+        view: (_f = page == null ? void 0 : page.share) == null ? void 0 : _f.url
+      }
+    }
+  );
+};
+export {
+  TileCampaign,
+  TilePage,
+  card_tile_default as default
+};

package/dist/dashboard/card-utm.js

@@ -0,0 +1,83 @@
+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 card_utm_exports = {};
+__export(card_utm_exports, {
+  default: () => card_utm_default
+});
+module.exports = __toCommonJS(card_utm_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../shared/lib/helpers");
+var import_card_section = __toESM(require("./card-section"));
+var import_table = require("./table");
+var import_wrapper_gradient = __toESM(require("../wrapper-gradient"));
+const CardUtm = ({ utm }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_card_section.default,
+    {
+      ...{
+        title: "UTM Parameters"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_wrapper_gradient.default,
+        {
+          ...{
+            horizontal: true
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_table.TableContainer, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_table.TableHeader,
+              {
+                ...{
+                  headers: [
+                    { text: "ID" },
+                    { text: "Source" },
+                    { text: "Medium" },
+                    { text: "Campaign" },
+                    { text: "Content" },
+                    { text: "Term" },
+                    { text: "Click ID" }
+                  ]
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableBody, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_table.TableRow, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: (utm == null ? void 0 : utm.id) || "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: (utm == null ? void 0 : utm.source) || "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: (utm == null ? void 0 : utm.medium) || "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: (utm == null ? void 0 : utm.campaign) || "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: (utm == null ? void 0 : utm.content) || "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: (utm == null ? void 0 : utm.term) || "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: (0, import_helpers.clickSummary)(utm == null ? void 0 : utm.click) })
+            ] }) })
+          ] })
+        }
+      )
+    }
+  );
+};
+var card_utm_default = CardUtm;

package/dist/dashboard/card-utm.mjs

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clickSummary } from "../shared/lib/helpers.mjs";
+import CardSection from "./card-section.mjs";
+import { TableContainer, TableHeader, TableBody, TableRow, TableCell } from "./table.mjs";
+import WrapperGradient from "../wrapper-gradient.mjs";
+const CardUtm = ({ utm }) => {
+  return /* @__PURE__ */ jsx(
+    CardSection,
+    {
+      ...{
+        title: "UTM Parameters"
+      },
+      children: /* @__PURE__ */ jsx(
+        WrapperGradient,
+        {
+          ...{
+            horizontal: true
+          },
+          children: /* @__PURE__ */ jsxs(TableContainer, { children: [
+            /* @__PURE__ */ jsx(
+              TableHeader,
+              {
+                ...{
+                  headers: [
+                    { text: "ID" },
+                    { text: "Source" },
+                    { text: "Medium" },
+                    { text: "Campaign" },
+                    { text: "Content" },
+                    { text: "Term" },
+                    { text: "Click ID" }
+                  ]
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+              /* @__PURE__ */ jsx(TableCell, { children: (utm == null ? void 0 : utm.id) || "None" }),
+              /* @__PURE__ */ jsx(TableCell, { children: (utm == null ? void 0 : utm.source) || "None" }),
+              /* @__PURE__ */ jsx(TableCell, { children: (utm == null ? void 0 : utm.medium) || "None" }),
+              /* @__PURE__ */ jsx(TableCell, { children: (utm == null ? void 0 : utm.campaign) || "None" }),
+              /* @__PURE__ */ jsx(TableCell, { children: (utm == null ? void 0 : utm.content) || "None" }),
+              /* @__PURE__ */ jsx(TableCell, { children: (utm == null ? void 0 : utm.term) || "None" }),
+              /* @__PURE__ */ jsx(TableCell, { children: clickSummary(utm == null ? void 0 : utm.click) })
+            ] }) })
+          ] })
+        }
+      )
+    }
+  );
+};
+var card_utm_default = CardUtm;
+export {
+  card_utm_default as default
+};

package/dist/dashboard/carousel-tiles.js

@@ -0,0 +1,64 @@
+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 carousel_tiles_exports = {};
+__export(carousel_tiles_exports, {
+  default: () => carousel_tiles_default
+});
+module.exports = __toCommonJS(carousel_tiles_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_carousel = __toESM(require("../shared/carousel"));
+var import_card_tile = __toESM(require("./card-tile"));
+const CarouselTiles = ({
+  items = []
+}) => {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: "relative w-full bg-white overflow-hidden rounded border border-gray"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_carousel.default,
+        {
+          ...{
+            dots: { justify: "end", overlay: true },
+            slides: items.map(({ element: Element = import_card_tile.default, ...props }, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              Element,
+              {
+                ...props
+              },
+              "tile--" + key
+            ))
+          }
+        }
+      )
+    }
+  );
+};
+var carousel_tiles_default = CarouselTiles;

package/dist/dashboard/carousel-tiles.mjs

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import Carousel from "../shared/carousel.mjs";
+import CardTile from "./card-tile.mjs";
+const CarouselTiles = ({
+  items = []
+}) => {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "relative w-full bg-white overflow-hidden rounded border border-gray"
+      },
+      children: /* @__PURE__ */ jsx(
+        Carousel,
+        {
+          ...{
+            dots: { justify: "end", overlay: true },
+            slides: items.map(({ element: Element = CardTile, ...props }, key) => /* @__PURE__ */ jsx(
+              Element,
+              {
+                ...props
+              },
+              "tile--" + key
+            ))
+          }
+        }
+      )
+    }
+  );
+};
+var carousel_tiles_default = CarouselTiles;
+export {
+  carousel_tiles_default as default
+};