@windstream/react-shared-components 0.1.93 → 0.1.94

package/src/hooks/contentful/use-processed-check-list.test.tsx

@@ -0,0 +1,277 @@
+import {
+  label1BoldOptions,
+  useProcessedChecklist,
+} from "./use-processed-check-list";
+
+import { MARKS } from "@contentful/rich-text-types";
+import { renderHook } from "@testing-library/react";
+
+// Mock renderContentfulRichText to return predictable output
+jest.mock("./use-contentful-rich-text", () => ({
+  renderContentfulRichText: jest.fn(
+    (doc: any, _target?: boolean, className?: string) => {
+      // Return a simple string representation based on the doc
+      if (!doc) return null;
+      // Extract text from the doc content if available
+      const text = doc?.content?.[0]?.content?.[0]?.value;
+      return text ? `rendered:${text}:${className ?? ""}` : null;
+    }
+  ),
+}));
+
+jest.mock("@shared/utils/contentful/to-document", () => ({
+  toDocument: jest.fn((v: any) => {
+    if (!v) return null;
+    if (typeof v === "string") {
+      return {
+        nodeType: "document",
+        data: {},
+        content: [
+          {
+            nodeType: "paragraph",
+            data: {},
+            content: [{ nodeType: "text", value: v, marks: [], data: {} }],
+          },
+        ],
+      };
+    }
+    return v;
+  }),
+}));
+
+const makeChecklistData = (items: any[]) => ({
+  list: {
+    items,
+  },
+});
+
+describe("useProcessedChecklist", () => {
+  describe("Full items mode (titlesOnly=false)", () => {
+    it("returns empty array when checklistData is undefined", () => {
+      const { result } = renderHook(() => useProcessedChecklist(undefined));
+      expect(result.current).toEqual([]);
+    });
+
+    it("returns empty array when checklistData has no list", () => {
+      const { result } = renderHook(() => useProcessedChecklist({}));
+      expect(result.current).toEqual([]);
+    });
+
+    it("returns empty array when list.items is empty", () => {
+      const data = makeChecklistData([]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current).toEqual([]);
+    });
+
+    it("returns ProcessedChecklistItem array with title, iconUrl, anchorId", () => {
+      const data = makeChecklistData([
+        {
+          checkListTitle: "Item 1",
+          icon: { url: "https://cdn.com/icon1.png" },
+          anchorId: "anchor-1",
+        },
+        {
+          checkListTitle: "Item 2",
+          icon: { url: "https://cdn.com/icon2.png" },
+          anchorId: "anchor-2",
+        },
+      ]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current).toHaveLength(2);
+      expect(result.current[0]).toEqual({
+        title: "rendered:Item 1:",
+        iconUrl: "https://cdn.com/icon1.png",
+        anchorId: "anchor-1",
+      });
+      expect(result.current[1]).toEqual({
+        title: "rendered:Item 2:",
+        iconUrl: "https://cdn.com/icon2.png",
+        anchorId: "anchor-2",
+      });
+    });
+
+    it("sets iconUrl to undefined when icon is missing", () => {
+      const data = makeChecklistData([
+        { checkListTitle: "No icon", icon: undefined },
+      ]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].iconUrl).toBeUndefined();
+    });
+
+    it("sets anchorId to undefined when anchorId is missing", () => {
+      const data = makeChecklistData([{ checkListTitle: "No anchor" }]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].anchorId).toBeUndefined();
+    });
+
+    it("uses empty string for title when checkListTitle is null", () => {
+      const data = makeChecklistData([{ checkListTitle: null }]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      // toDocument("") returns null, renderContentfulRichText returns null, falls back to ""
+      expect(result.current[0].title).toBe("");
+    });
+
+    it("handles item with undefined checkListTitle", () => {
+      const data = makeChecklistData([{}]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].title).toBe("");
+    });
+
+    it("handles null item in items array", () => {
+      const data = makeChecklistData([null]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].title).toBe("");
+      expect(result.current[0].iconUrl).toBeUndefined();
+      expect(result.current[0].anchorId).toBeUndefined();
+    });
+
+    it("handles undefined item in items array", () => {
+      const data = makeChecklistData([undefined]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].title).toBe("");
+    });
+
+    it("passes richTextClassName to renderContentfulRichText in full mode", () => {
+      const data = makeChecklistData([{ checkListTitle: "Styled" }]);
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, false, undefined, "full-class")
+      );
+      expect(result.current[0].title).toBe("rendered:Styled:full-class");
+    });
+
+    it("passes richTextOptions in full mode", () => {
+      const data = makeChecklistData([{ checkListTitle: "Opts" }]);
+      const customOpts = { renderMark: { [MARKS.BOLD]: (t: any) => t } };
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, false, customOpts, "opts-class")
+      );
+      expect(result.current[0].title).toBe("rendered:Opts:opts-class");
+    });
+
+    it("handles item with icon but no url", () => {
+      const data = makeChecklistData([{ checkListTitle: "No url", icon: {} }]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].iconUrl).toBeUndefined();
+    });
+  });
+
+  describe("Titles only mode (titlesOnly=true)", () => {
+    it("returns string array of rendered titles", () => {
+      const data = makeChecklistData([
+        { checkListTitle: "Title A" },
+        { checkListTitle: "Title B" },
+      ]);
+      const { result } = renderHook(() => useProcessedChecklist(data, true));
+      expect(result.current).toHaveLength(2);
+      expect(result.current[0]).toBe("rendered:Title A:");
+      expect(result.current[1]).toBe("rendered:Title B:");
+    });
+
+    it("returns empty string for null checkListTitle", () => {
+      const data = makeChecklistData([{ checkListTitle: null }]);
+      const { result } = renderHook(() => useProcessedChecklist(data, true));
+      expect(result.current[0]).toBe("");
+    });
+
+    it("returns empty array when no items", () => {
+      const { result } = renderHook(() =>
+        useProcessedChecklist(undefined, true)
+      );
+      expect(result.current).toEqual([]);
+    });
+
+    it("handles null item in items array in titlesOnly mode", () => {
+      const data = makeChecklistData([null]);
+      const { result } = renderHook(() => useProcessedChecklist(data, true));
+      expect(result.current[0]).toBe("");
+    });
+
+    it("handles undefined item in items array in titlesOnly mode", () => {
+      const data = makeChecklistData([undefined]);
+      const { result } = renderHook(() => useProcessedChecklist(data, true));
+      expect(result.current[0]).toBe("");
+    });
+
+    it("passes richTextOptions in titlesOnly mode", () => {
+      const data = makeChecklistData([{ checkListTitle: "Opt" }]);
+      const customOpts = { renderMark: {} };
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, true, customOpts, "title-class")
+      );
+      expect(result.current[0]).toBe("rendered:Opt:title-class");
+    });
+  });
+
+  describe("richTextOptions and richTextClassName", () => {
+    it("passes richTextClassName to renderContentfulRichText", () => {
+      const data = makeChecklistData([{ checkListTitle: "Styled" }]);
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, true, undefined, "custom-class")
+      );
+      expect(result.current[0]).toBe("rendered:Styled:custom-class");
+    });
+
+    it("passes richTextOptions through", () => {
+      const data = makeChecklistData([{ checkListTitle: "Options" }]);
+      const customOpts = { renderMark: {} };
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, false, customOpts)
+      );
+      // Should still produce results (richTextOptions is passed but our mock ignores it)
+      expect(result.current).toHaveLength(1);
+    });
+  });
+
+  describe("Memoization", () => {
+    it("returns same reference when inputs don't change", () => {
+      const data = makeChecklistData([{ checkListTitle: "Memo" }]);
+      const { result, rerender } = renderHook(
+        ({ d }) => useProcessedChecklist(d),
+        { initialProps: { d: data } }
+      );
+      const first = result.current;
+      rerender({ d: data });
+      expect(result.current).toBe(first);
+    });
+
+    it("recomputes when checklistData changes", () => {
+      const data1 = makeChecklistData([{ checkListTitle: "V1" }]);
+      const data2 = makeChecklistData([{ checkListTitle: "V2" }]);
+      const { result, rerender } = renderHook(
+        ({ d }) => useProcessedChecklist(d),
+        { initialProps: { d: data1 } }
+      );
+      const first = result.current;
+      rerender({ d: data2 });
+      expect(result.current).not.toBe(first);
+    });
+
+    it("recomputes when titlesOnly changes", () => {
+      const data = makeChecklistData([{ checkListTitle: "Toggle" }]);
+      const { result, rerender } = renderHook(
+        ({ t }) => useProcessedChecklist(data, t),
+        { initialProps: { t: false as boolean } }
+      );
+      const first = result.current;
+      rerender({ t: true });
+      expect(result.current).not.toBe(first);
+    });
+  });
+});
+
+describe("label1BoldOptions", () => {
+  it("exports BOLD mark renderer that wraps in span with label1 class", () => {
+    const renderer = label1BoldOptions.renderMark[MARKS.BOLD];
+    expect(renderer).toBeDefined();
+  });
+
+  it("renders bold text in a span with label1 className", () => {
+    const renderer = label1BoldOptions.renderMark[MARKS.BOLD];
+    const result = renderer("Bold text");
+    // createElement returns a React element with type 'span' and className 'label1'
+    expect(result).toBeDefined();
+    expect((result as any).type).toBe("span");
+    expect((result as any).props.className).toBe("label1");
+    expect((result as any).props.children).toBe("Bold text");
+  });
+});

