@scrippsproduct/networks-ui-library 1.1.0-alpha.7 → 1.1.0-alpha.8

package/dist/components/ScheduleLayout/ScheduleLayout.d.ts

@@ -7,11 +7,11 @@ type Day = {
     fullDateStr: string;
 };
 type ScheduleLayoutProps = {
-    schedule?: ScheduleResponse;
+    fetchSchedule: (date: Date) => Promise<ScheduleResponse>;
+    initialSchedule?: ScheduleResponse;
     weeks?: Day[][];
     handleScheduleClicks?: (details: HandleClicksDetails) => boolean | void;
     handleDateChanged?: (date: Date) => boolean | void;
-    fetchError?: boolean;
 };
-export declare function ScheduleLayout({ schedule, weeks, handleScheduleClicks, handleDateChanged, fetchError, }: ScheduleLayoutProps): JSX.Element;
+export declare function ScheduleLayout({ fetchSchedule, initialSchedule, weeks, handleScheduleClicks, handleDateChanged, }: ScheduleLayoutProps): JSX.Element;
 export default ScheduleLayout;

package/dist/components/ScheduleLayout/ScheduleLayout.js

@@ -1,33 +1,32 @@
-import { jsx as t, jsxs as L } from "react/jsx-runtime";
-import { useRef as d, useCallback as w, useEffect as v } from "react";
-import { f as b } from "../../format-YhWt2D8M.mjs";
-import { l as c } from "../../logger-C0N7U0YY.mjs";
-import { classes as E } from "../../utils/helpers.js";
-import { ScheduleProvider as T } from "./ScheduleContext.js";
-import { useScheduleContext as k } from "./useScheduleContext.js";
-import { DateNavigation as q } from "../DateNavigation/DateNavigation.js";
-import { ScheduleList as x } from "../ScheduleList/ScheduleList.js";
-c.setComponent("ScheduleLayout");
-import '../../assets/ScheduleLayout.css';function C({
-  handleScheduleClicks: f = () => !0,
-  fetchError: p = !1
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { useRef as d, useCallback as S, useEffect as y } from "react";
+import { f as w } from "../../format-YhWt2D8M.mjs";
+import { l as i } from "../../logger-C0N7U0YY.mjs";
+import { classes as L } from "../../utils/helpers.js";
+import { ScheduleProvider as E } from "./ScheduleContext.js";
+import { useScheduleContext as T } from "./useScheduleContext.js";
+import { DateNavigation as k } from "../DateNavigation/DateNavigation.js";
+import { ScheduleList as q } from "../ScheduleList/ScheduleList.js";
+i.setComponent("ScheduleLayout");
+import '../../assets/ScheduleLayout.css';function x({
+  handleScheduleClicks: f = () => !0
 }) {
-  const { currentDate: n } = k(), r = d(null), m = d(0), i = d(null), s = d(null), l = d(null), a = w((u) => {
-    c.log("Determining pointer position for date: ", u);
-    const o = () => {
+  const { currentDate: n } = T(), r = d(null), p = d(0), o = d(null), s = d(null), l = d(null), a = S((u) => {
+    i.log("Determining pointer position for date: ", u);
+    const c = () => {
       let e;
-      const g = document.querySelector(`.date-navigation__day[aria-controls="${b(u, "yyyy-MM-dd")}"]`);
-      if (g && (e = g.parentElement), e && r.current) {
-        const S = e.offsetLeft + e.offsetWidth / 2;
-        m.current = S, r.current.style.setProperty(
+      const v = document.querySelector(`.date-navigation__day[aria-controls="${w(u, "yyyy-MM-dd")}"]`);
+      if (v && (e = v.parentElement), e && r.current) {
+        const g = e.offsetLeft + e.offsetWidth / 2;
+        p.current = g, r.current.style.setProperty(
           "--pointer-position",
-          `${S}px`
+          `${g}px`
         );
       }
-    }, y = () => {
-      c.log("Scrolling schedule list to top"), c.log("Schedule list element: ", s.current), c.log("Sticky wrapper element: ", l.current);
+    }, h = () => {
+      i.log("Scrolling schedule list to top"), i.log("Schedule list element: ", s.current), i.log("Sticky wrapper element: ", l.current);
       const e = document.querySelector(".mobile-nav");
-      s.current && l.current && (c.log("Mobile nav element: ", e), window.scrollTo({
+      s.current && l.current && (i.log("Mobile nav element: ", e), window.scrollTo({
         behavior: "auto",
         top: e && window.getComputedStyle(e).display !== "none" ? s.current.offsetTop - l.current.offsetHeight - e.offsetHeight - 8 : s.current.offsetTop - l.current.offsetHeight - 16,
         left: 0
@@ -35,68 +34,69 @@ import '../../assets/ScheduleLayout.css';function C({
     };
     if (!r.current) {
       const e = setInterval(() => {
-        r.current = document.querySelector(".date-navigation__list"), r.current && (clearInterval(e), s.current = document.querySelector(".schedule-list"), l.current = document.querySelector("sticky-content-wrapper"), o(), y());
+        r.current = document.querySelector(".date-navigation__list"), r.current && (clearInterval(e), s.current = document.querySelector(".schedule-list"), l.current = document.querySelector("sticky-content-wrapper"), c(), h());
       }, 100);
       setTimeout(() => {
         clearInterval(e);
       }, 3e3);
       return;
     }
-    o(), y();
-  }, []), h = w(() => {
-    i.current && clearTimeout(i.current), i.current = window.setTimeout(() => {
+    c(), h();
+  }, []), m = S(() => {
+    o.current && clearTimeout(o.current), o.current = window.setTimeout(() => {
       a(n);
     }, 250);
   }, [n, a]);
-  return v(() => (window.addEventListener("resize", h), () => {
-    window.removeEventListener("resize", h), i.current && clearTimeout(i.current);
-  }), [a, h]), v(() => {
-    const u = document.querySelector(".header-divider"), o = document.querySelector("sticky-content-wrapper");
-    o && u && new IntersectionObserver(
+  return y(() => (window.addEventListener("resize", m), () => {
+    window.removeEventListener("resize", m), o.current && clearTimeout(o.current);
+  }), [a, m]), y(() => {
+    const u = document.querySelector(".header-divider"), c = document.querySelector("sticky-content-wrapper");
+    c && u && new IntersectionObserver(
       ([e]) => {
-        e.intersectionRatio < 1 ? o.dataset.pinnedState = "pinned" : o.dataset.pinnedState = "unpinned";
+        e.intersectionRatio < 1 ? c.dataset.pinnedState = "pinned" : c.dataset.pinnedState = "unpinned";
       },
       {
         threshold: [1],
         rootMargin: "-37px"
       }
     ).observe(u);
-  }, []), v(() => {
+  }, []), y(() => {
     a(n);
-  }, [n, a]), /* @__PURE__ */ L("schedule-layout", { children: [
+  }, [n, a]), /* @__PURE__ */ b("schedule-layout", { children: [
     /* @__PURE__ */ t("sticky-content-wrapper", { "data-pinned-state": "unpinned", children: /* @__PURE__ */ t(
       "content-constrainer",
       {
-        class: E([
+        class: L([
           "content-constrainer--no-padding",
           "content-constrainer--no-border",
           "content-constrainer--lead-container",
           "schedule-date-nav-constrainer"
         ]),
-        children: /* @__PURE__ */ t(q, {})
+        children: /* @__PURE__ */ t(k, {})
       }
     ) }),
-    /* @__PURE__ */ t("section", { className: "page-section", id: "schedule-section", children: /* @__PURE__ */ t("content-constrainer", { class: "content-constrainer--no-border schedule-content-constrainer", children: /* @__PURE__ */ t("div", { id: b(n, "yyyy-MM-dd"), role: "tabpanel", children: /* @__PURE__ */ t(x, { fetchError: p, handleClicks: f }) }) }) })
+    /* @__PURE__ */ t("section", { className: "page-section", id: "schedule-section", children: /* @__PURE__ */ t("content-constrainer", { class: "content-constrainer--no-border schedule-content-constrainer", children: /* @__PURE__ */ t("div", { id: w(n, "yyyy-MM-dd"), role: "tabpanel", children: /* @__PURE__ */ t(q, { handleClicks: f }) }) }) })
   ] });
 }
-function O({
-  schedule: f = [],
-  weeks: p = [],
-  handleScheduleClicks: n = () => !0,
-  handleDateChanged: r = () => !0,
-  fetchError: m = !1
+function N({
+  fetchSchedule: f,
+  initialSchedule: n = [],
+  weeks: r = [],
+  handleScheduleClicks: p = () => !0,
+  handleDateChanged: o = () => !0
 }) {
   return /* @__PURE__ */ t(
-    T,
+    E,
     {
-      handleDateChanged: r,
-      schedule: f,
-      weeks: p,
-      children: /* @__PURE__ */ t(C, { fetchError: m, handleScheduleClicks: n })
+      fetchSchedule: f,
+      handleDateChanged: o,
+      initialSchedule: n,
+      weeks: r,
+      children: /* @__PURE__ */ t(x, { handleScheduleClicks: p })
     }
   );
 }
 export {
-  O as ScheduleLayout,
-  O as default
+  N as ScheduleLayout,
+  N as default
 };

package/dist/components/ScheduleLayout/useScheduleContext.d.ts

@@ -9,6 +9,7 @@ export declare function useScheduleContext(): {
     }[][];
     currentDate: Date;
     isLoading: boolean;
+    isError: boolean;
     setCurrentDate: (date: Date) => void;
 };
 export default useScheduleContext;

package/dist/components/ScheduleList/ScheduleList.d.ts

@@ -1,7 +1,6 @@
 import { HandleClicksDetails } from '../../types.d.ts';
 type ScheduleListProps = {
     handleClicks?: (details: HandleClicksDetails) => boolean | void;
-    fetchError?: boolean;
 };
-export declare function ScheduleList({ handleClicks, fetchError, }: ScheduleListProps): JSX.Element;
+export declare function ScheduleList({ handleClicks, }: ScheduleListProps): JSX.Element;
 export default ScheduleList;

package/dist/components/ScheduleList/ScheduleList.js

@@ -1,12 +1,12 @@
-import { jsx as a, jsxs as y } from "react/jsx-runtime";
-import { useReducer as R, useState as A, useRef as w, useCallback as L, useEffect as v } from "react";
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { useReducer as R, useState as A, useRef as w, useCallback as L, useEffect as E } from "react";
 import { classes as T, getMinutesFromStr as u } from "../../utils/helpers.js";
 import { useScheduleContext as b } from "../ScheduleLayout/useScheduleContext.js";
 import { Loading as x } from "../Loading/Loading.js";
 import { SportsItem as D } from "./schedule-list-items/SportsItem.js";
 import { SeriesItem as M } from "./schedule-list-items/SeriesItem.js";
 import { MovieItem as k } from "./schedule-list-items/MovieItem.js";
-import '../../assets/ScheduleList.css';const f = {
+import '../../assets/ScheduleList.css';const l = {
   "schedule-list__item": "_schedule-list__item_wmqq1_1",
   "schedule-list__airdate": "_schedule-list__airdate_wmqq1_14",
   "airdate-formatter__date": "_airdate-formatter__date_wmqq1_22",
@@ -24,8 +24,8 @@ import '../../assets/ScheduleList.css';const f = {
 function S(r) {
   return typeof r == "object" && !Array.isArray(r) && (r == null ? void 0 : r.queryStatus) && r.queryStatus === "no-results";
 }
-function C(r, p) {
-  switch (p.type) {
+function C(r, t) {
+  switch (t.type) {
     case "START_EXIT":
       return "exiting";
     case "EXIT_COMPLETE":
@@ -38,9 +38,9 @@ function C(r, p) {
       return r;
   }
 }
-const E = (r) => {
-  var p, t, s, n, e, o, d, g, _, l, i;
-  return (p = r.video) != null && p.brightcove_id ? {
+const v = (r) => {
+  var t, s, y, n, e, o, d, f, _, p, i;
+  return (t = r.video) != null && t.brightcove_id ? {
     label: "Watch Preview",
     type: "play-video",
     href: "",
@@ -71,10 +71,10 @@ const E = (r) => {
     //'film',
     position: void 0
     //'inline',
-  } : (((t = r == null ? void 0 : r.content) == null ? void 0 : t.external_link) !== void 0 && ((s = r == null ? void 0 : r.content) == null ? void 0 : s.external_link) !== "" || ((n = r == null ? void 0 : r.content) == null ? void 0 : n.slug) !== void 0 && ((e = r == null ? void 0 : r.content) == null ? void 0 : e.slug) !== "") && !((o = r == null ? void 0 : r.content) != null && o.prevent_detail_page) ? {
+  } : (((s = r == null ? void 0 : r.content) == null ? void 0 : s.external_link) !== void 0 && ((y = r == null ? void 0 : r.content) == null ? void 0 : y.external_link) !== "" || ((n = r == null ? void 0 : r.content) == null ? void 0 : n.slug) !== void 0 && ((e = r == null ? void 0 : r.content) == null ? void 0 : e.slug) !== "") && !((o = r == null ? void 0 : r.content) != null && o.prevent_detail_page) ? {
     label: (r == null ? void 0 : r.program_class) === "Episode" ? "View Series Details" : (r == null ? void 0 : r.program_class) === "Film" ? "View Movie Details" : "Learn More",
     type: (d = r == null ? void 0 : r.content) != null && d.external_link ? "external-link" : "internal-link",
-    href: (g = r == null ? void 0 : r.content) != null && g.external_link ? (_ = r == null ? void 0 : r.content) == null ? void 0 : _.external_link : r.program_class === "Episode" ? `/show/${(l = r == null ? void 0 : r.content) == null ? void 0 : l.slug}` : `/movie/${(i = r == null ? void 0 : r.content) == null ? void 0 : i.slug}`,
+    href: (f = r == null ? void 0 : r.content) != null && f.external_link ? (_ = r == null ? void 0 : r.content) == null ? void 0 : _.external_link : r.program_class === "Episode" ? `/show/${(p = r == null ? void 0 : r.content) == null ? void 0 : p.slug}` : `/movie/${(i = r == null ? void 0 : r.content) == null ? void 0 : i.slug}`,
     position: "inline"
   } : {
     label: "",
@@ -84,24 +84,23 @@ const E = (r) => {
   };
 };
 function H({
-  handleClicks: r = () => !0,
-  fetchError: p = !1
+  handleClicks: r = () => !0
 }) {
-  const { schedule: t, isLoading: s } = b(), [n, e] = R(C, "idle"), [o, d] = A(t), g = w(null), _ = w(null), l = L(() => {
+  const { schedule: t, isLoading: s, isError: y } = b(), [n, e] = R(C, "idle"), [o, d] = A(t), f = w(null), _ = w(null), p = L(() => {
     _.current && (clearTimeout(_.current), _.current = null), n === "exiting" ? e({ type: "EXIT_COMPLETE" }) : n === "entering" && e({ type: "ENTER_COMPLETE" });
   }, [n]);
-  return v(() => {
-    const i = g.current;
+  return E(() => {
+    const i = f.current;
     if (i)
-      return i.addEventListener("animationend", l), () => {
-        i.removeEventListener("animationend", l);
+      return i.addEventListener("animationend", p), () => {
+        i.removeEventListener("animationend", p);
       };
-  }, [l]), v(() => {
+  }, [p]), E(() => {
     s && n === "idle" && e({ type: "START_EXIT" });
-  }, [s, n]), v(() => {
+  }, [s, n]), E(() => {
     const i = S(t) || Array.isArray(t) && t.length >= 0;
     !s && n === "loading" && i && (d(t), e({ type: "SCHEDULE_LOADED" }));
-  }, [s, n, t]), v(() => () => {
+  }, [s, n, t]), E(() => () => {
     _.current && clearTimeout(_.current);
   }, []), n === "loading" ? /* @__PURE__ */ a(
     "div",
@@ -114,36 +113,36 @@ function H({
       },
       children: /* @__PURE__ */ a(x, {})
     }
-  ) : p ? /* @__PURE__ */ y("div", { className: "schedule-list__no-schedule", children: [
+  ) : y ? /* @__PURE__ */ g("div", { className: "schedule-list__no-schedule", children: [
     /* @__PURE__ */ a("h2", { children: "There was an error loading the schedule for this day." }),
-    /* @__PURE__ */ y("p", { children: [
+    /* @__PURE__ */ g("p", { children: [
       "Please try again later. If this problem persists report it at ",
       /* @__PURE__ */ a("a", { href: "https://support.iontelevision.com/support/home", children: "our support page" }),
       "."
     ] })
-  ] }) : S(o) ? /* @__PURE__ */ y(
+  ] }) : S(o) ? /* @__PURE__ */ g(
     "div",
     {
       className: T([
-        f["schedule-list__no-schedule"],
+        l["schedule-list__no-schedule"],
         "schedule-list__no-schedule"
       ]),
       "data-state": n,
       style: { animationDelay: "500ms" },
       children: [
         /* @__PURE__ */ a("h2", { children: "There are no shows scheduled for this day." }),
-        /* @__PURE__ */ y("p", { children: [
+        /* @__PURE__ */ g("p", { children: [
           "Please try again later. If this problem persists report it at ",
           /* @__PURE__ */ a("a", { href: "https://support.iontelevision.com/support/home", children: "our support page" }),
           "."
         ] })
       ]
     }
-  ) : Array.isArray(o) && o.length === 0 ? /* @__PURE__ */ y(
+  ) : Array.isArray(o) && o.length === 0 ? /* @__PURE__ */ g(
     "div",
     {
       className: T([
-        f["schedule-list__no-schedule"],
+        l["schedule-list__no-schedule"],
         "schedule-list__no-schedule"
       ]),
       "data-state": n,
@@ -155,39 +154,39 @@ function H({
   ) : /* @__PURE__ */ a(
     "ul",
     {
-      className: `${f["schedule-list"]} schedule-list`,
+      className: `${l["schedule-list"]} schedule-list`,
       "data-state": n,
-      ref: g,
+      ref: f,
       children: Array.isArray(o) && o.map((i) => {
-        const c = u(i.element_length), q = E(i).type === "" ? [c, i.rating] : [c, i.rating, " "];
+        const c = u(i.element_length), q = v(i).type === "" ? [c, i.rating] : [c, i.rating, " "];
         return i.program_class === "Episode" ? /* @__PURE__ */ a(
           M,
           {
-            determineCTA: E,
+            determineCTA: v,
             handleClicks: r,
             scheduleItem: i,
             strListArr: q,
-            styles: f
+            styles: l
           },
           `schedule-list-${i.id}`
         ) : i.program_class === "Film" || i.program_class === "Movie" || i.program_class === "Special" ? /* @__PURE__ */ a(
           k,
           {
-            determineCTA: E,
+            determineCTA: v,
             handleClicks: r,
             scheduleItem: i,
             strListArr: q,
-            styles: f
+            styles: l
           },
           `schedule-list-${i.id}`
         ) : i.program_class === "Sports" ? /* @__PURE__ */ a(
           D,
           {
-            determineCTA: E,
+            determineCTA: v,
             handleClicks: r,
             scheduleItem: i,
             strListArr: q,
-            styles: f
+            styles: l
           },
           `schedule-list-${i.id}`
         ) : null;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-alpha.7",
+  "version": "1.1.0-alpha.8",
   "name": "@scrippsproduct/networks-ui-library",
   "description": "React Component Library for use in Scripps Networks external applications",
   "author": {
@@ -28,9 +28,10 @@
     "create-component": "node scripts/componentFolderBuilder.js",
     "reinstall-deps": "node ./reinstall-deps.js",
     "login": "npm login",
-    "publish": "node scripts/publish-with-otp.mjs"
+    "custom-publish": "node scripts/publish-with-otp.mjs"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.12",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
     "html-react-parser": "^5.1.10",