@campphillip/widgets 4.0.4 → 4.0.8

package/README.md

@@ -0,0 +1,35 @@
+# @campphillip/widgets
+
+Web components for embedding Camp Phillip content.
+
+## Quick Start
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@campphillip/widgets@latest/dist/widgets.css">
+<div id="camp-events"></div>
+<script type="module" src="https://unpkg.com/@campphillip/widgets@latest/dist/events.widget.js"></script>
+```
+
+## Available Widgets
+
+| Widget | Container ID | Script |
+|--------|--------------|--------|
+| Events | `camp-events` | `events.widget.js` |
+| Board Events | `camp-board-events` | `board-events.widget.js` |
+| Calendar | `camp-calendar` | `calendar.widget.js` |
+| Banners | `camp-banners` | `banners.widget.js` |
+| Categories | `camp-categories` | `categories.widget.js` |
+| Rates | `camp-rates` | `rates.widget.js` |
+
+## Local Dev
+
+```sh
+npm run dev
+```
+
+## Local Testing
+
+```sh
+npm run build
+npm run serve
+```

package/dist/EventApiContainer.js

@@ -0,0 +1,71 @@
+import { j as t, r as o } from "./vendor.js";
+import { E as c, f as h, a as d } from "./EventContainer.js";
+const u = () => /* @__PURE__ */ t.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "feather feather-calendar",
+    children: [
+      /* @__PURE__ */ t.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+      /* @__PURE__ */ t.jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+      /* @__PURE__ */ t.jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+      /* @__PURE__ */ t.jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+    ]
+  }
+), f = "_calendarButton_1m4jh_1", v = {
+  calendarButton: f
+}, j = ({
+  events: e,
+  loading: n
+}) => {
+  const s = /* @__PURE__ */ t.jsxs("a", { className: v.calendarButton, href: "/calendar", children: [
+    /* @__PURE__ */ t.jsx(u, {}),
+    "Check out our calendar"
+  ] });
+  return /* @__PURE__ */ t.jsx(
+    c,
+    {
+      events: e,
+      loading: n,
+      title: "What's going on at Camp?",
+      headerActions: s
+    }
+  );
+}, E = ({
+  events: e,
+  loading: n
+}) => /* @__PURE__ */ t.jsx(
+  c,
+  {
+    events: e,
+    loading: n,
+    title: "Upcoming Board Events"
+  }
+), g = ({ type: e }) => {
+  const [n, s] = o.useState([]), [a, i] = o.useState(!0);
+  return o.useEffect(() => {
+    async function l() {
+      const x = e === "events" ? h : d;
+      try {
+        const r = await x();
+        s(r);
+      } catch (r) {
+        console.error(r);
+      } finally {
+        i(!1);
+      }
+    }
+    l();
+  }, [e]), e === "events" ? /* @__PURE__ */ t.jsx(j, { events: n, loading: a }) : /* @__PURE__ */ t.jsx(E, { events: n, loading: a });
+};
+export {
+  g as E
+};

package/dist/EventContainer.js

@@ -0,0 +1,171 @@
+import { s as j, u as N } from "./sanityClient.js";
+import { j as e, S as g, a as h, b as p, P as S, i as q, f as x, d as D, R as M, r as B } from "./vendor.js";
+const V = async () => await j.fetch(`*[_type == 'event']  | order(startDate asc)
+    {
+        name,
+        image,
+        imageType,
+        startDate,
+        endDate,
+        shortDescription,
+        buttons,
+        isSummerCampEvent
+    }`), X = async () => await j.fetch(`*[_type == 'board-event']  | order(startDate asc)
+    {
+        name,
+        image,
+        imageType,
+        startDate,
+        endDate,
+        shortDescription,
+        buttons,
+        isSummerCampEvent
+    }`), E = "_eventCard_17x4q_1", b = "_eventCardBody_17x4q_13", T = "_image_17x4q_27", W = "_square_17x4q_34", $ = "_eventCardTitle_17x4q_39", G = "_eventCardDate_17x4q_46", k = "_eventCardDescription_17x4q_51", H = "_eventButtons_17x4q_55", w = "_eventButton_17x4q_55", I = "_summerCamp_17x4q_140", n = {
+  eventCard: E,
+  eventCardBody: b,
+  image: T,
+  square: W,
+  eventCardTitle: $,
+  eventCardDate: G,
+  eventCardDescription: k,
+  eventButtons: H,
+  eventButton: w,
+  summerCamp: I
+}, C = ({
+  name: t,
+  image: a,
+  imageType: d,
+  startDate: m,
+  endDate: _,
+  shortDescription: v,
+  buttons: u,
+  loading: f,
+  containerStyle: i,
+  isSummerCampEvent: o
+}) => {
+  const l = L(m, _);
+  return /* @__PURE__ */ e.jsx(g, { baseColor: "#dcdcdc", children: /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: h(
+        n.eventCard,
+        o && n.summerCamp
+      ),
+      style: { ...i },
+      children: [
+        a ? /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            src: N(a).height(400).url(),
+            className: h(
+              n.image,
+              d === "square" && n.square
+            ),
+            crossOrigin: "anonymous",
+            alt: ""
+          }
+        ) : /* @__PURE__ */ e.jsx("div", { className: n.image, children: /* @__PURE__ */ e.jsx(
+          p,
+          {
+            height: 400,
+            style: { lineHeight: "normal" }
+          }
+        ) }),
+        /* @__PURE__ */ e.jsxs("div", { className: n.eventCardBody, children: [
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            /* @__PURE__ */ e.jsx("h3", { className: n.eventCardTitle, children: t || /* @__PURE__ */ e.jsx(p, {}) }),
+            /* @__PURE__ */ e.jsx("div", { className: n.eventCardDate, children: l || /* @__PURE__ */ e.jsx(p, {}) })
+          ] }),
+          /* @__PURE__ */ e.jsx("div", { className: n.eventCardDescription, children: v ? /* @__PURE__ */ e.jsx(S, { value: v }) : /* @__PURE__ */ e.jsx(p, { count: 7 }) }),
+          /* @__PURE__ */ e.jsx("div", { className: n.eventButtons, children: u ? u.map(({ url: s, text: r, _key: y }) => /* @__PURE__ */ e.jsx(
+            "a",
+            {
+              href: s,
+              className: n.eventButton,
+              children: /* @__PURE__ */ e.jsx("div", { children: r })
+            },
+            y
+          )) : f && /* @__PURE__ */ e.jsx(p, { className: n.eventButton }) })
+        ] })
+      ]
+    }
+  ) });
+};
+function L(t, a) {
+  if (!t || !a) return null;
+  const d = new Date(t), m = new Date(a);
+  return q(d, m) ? x(d, "MMMM d") : D(d, m) ? x(d, "MMMM d") + " – " + x(m, "d") : x(d, "MMMM d") + " – " + x(m, "MMMM d");
+}
+const F = "_eventsContainer_1fuij_1", R = "_eventsHeader_1fuij_11", P = "_eventsList_1fuij_28", O = "_eventWrapper_1fuij_34", z = "_summerCampGroup_1fuij_38", J = "_summerCampTitle_1fuij_50", K = "_empty_1fuij_60", c = {
+  eventsContainer: F,
+  eventsHeader: R,
+  eventsList: P,
+  eventWrapper: O,
+  summerCampGroup: z,
+  summerCampTitle: J,
+  empty: K
+}, Y = ({
+  events: t,
+  loading: a,
+  className: d,
+  title: m = "What's going on at Camp?",
+  headerActions: _,
+  groupSummerCampEvents: v = !1
+}) => {
+  const u = M.useMemo(() => {
+    if (!t) return [];
+    if (!v)
+      return t.map((s, r) => ({ isSummerCamp: !1, events: [s], startIndex: r }));
+    const i = t.filter((s) => s.isSummerCampEvent), o = t.findIndex((s) => s.isSummerCampEvent);
+    if (i.length === 0)
+      return t.map((s, r) => ({ isSummerCamp: !1, events: [s], startIndex: r }));
+    let l = !1;
+    return t.flatMap((s, r) => s.isSummerCampEvent ? l ? [] : (l = !0, [{ isSummerCamp: !0, events: i, startIndex: o }]) : [{ isSummerCamp: !1, events: [s], startIndex: r }]);
+  }, [t, v]), f = u.findIndex((i) => i.isSummerCamp);
+  return /* @__PURE__ */ e.jsxs("div", { className: `${c.eventsContainer} ${d || ""}`, children: [
+    (m || _) && /* @__PURE__ */ e.jsxs("div", { className: c.eventsHeader, children: [
+      m && /* @__PURE__ */ e.jsx("h1", { children: m }),
+      _
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: c.eventsList, children: a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx("div", { className: c.eventWrapper, children: /* @__PURE__ */ e.jsx(C, { loading: a }, "loading-1") }),
+      /* @__PURE__ */ e.jsx("div", { className: c.eventWrapper, children: /* @__PURE__ */ e.jsx(C, { loading: a }, "loading-2") }),
+      /* @__PURE__ */ e.jsx("div", { className: c.eventWrapper, children: /* @__PURE__ */ e.jsx(C, { loading: a }, "loading-3") })
+    ] }) : u.length > 0 ? u.map((i, o) => {
+      const l = o === f;
+      return i.isSummerCamp ? /* @__PURE__ */ e.jsxs(
+        "div",
+        {
+          className: c.summerCampGroup,
+          id: l ? "summer-camp" : void 0,
+          children: [
+            /* @__PURE__ */ e.jsx("h2", { className: c.summerCampTitle, children: "🏕️ Summer Camp" }),
+            i.events.map((s, r) => /* @__PURE__ */ B.createElement(
+              C,
+              {
+                ...s,
+                key: `${o}-${r}`,
+                loading: a
+              }
+            ))
+          ]
+        },
+        `group-${o}`
+      ) : i.events.map((s, r) => /* @__PURE__ */ e.jsx("div", { className: c.eventWrapper, children: /* @__PURE__ */ e.jsx(
+        C,
+        {
+          ...s,
+          loading: a
+        }
+      ) }, `${o}-${r}`));
+    }) : /* @__PURE__ */ e.jsxs("div", { className: c.empty, children: [
+      /* @__PURE__ */ e.jsx("img", { src: "https://d2114hmso7dut1.cloudfront.net/customers/096355b6-1a03-11eb-a9c3-0614187498c1/sites/096f9d4e-1a03-11eb-b2dd-0614187498c1/files/67900ba0-5f83-11eb-9222-e3d4d8baf1a9/original/file.png?t=1611630366" }),
+      "No upcoming events. Check back later!"
+    ] }) })
+  ] });
+};
+export {
+  Y as E,
+  X as a,
+  V as f
+};

package/dist/banners.widget.js

@@ -0,0 +1,47 @@
+import { j as n, b as l, P as b, r as s, c as d, R as p } from "./vendor.js";
+import { s as u, u as m } from "./sanityClient.js";
+const x = async () => await u.fetch("*[_type == 'banner']"), h = "_banner_1d1ur_1", c = {
+  banner: h
+}, y = {
+  marks: {
+    color: ({ value: e, children: t }) => /* @__PURE__ */ n.jsx(
+      "span",
+      {
+        style: {
+          color: e.hex
+        },
+        children: t
+      }
+    )
+  }
+}, j = ({ image: e, text: t, url: a, loading: o }) => {
+  const r = () => {
+    a && (window.location.href = a);
+  };
+  return o ? /* @__PURE__ */ n.jsx("div", { className: c.banner, style: { display: "block" }, children: /* @__PURE__ */ n.jsx(l, { height: "100%", width: "100%" }) }) : /* @__PURE__ */ n.jsx(
+    "span",
+    {
+      onClick: r,
+      style: {
+        cursor: a ? "pointer" : "",
+        backgroundImage: `linear-gradient(
+                                    rgba(0, 0, 0, 0.2),
+                                    rgba(0, 0, 0, 0.2)
+                                  ), url("${m(e).width(1440).url()}")`
+      },
+      className: c.banner,
+      children: /* @__PURE__ */ n.jsx(b, { value: t, components: y })
+    }
+  );
+}, f = "_bannerContainer_79bac_1", _ = "_bannerApp_79bac_8", i = {
+  bannerContainer: f,
+  bannerApp: _
+}, g = ({ children: e }) => /* @__PURE__ */ n.jsx("div", { className: i.bannerContainer, children: /* @__PURE__ */ n.jsx("div", { className: i.bannerApp, children: e }) }), C = () => {
+  const [e, t] = s.useState([]), [a, o] = s.useState(!0);
+  return s.useEffect(() => {
+    x().then((r) => t(r)).catch((r) => console.log(r)).finally(() => o(!1));
+  }, []), /* @__PURE__ */ n.jsx(g, { children: e.map((r) => /* @__PURE__ */ s.createElement(j, { ...r, loading: a, key: r._id })) });
+}, k = document.getElementById("camp-banners"), B = d.createRoot(k);
+B.render(
+  /* @__PURE__ */ n.jsx(p.StrictMode, { children: /* @__PURE__ */ n.jsx(C, {}) })
+);

package/dist/board-events.widget.js

@@ -0,0 +1,6 @@
+import { c as e, j as t, R as o } from "./vendor.js";
+import { E as r } from "./EventApiContainer.js";
+const n = document.getElementById("board-events"), s = e.createRoot(n);
+s.render(
+  /* @__PURE__ */ t.jsx(o.StrictMode, { children: /* @__PURE__ */ t.jsx(r, { type: "board-events" }) })
+);

package/dist/calendar.widget.js

@@ -0,0 +1,54 @@
+import { j as t, r as o, c as l, R as i } from "./vendor.js";
+import { E, f as d } from "./EventContainer.js";
+const p = "_summerEventsButton_lx20e_2", f = {
+  summerEventsButton: p
+}, v = ({
+  events: e,
+  loading: s
+}) => {
+  const n = e?.some((r) => r.isSummerCampEvent) ? /* @__PURE__ */ t.jsxs(
+    "a",
+    {
+      className: f.summerEventsButton,
+      href: "#summer-camp",
+      children: [
+        /* @__PURE__ */ t.jsx("span", { children: "🏕️" }),
+        " Jump to Summer Camp"
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ t.jsx(
+    E,
+    {
+      events: e,
+      loading: s,
+      title: "Camp Calendar",
+      headerActions: n,
+      groupSummerCampEvents: !0
+    }
+  );
+}, x = ({ className: e }) => {
+  const [s, m] = o.useState([]), [n, r] = o.useState(!0);
+  return o.useEffect(() => {
+    async function u() {
+      try {
+        const a = await d();
+        m(a);
+      } catch (a) {
+        console.error(a);
+      } finally {
+        r(!1);
+      }
+    }
+    u();
+  }, []), /* @__PURE__ */ t.jsx(
+    v,
+    {
+      events: s,
+      loading: n
+    }
+  );
+}, c = document.getElementById("camp-calendar");
+c && l.createRoot(c).render(
+  /* @__PURE__ */ t.jsx(i.StrictMode, { children: /* @__PURE__ */ t.jsx(x, {}) })
+);

package/dist/categories.widget.js

@@ -0,0 +1,70 @@
+import { j as t, b as c, r as i, c as l, R as u } from "./vendor.js";
+import { s as d, u as g } from "./sanityClient.js";
+const m = async () => d.fetch("*[_type == 'category']|order(orderRank)"), y = "_contentButton_2dk7a_1", h = "_overlay_2dk7a_40", _ = "_buttonTitle_2dk7a_56", x = "_buttonSubtitle_2dk7a_57", s = {
+  contentButton: y,
+  "category-image": "_category-image_2dk7a_25",
+  overlay: h,
+  buttonTitle: _,
+  buttonSubtitle: x
+}, b = ({
+  title: e,
+  subtitle: o,
+  url: n,
+  imageUrl: a,
+  loading: r
+}) => r ? /* @__PURE__ */ t.jsx(
+  "div",
+  {
+    className: s.contentButton,
+    style: { display: "block" },
+    children: /* @__PURE__ */ t.jsx(
+      c,
+      {
+        height: "100%",
+        width: "100%",
+        style: { lineHeight: "normal" }
+      }
+    )
+  }
+) : /* @__PURE__ */ t.jsxs("a", { href: n, className: s.contentButton, children: [
+  /* @__PURE__ */ t.jsx(
+    "img",
+    {
+      src: a,
+      alt: e,
+      className: s["category-image"]
+    }
+  ),
+  /* @__PURE__ */ t.jsxs("div", { className: s.overlay, children: [
+    /* @__PURE__ */ t.jsx("div", { className: s.buttonTitle, children: e }),
+    /* @__PURE__ */ t.jsx("div", { className: s.buttonSubtitle, children: o })
+  ] })
+] }), j = "_categoryContainer_1yxkk_1", p = {
+  categoryContainer: j
+}, k = ({
+  categories: e,
+  loading: o
+}) => /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx("div", { className: p.categoryContainer, children: e.length > 0 && e.map((n) => /* @__PURE__ */ t.jsx(
+  b,
+  {
+    title: n.title,
+    subtitle: n.subtitle,
+    url: n.url,
+    imageUrl: n.imageUrl,
+    loading: o
+  },
+  n.title
+)) }) }), C = (e) => e.map((o) => ({
+  ...o,
+  imageUrl: g(o.image).width(800).url()
+})), f = () => {
+  const [e, o] = i.useState([]), [n, a] = i.useState(!0);
+  return i.useEffect(() => {
+    m().then(
+      (r) => o(C(r))
+    ).catch((r) => console.log(r)).finally(() => a(!1));
+  }, []), /* @__PURE__ */ t.jsx(k, { categories: e, loading: n });
+}, v = document.getElementById("camp-categories"), S = l.createRoot(v);
+S.render(
+  /* @__PURE__ */ t.jsx(u.StrictMode, { children: /* @__PURE__ */ t.jsx(f, {}) })
+);

package/dist/events.widget.js

@@ -0,0 +1,6 @@
+import { c as e, j as t, R as n } from "./vendor.js";
+import { E as o } from "./EventApiContainer.js";
+const r = document.getElementById("camp-events"), s = e.createRoot(r);
+s.render(
+  /* @__PURE__ */ t.jsx(n.StrictMode, { children: /* @__PURE__ */ t.jsx(o, { type: "events" }) })
+);

package/dist/rates.widget.js

@@ -0,0 +1,90 @@
+import { j as t, r as o, c as u, R as m } from "./vendor.js";
+import { s as _ } from "./sanityClient.js";
+const x = async () => _.fetch("*[_type == 'rateCategory']|order(orderRank)"), j = "_description_z94kn_1", y = {
+  description: j
+}, g = ({ rateDescription: a }) => {
+  const { title: r, text: n } = a || {};
+  return /* @__PURE__ */ t.jsxs("div", { className: y.description, children: [
+    r && /* @__PURE__ */ t.jsx("h4", { children: r }),
+    n && /* @__PURE__ */ t.jsx("span", { children: n })
+  ] });
+}, c = ({
+  name: a,
+  detail: r,
+  value: n,
+  className: i
+}) => /* @__PURE__ */ t.jsxs("tr", { className: i, children: [
+  /* @__PURE__ */ t.jsx("td", { children: a }),
+  r && /* @__PURE__ */ t.jsx("td", { children: r }),
+  /* @__PURE__ */ t.jsx("td", { children: n })
+] }), d = {
+  "group-title": "_group-title_12ylh_1",
+  "rate-group-child": "_rate-group-child_12ylh_5"
+}, R = ({ rateGroup: a }) => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  /* @__PURE__ */ t.jsx(c, { name: a.name, className: d["group-title"] }),
+  a.childRates.map((r) => /* @__PURE__ */ t.jsx(
+    c,
+    {
+      name: r.name,
+      value: r.cost,
+      className: d["rate-group-child"]
+    },
+    r.name
+  ))
+] }), p = {
+  "rate-table": "_rate-table_6wuu7_1",
+  "group-title": "_group-title_6wuu7_33"
+}, f = (a) => {
+  const { rateTable: r } = a, n = r.some((e) => e._type === "rateGroup"), i = r.some((e) => e._type === "rate" && e.detail), s = r.map((e) => {
+    if (e._type === "rate")
+      return i && (e = {
+        detail: e.detail ?? " ",
+        ...e
+      }), /* @__PURE__ */ t.jsx(
+        c,
+        {
+          name: e.name,
+          detail: e.detail,
+          value: e.cost,
+          className: n ? p["group-title"] : ""
+        },
+        e.name
+      );
+    if (e._type === "rateGroup")
+      return /* @__PURE__ */ t.jsx(R, { rateGroup: e }, e.name);
+  });
+  return /* @__PURE__ */ t.jsx("table", { className: p["rate-table"], children: /* @__PURE__ */ t.jsx("tbody", { children: s }) });
+}, h = {
+  "rate-card": "_rate-card_i5ys9_1",
+  "rate-card-heading": "_rate-card-heading_i5ys9_13"
+}, b = (a) => {
+  const { heading: r, rates: n } = a, i = n.reduce((s, e) => {
+    if (e._type === "rateDescription")
+      return [...s, e];
+    {
+      const l = s[s.length - 1];
+      return Array.isArray(l) ? (l.push(e), s) : [...s, [e]];
+    }
+  }, []);
+  return /* @__PURE__ */ t.jsxs("div", { className: h["rate-card"], children: [
+    /* @__PURE__ */ t.jsx("div", { className: h["rate-card-heading"], children: /* @__PURE__ */ t.jsx("h3", { children: r }) }),
+    i.map((s, e) => Array.isArray(s) ? /* @__PURE__ */ t.jsx(f, { rateTable: s }, e) : /* @__PURE__ */ t.jsx(g, { rateDescription: s }, e))
+  ] });
+}, N = {
+  "rates-container": "_rates-container_123ct_1"
+}, v = () => {
+  const [a, r] = o.useState([]), [n, i] = o.useState(!0);
+  return o.useEffect(() => {
+    x().then((s) => r(s)).catch((s) => console.log(s)).finally(() => i(!1));
+  }, []), /* @__PURE__ */ t.jsx("div", { className: N["rates-container"], children: a.map((s) => /* @__PURE__ */ t.jsx(
+    b,
+    {
+      heading: s.name,
+      rates: s.rates
+    },
+    s.name
+  )) });
+}, A = document.getElementById("camp-rates"), E = u.createRoot(A);
+E.render(
+  /* @__PURE__ */ t.jsx(m.StrictMode, { children: /* @__PURE__ */ t.jsx(v, {}) })
+);