package/src/hooks/contentful/use-processed-check-list.ts

@@ -1,63 +1,63 @@
-import { createElement, useMemo, type ReactNode } from "react";
-import { renderContentfulRichText } from "./use-contentful-rich-text";
-
-import { type Options } from "@contentful/rich-text-react-renderer";
-import { MARKS } from "@contentful/rich-text-types";
-import { toDocument } from "@shared/utils/contentful/to-document";
-
-export const label1BoldOptions = {
-  renderMark: {
-    [MARKS.BOLD]: (text: ReactNode) =>
-      createElement("span", { className: "label1" }, text),
-  },
-};
-
-export interface ProcessedChecklistItem {
-  title: string;
-  iconUrl?: string;
-  anchorId?: string;
-}
-
-// titlesOnly as a boolean parameter with a conditional return type
-export function useProcessedChecklist<T extends boolean = false>(
-  checklistData?: any,
-  titlesOnly?: T,
-  richTextOptions?: Options,
-  richTextClassName?: string
-): T extends true ? string[] : ProcessedChecklistItem[] {
-  return useMemo(() => {
-    const rawItems: any[] = checklistData?.list?.items ?? [];
-
-    if (titlesOnly) {
-      return rawItems.map(
-        item =>
-          renderContentfulRichText(
-            toDocument(item?.checkListTitle ?? ""),
-            undefined,
-            richTextClassName,
-            undefined,
-            richTextOptions
-          ) ?? ""
-      ) as any;
-    }
-
-    return rawItems.map(item => ({
-      title:
-        renderContentfulRichText(
-          toDocument(item?.checkListTitle ?? ""),
-          undefined,
-          richTextClassName,
-          undefined,
-          richTextOptions
-        ) ?? "",
-      iconUrl: item?.icon?.url ?? undefined,
-      anchorId: item?.anchorId ?? undefined,
-    })) as any;
-  }, [checklistData, titlesOnly, richTextOptions, richTextClassName]) as any;
-}
-
-// Usage:
-// Full items
-//const items = useProcessedChecklist(checklistData); // ProcessedChecklistItem[]
-// Titles only
-//const titles = useProcessedChecklist(checklistData, true); // string[]
+import { createElement, useMemo, type ReactNode } from "react";
+import { renderContentfulRichText } from "./use-contentful-rich-text";
+
+import { type Options } from "@contentful/rich-text-react-renderer";
+import { MARKS } from "@contentful/rich-text-types";
+import { toDocument } from "@shared/utils/contentful/to-document";
+
+export const label1BoldOptions = {
+  renderMark: {
+    [MARKS.BOLD]: (text: ReactNode) =>
+      createElement("span", { className: "label1" }, text),
+  },
+};
+
+export interface ProcessedChecklistItem {
+  title: string;
+  iconUrl?: string;
+  anchorId?: string;
+}
+
+// titlesOnly as a boolean parameter with a conditional return type
+export function useProcessedChecklist<T extends boolean = false>(
+  checklistData?: any,
+  titlesOnly?: T,
+  richTextOptions?: Options,
+  richTextClassName?: string
+): T extends true ? string[] : ProcessedChecklistItem[] {
+  return useMemo(() => {
+    const rawItems: any[] = checklistData?.list?.items ?? [];
+
+    if (titlesOnly) {
+      return rawItems.map(
+        item =>
+          renderContentfulRichText(
+            toDocument(item?.checkListTitle ?? ""),
+            undefined,
+            richTextClassName,
+            undefined,
+            richTextOptions
+          ) ?? ""
+      ) as any;
+    }
+
+    return rawItems.map(item => ({
+      title:
+        renderContentfulRichText(
+          toDocument(item?.checkListTitle ?? ""),
+          undefined,
+          richTextClassName,
+          undefined,
+          richTextOptions
+        ) ?? "",
+      iconUrl: item?.icon?.url ?? undefined,
+      anchorId: item?.anchorId ?? undefined,
+    })) as any;
+  }, [checklistData, titlesOnly, richTextOptions, richTextClassName]) as any;
+}
+
+// Usage:
+// Full items
+//const items = useProcessedChecklist(checklistData); // ProcessedChecklistItem[]
+// Titles only
+//const titles = useProcessedChecklist(checklistData, true); // string[]

package/src/hooks/use-body-scroll-lock.test.ts

@@ -0,0 +1,134 @@
+import useBodyScrollLock from "./use-body-scroll-lock";
+
+import { cleanup, renderHook } from "@testing-library/react";
+
+describe("useBodyScrollLock", () => {
+  beforeEach(() => {
+    cleanup();
+    document.body.style.overflow = "";
+    document.body.style.marginRight = "";
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.style.overflow = "";
+    document.body.style.marginRight = "";
+  });
+
+  describe("Scroll locking (isOpen=true)", () => {
+    it("sets body overflow to hidden when isOpen is true", () => {
+      renderHook(() => useBodyScrollLock(true, false));
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+
+    it("sets marginRight based on scrollbar width when isOpen is true", () => {
+      renderHook(() => useBodyScrollLock(true, false));
+      const scrollbarWidth =
+        window.innerWidth - document.documentElement.clientWidth;
+      expect(document.body.style.marginRight).toBe(`${scrollbarWidth}px`);
+    });
+  });
+
+  describe("Scroll unlocking (isOpen=false)", () => {
+    it("resets overflow to unset when isOpen=false and hideScrollOnIsOpenFalse=true", () => {
+      renderHook(() => useBodyScrollLock(false, true));
+      expect(document.body.style.overflow).toBe("unset");
+    });
+
+    it("preserves existing overflow when isOpen=false and hideScrollOnIsOpenFalse=false", () => {
+      document.body.style.overflow = "auto";
+      renderHook(() => useBodyScrollLock(false, false));
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    it("attempts to set marginRight to unset when isOpen is false", () => {
+      const calls: string[] = [];
+      const original = Object.getOwnPropertyDescriptor(
+        CSSStyleDeclaration.prototype,
+        "marginRight"
+      );
+      Object.defineProperty(document.body.style, "marginRight", {
+        set(val: string) {
+          calls.push(val);
+        },
+        get() {
+          return "";
+        },
+        configurable: true,
+      });
+      renderHook(() => useBodyScrollLock(false, false));
+      expect(calls).toContain("unset");
+      // Restore
+      if (original) {
+        Object.defineProperty(
+          CSSStyleDeclaration.prototype,
+          "marginRight",
+          original
+        );
+      }
+    });
+
+    it("attempts to set marginRight to unset for isOpen false regardless of hideScroll", () => {
+      const calls: string[] = [];
+      Object.defineProperty(document.body.style, "marginRight", {
+        set(val: string) {
+          calls.push(val);
+        },
+        get() {
+          return "";
+        },
+        configurable: true,
+      });
+      renderHook(() => useBodyScrollLock(false, true));
+      expect(calls).toContain("unset");
+    });
+  });
+
+  describe("Cleanup on unmount", () => {
+    it("resets body overflow to unset on unmount", () => {
+      const { unmount } = renderHook(() => useBodyScrollLock(true, false));
+      expect(document.body.style.overflow).toBe("hidden");
+      unmount();
+      expect(document.body.style.overflow).toBe("unset");
+    });
+
+    it("resets overflow on unmount even when isOpen was false", () => {
+      const { unmount } = renderHook(() => useBodyScrollLock(false, true));
+      unmount();
+      expect(document.body.style.overflow).toBe("unset");
+    });
+  });
+
+  describe("Dependency changes", () => {
+    it("locks scroll when isOpen changes from false to true", () => {
+      const { rerender } = renderHook(
+        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
+        { initialProps: { isOpen: false, hide: false } }
+      );
+      expect(document.body.style.overflow).not.toBe("hidden");
+      rerender({ isOpen: true, hide: false });
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+
+    it("unlocks scroll when isOpen changes from true to false with hideScroll=true", () => {
+      const { rerender } = renderHook(
+        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
+        { initialProps: { isOpen: true, hide: true } }
+      );
+      expect(document.body.style.overflow).toBe("hidden");
+      rerender({ isOpen: false, hide: true });
+      expect(document.body.style.overflow).toBe("unset");
+    });
+
+    it("runs cleanup then effect when dependencies change", () => {
+      const { rerender } = renderHook(
+        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
+        { initialProps: { isOpen: true, hide: false } }
+      );
+      expect(document.body.style.overflow).toBe("hidden");
+      // Change hideScrollOnIsOpenFalse - triggers cleanup + re-run
+      rerender({ isOpen: true, hide: true });
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+  });
+});

package/src/hooks/use-body-scroll-lock.ts

@@ -1,34 +1,34 @@
-"use client";
-
-import { useEffect } from "react";
-
-/**
- * A custom hook that locks the body scroll based on the `isOpen` and `hideScrollOnIsOpenFalse` flags.
- *
- * @param {boolean} isOpen - Determines if the scroll should be locked (hidden).
- * @param {boolean} hideScrollOnIsOpenFalse - Determines if the scroll should be reset when `isOpen` is false.
- */
-function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean) {
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-
-    // To avoid content shifting when the scrollbar appears/disappears
-    const scrollbarWidth =
-      window.innerWidth - document.documentElement.clientWidth;
-    document.body.style.marginRight = isOpen ? `${scrollbarWidth}px` : "unset";
-
-    // Set the body overflow style based on the `isOpen` and `hideScrollOnIsOpenFalse` values.
-    document.body.style.overflow = isOpen
-      ? "hidden"
-      : hideScrollOnIsOpenFalse
-        ? "unset"
-        : document.body.style.overflow;
-
-    // Cleanup function to reset body overflow when the component unmounts or dependencies change.
-    return () => {
-      document.body.style.overflow = "unset";
-    };
-  }, [isOpen, hideScrollOnIsOpenFalse]);
-}
-
-export default useBodyScrollLock;
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * A custom hook that locks the body scroll based on the `isOpen` and `hideScrollOnIsOpenFalse` flags.
+ *
+ * @param {boolean} isOpen - Determines if the scroll should be locked (hidden).
+ * @param {boolean} hideScrollOnIsOpenFalse - Determines if the scroll should be reset when `isOpen` is false.
+ */
+function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean) {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    // To avoid content shifting when the scrollbar appears/disappears
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.marginRight = isOpen ? `${scrollbarWidth}px` : "unset";
+
+    // Set the body overflow style based on the `isOpen` and `hideScrollOnIsOpenFalse` values.
+    document.body.style.overflow = isOpen
+      ? "hidden"
+      : hideScrollOnIsOpenFalse
+        ? "unset"
+        : document.body.style.overflow;
+
+    // Cleanup function to reset body overflow when the component unmounts or dependencies change.
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, hideScrollOnIsOpenFalse]);
+}
+
+export default useBodyScrollLock;