@windstream/react-shared-components 0.1.38 → 0.1.40

package/src/contentful/blocks/text/index.tsx

@@ -1,12 +1,12 @@
-import { TextProps } from "./types";
-
-import { Text as TextComponent } from "@shared/components/text";
-
-export const Text: React.FC<{ fields: TextProps }> = ({ fields }) => {
-  return (
-    <div>
-      <TextComponent>Text Block</TextComponent>
-    </div>
-  );
-};
-export default Text;
+import { TextProps } from "./types";
+
+import { Text as TextComponent } from "@shared/components/text";
+
+export const Text: React.FC<{ fields: TextProps }> = ({ fields }) => {
+  return (
+    <div>
+      <TextComponent>Text Block</TextComponent>
+    </div>
+  );
+};
+export default Text;

package/src/contentful/blocks/text/types.ts

@@ -1 +1 @@
-export type TextProps = {};
+export type TextProps = {};

package/src/contentful/index.ts

@@ -1,81 +1,96 @@
-// Contentful Blocks
-export { Accordion } from "./blocks/accordion";
-export type { AccordionProps } from "./blocks/accordion/types";
-
-export { Callout } from "./blocks/callout";
-export type { CalloutProps } from "./blocks/callout/types";
-
-export { Cards } from "./blocks/cards";
-export type { CardsProps } from "./blocks/cards/types";
-
-export { SimpleCard } from "./blocks/cards/simple-card";
-export type { SimpleCardProps } from "./blocks/cards/simple-card/types";
-
-export { Carousel } from "./blocks/carousel";
-export type { CarouselProps } from "./blocks/carousel/types";
-
-export { FloatingBanner } from "./blocks/floating-banner";
-export type { FloatingBannerProps } from "./blocks/floating-banner/types";
-
-export { Footer } from "./blocks/footer";
-export type { FooterProps } from "./blocks/footer/types";
-
-export { ImagePromoBar } from "./blocks/image-promo-bar";
-export type { ImagePromoBarProps } from "./blocks/image-promo-bar/types";
-
-export { Navigation } from "./blocks/navigation";
-export type { NavigationProps } from "./blocks/navigation/types";
-
-export { PrimaryHero } from "./blocks/primary-hero";
-export type { PrimaryHeroProps } from "./blocks/primary-hero/types";
-
-export { Text } from "./blocks/text";
-export type { TextProps } from "./blocks/text/types";
-
-export { Button } from "./blocks/button";
-export type { ButtonProps } from "./blocks/button/types";
-
-export { Modal } from "./blocks/modal";
-export type { ModalProps } from "./blocks/modal/types";
-
-export { ShapeBackgroundWrapper } from "./blocks/shape-background-wrapper";
-export type { ShapeBackgroundWrapperProps } from "./blocks/shape-background-wrapper/types";
-
-export { CtaCallout } from "./blocks/cta-callout";
-export type { CtaCalloutProps } from "./blocks/cta-callout/types";
-
-export { FindKinetic } from "./blocks/find-kinetic";
-export type { FindKineticProps } from "./blocks/find-kinetic/types";
-
-export { ComparisonTable } from "./blocks/comparison-table";
-export type { ComparisonTableProps } from "./blocks/comparison-table/types";
-
-export { TestimonialCard } from "./blocks/cards/testimonial-card";
-export type { TestimonialCardProps } from "./blocks/cards/testimonial-card/types";
-
-export { ProductCard } from "./blocks/cards/product-card";
-export type { ProductCardProps } from "./blocks/cards/product-card/types";
-
-export { BlogCard } from "./blocks/cards/blog-card";
-export type { BlogCardProps } from "./blocks/cards/blog-card/types";
-
-export { BlogGrid } from "./blocks/blogs-grid";
-export type { BlogGridProps } from "./blocks/blogs-grid/types";
-
-export { BreadcrumbNavigation } from "./blocks/breadcrumbs";
-export type { BreadcrumbNavigationProps } from "./blocks/breadcrumbs/types";
-
-export { SearchBlock } from "./blocks/search-block";
-export type { SearchBlockProps } from "./blocks/search-block/types";
-
-export { AddressInputBanner } from "./blocks/address-input-banner";
-export type { AddressInputBannerProps } from "./blocks/address-input-banner/types";
-
-export { DynamicTabs } from "./blocks/dynamic-tabs";
-export type { DynamicTabsT } from "./blocks/dynamic-tabs/types";
-
-export { AnchoredBottomBanner } from "./blocks/anchored-bottom-banner";
-export type { AnchoredBottomBannerProps } from "./blocks/anchored-bottom-banner/types";
-
-export { default as CookieBanner } from "./blocks/cookiebanner";
-export type { TypeComponentRichTextFields as CookieBannerProps } from "./blocks/cookiebanner/type";
+// Contentful Blocks
+export { Accordion } from "./blocks/accordion";
+export type { AccordionProps } from "./blocks/accordion/types";
+
+export { Callout } from "./blocks/callout";
+export type { CalloutProps } from "./blocks/callout/types";
+
+export { Cards } from "./blocks/cards";
+export type { CardsProps } from "./blocks/cards/types";
+
+export { SimpleCard } from "./blocks/cards/simple-card";
+export type { SimpleCardProps } from "./blocks/cards/simple-card/types";
+
+export { Carousel } from "./blocks/carousel";
+export type { CarouselProps } from "./blocks/carousel/types";
+
+export { FloatingBanner } from "./blocks/floating-banner";
+export type { FloatingBannerProps } from "./blocks/floating-banner/types";
+
+export { Footer } from "./blocks/footer";
+export type { FooterProps } from "./blocks/footer/types";
+
+export { ImagePromoBar } from "./blocks/image-promo-bar";
+export type { ImagePromoBarProps } from "./blocks/image-promo-bar/types";
+
+export { Navigation } from "./blocks/navigation";
+export type { NavigationProps } from "./blocks/navigation/types";
+
+export { PrimaryHero } from "./blocks/primary-hero";
+export type { PrimaryHeroProps } from "./blocks/primary-hero/types";
+
+export { Text } from "./blocks/text";
+export type { TextProps } from "./blocks/text/types";
+
+export { Button } from "./blocks/button";
+export type { ButtonProps } from "./blocks/button/types";
+
+export { Modal } from "./blocks/modal";
+export type { ModalProps } from "./blocks/modal/types";
+
+export { ShapeBackgroundWrapper } from "./blocks/shape-background-wrapper";
+export type { ShapeBackgroundWrapperProps } from "./blocks/shape-background-wrapper/types";
+
+export { CtaCallout } from "./blocks/cta-callout";
+export type { CtaCalloutProps } from "./blocks/cta-callout/types";
+
+export { FindKinetic } from "./blocks/find-kinetic";
+export type { FindKineticProps } from "./blocks/find-kinetic/types";
+
+export { ComparisonTable } from "./blocks/comparison-table";
+export type { ComparisonTableProps } from "./blocks/comparison-table/types";
+
+export { TestimonialCard } from "./blocks/cards/testimonial-card";
+export type { TestimonialCardProps } from "./blocks/cards/testimonial-card/types";
+
+export { ProductCard } from "./blocks/cards/product-card";
+export type { ProductCardProps } from "./blocks/cards/product-card/types";
+
+export { BlogCard } from "./blocks/cards/blog-card";
+export type { BlogCardProps } from "./blocks/cards/blog-card/types";
+
+export { BlogGrid } from "./blocks/blogs-grid";
+export type { BlogGridProps } from "./blocks/blogs-grid/types";
+
+export { BreadcrumbNavigation } from "./blocks/breadcrumbs";
+export type { BreadcrumbNavigationProps } from "./blocks/breadcrumbs/types";
+
+export { SearchBlock } from "./blocks/search-block";
+export type { SearchBlockProps } from "./blocks/search-block/types";
+
+export { AddressInputBanner } from "./blocks/address-input-banner";
+export type { AddressInputBannerProps } from "./blocks/address-input-banner/types";
+
+export { DynamicTabs } from "./blocks/dynamic-tabs";
+export type { DynamicTabsT } from "./blocks/dynamic-tabs/types";
+
+export { AnchoredBottomBanner } from "./blocks/anchored-bottom-banner";
+export type { AnchoredBottomBannerProps } from "./blocks/anchored-bottom-banner/types";
+
+export { default as CookieBanner } from "./blocks/cookiebanner";
+export type { TypeComponentRichTextFields as CookieBannerProps } from "./blocks/cookiebanner/type";
+
+// Contentful Rich Text Hooks & Utils
+export { toDocument } from "../utils/contentful/to-document";
+
+export {
+  renderContentfulRichText,
+  useContentfulRichText,
+  renderContentfulRichTextTable,
+} from "../hooks/contentful/use-contentful-rich-text";
+
+export {
+  useProcessedChecklist,
+  label1BoldOptions,
+} from "../hooks/contentful/use-processed-check-list";
+export type { ProcessedChecklistItem } from "../hooks/contentful/use-processed-check-list";

package/src/hooks/contentful/use-contentful-rich-text.tsx

@@ -0,0 +1,310 @@
+import { useMemo, type ReactNode } from "react";
+
+import {
+  documentToReactComponents,
+  type Options,
+} from "@contentful/rich-text-react-renderer";
+import {
+  BLOCKS,
+  INLINES,
+  MARKS,
+  type Document,
+} from "@contentful/rich-text-types";
+import { Checklist } from "@shared/components/checklist";
+import { Link } from "@shared/components/link";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { toDocument } from "@shared/utils/contentful/to-document";
+
+const defaultOptions: Options = {
+  renderMark: {
+    [MARKS.BOLD]: text => <strong className="label3">{text}</strong>,
+    [MARKS.ITALIC]: text => <em>{text}</em>,
+    [MARKS.UNDERLINE]: text => <u>{text}</u>,
+    [MARKS.CODE]: text => <code>{text}</code>,
+  },
+  renderNode: {
+    [BLOCKS.PARAGRAPH]: (_node, children) => (
+      <div className="body3 mb-4">{children}</div>
+    ),
+    [BLOCKS.HEADING_1]: (node, children) => {
+      return (
+        <Text as="h1" className={"heading2 md:heading1"}>
+          {children}
+        </Text>
+      );
+    },
+    [BLOCKS.HEADING_2]: (node, children) => (
+      <Text as="h2" className={"heading6 md:heading5"}>
+        {children}
+      </Text>
+    ),
+    [BLOCKS.HEADING_3]: (node, children) => (
+      <Text as="h3" className={"heading6 md:heading5"}>
+        {children}
+      </Text>
+    ),
+    [BLOCKS.HEADING_4]: (node, children) => (
+      <Text as="h3" className={"headingClass"}>
+        {children}
+      </Text>
+    ),
+    [BLOCKS.HEADING_5]: (node, children) => (
+      <Text as="h3" className={"heading6 md:heading5"}>
+        {children}
+      </Text>
+    ),
+    [BLOCKS.HEADING_6]: (node, children) => (
+      <Text as="h3" className={"heading6"}>
+        {children}
+      </Text>
+    ),
+    [BLOCKS.QUOTE]: (_node, children) => <blockquote>{children}</blockquote>,
+    [BLOCKS.UL_LIST]: (_node, children) => <ul>{children}</ul>,
+    [BLOCKS.OL_LIST]: (_node, children) => <ol>{children}</ol>,
+    [BLOCKS.LIST_ITEM]: (_node, children) => <li>{children}</li>,
+
+    [INLINES.HYPERLINK]: (node, children) => {
+      const url = (node as any)?.data?.uri as string;
+      const external = /^https?:\/\//.test(url);
+      return (
+        <a
+          href={url}
+          target={external ? "_blank" : undefined}
+          rel={external ? "noopener noreferrer" : undefined}
+        >
+          {children}
+        </a>
+      );
+    },
+    [BLOCKS.EMBEDDED_ASSET]: node => {
+      const target = (node as any)?.data?.target;
+      const fields = target?.fields;
+      const url = target?.url || fields?.file?.url;
+      const alt = fields?.title || fields?.description || "Embedded asset";
+      if (!url) return null;
+      const src = url.startsWith("//") ? `https:${url}` : url;
+      return <img src={src} alt={alt} style={{ maxWidth: "100%" }} />;
+    },
+
+    [BLOCKS.EMBEDDED_ENTRY]: node => {
+      const entry = (node as any)?.data?.target;
+      const ctid = entry?.sys?.contentType?.sys?.id;
+      switch (ctid) {
+        case "callout":
+          return (
+            <aside
+              style={{ border: "1px solid #ddd", padding: 12, borderRadius: 8 }}
+            >
+              <strong>{entry.fields.title}</strong>
+              <div>{entry.fields.body}</div>
+            </aside>
+          );
+        default:
+          return null;
+      }
+    },
+
+    [INLINES.EMBEDDED_ENTRY]: node => {
+      const entry = (node as any)?.data?.target;
+      const ctid = entry?.sys?.contentType?.sys?.id;
+      switch (ctid) {
+        case "componentCheckList":
+          return (
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "4px",
+                padding: "2px 6px",
+                backgroundColor: "#f0fdf4",
+                border: "1px solid #bbf7d0",
+                borderRadius: "4px",
+                fontSize: "0.9em",
+              }}
+            >
+              ✅ {entry.fields.title}
+            </span>
+          );
+        default:
+          return <span>{entry?.fields?.title ?? ""}</span>;
+      }
+    },
+  },
+};
+/**
+ * Utility function to render Contentful Rich Text.
+ * Safe to use inside .map() loops.
+ */
+export function renderContentfulRichText(
+  doc: Document | null | undefined,
+  target?: boolean,
+  className: string = "body1",
+  linkClassName: string = "body1 font-bold",
+  options?: Options
+): ReactNode | null {
+  if (!doc || !Array.isArray(doc.content)) return null;
+
+  const merged: Options = {
+    ...defaultOptions,
+    ...options,
+    renderNode: {
+      ...defaultOptions.renderNode,
+      ...options?.renderNode,
+      // Logic for links based on the isTargetBlank flag
+      [BLOCKS.PARAGRAPH]: (_node, children) => (
+        <div className={className}>{children}</div>
+      ),
+      [INLINES.HYPERLINK]: (node, children) => {
+        const url = (node as any)?.data?.uri as string;
+        const external = /^https?:\/\//.test(url);
+
+        // Priority: 1. Manual flag from Contentful, 2. Regex check for external URLs
+        const shouldOpenBlank = target ?? external;
+
+        return (
+          <Link
+            href={url}
+            target={shouldOpenBlank ? "_blank" : "_self"}
+            rel={shouldOpenBlank ? "noopener noreferrer" : undefined}
+            variant="default"
+            className={linkClassName}
+          >
+            {children}
+          </Link>
+        );
+      },
+    },
+  };
+
+  // Directly return the rendered components without useMemo
+  return documentToReactComponents(doc, merged);
+}
+
+export function useContentfulRichText(
+  doc: Document | null | undefined,
+  options?: Options
+): ReactNode | null {
+  return useMemo(() => {
+    if (!doc || !Array.isArray(doc.content)) return null;
+    const merged: Options = {
+      ...defaultOptions,
+      renderMark: { ...defaultOptions.renderMark, ...options?.renderMark },
+      renderNode: { ...defaultOptions.renderNode, ...options?.renderNode },
+    };
+    return documentToReactComponents(doc, merged);
+  }, [doc, options]);
+}
+// 1. Remove useMemo and React Hook imports from this specific function's logic
+export function renderContentfulRichTextTable(
+  doc: Document | null | undefined,
+  links?: any
+) {
+  if (!doc || !Array.isArray(doc.content)) return null;
+
+  const options: Options = {
+    ...defaultOptions, // Spread defaultOptions so <p> and <strong> still work!
+    renderMark: {
+      ...defaultOptions.renderMark,
+      [MARKS.BOLD]: text => <strong className="label2">{text}</strong>,
+    },
+    renderNode: {
+      ...defaultOptions.renderNode,
+      [BLOCKS.PARAGRAPH]: (_node, children) => (
+        <div className="body2">{children}</div>
+      ),
+      [BLOCKS.TABLE]: (node: any, children) => (
+        <div className="comparison-table-wrapper my-5 w-full overflow-x-auto border-none md:overflow-hidden">
+          <table
+            className={`responsive-table w-full table-fixed border-collapse ${
+              node.content[0]?.content?.length > 2
+                ? "min-w-[100.1%]"
+                : "min-w-full"
+            }`}
+          >
+            <tbody>{children}</tbody>
+          </table>
+        </div>
+      ),
+      [BLOCKS.TABLE_ROW]: (node, children) => (
+        <tr className="border-b border-gray-200 last:border-0">{children}</tr>
+      ),
+      [BLOCKS.TABLE_HEADER_CELL]: (node: any, children) => {
+        // Find the parent row to check total column count
+        const isScrollable = node.parent?.content.length > 2;
+        return (
+          <th
+            className={`label4 break-words py-4 text-center ${isScrollable ? "sticky left-0 z-20 w-[50vw] min-w-[50vw] first:z-30 first:w-[50vw] first:min-w-[50vw] first:border-r" : "w-1/4 first:w-1/2"} `}
+          >
+            {children}
+          </th>
+        );
+      },
+      [BLOCKS.TABLE_CELL]: (node: any, children) => {
+        const isScrollable = node.parent?.content.length > 2;
+
+        // Logic to check for "yes" or "no"
+        // children[0].props.children is usually where the text sits if it's in a <p> tag
+        const rawText = node.content[0]?.content[0]?.value
+          ?.toLowerCase()
+          .trim();
+
+        const renderContent = () => {
+          if (rawText === "yes") {
+            return (
+              <MaterialIcon name="check_circle" color="#24A76A" fill={1} />
+            );
+          }
+          if (rawText === "no") {
+            return <MaterialIcon name="cancel" color="#CECECE" fill={1} />;
+          }
+          return children;
+        };
+
+        return (
+          <td
+            className={`rt-table-cell label-4 break-words bg-white py-2 text-center align-top first:text-left ${
+              isScrollable
+                ? "w-[50vw] min-w-[50vw] first:sticky first:left-0 first:z-10 first:w-[50vw] first:min-w-[50vw] first:border-r"
+                : "w-1/4 first:w-1/2"
+            } `}
+          >
+            <> {renderContent()}</>
+          </td>
+        );
+      },
+      [INLINES.EMBEDDED_ENTRY]: node => {
+        const entryId = node.data.target.sys.id;
+
+        const entry = links?.entries?.inline?.find(
+          (e: any) => e.sys.id === entryId
+        );
+        if (!entry) return null;
+
+        if (entry.__typename === "ComponentCheckList") {
+          // FIX: Don't use a Hook here.
+          // Map the items manually or use a non-hook helper function.
+          const items =
+            entry.list?.items?.map((item: any) =>
+              renderContentfulRichText(
+                toDocument(item?.checkListTitle ?? ""),
+                true,
+                "body2"
+              )
+            ) || [];
+          return (
+            <Checklist
+              items={items}
+              listIconName="disc"
+              listItemClassName="items-baseline body2"
+            />
+          );
+        }
+
+        return <span>{entry.title || ""}</span>;
+      },
+    },
+  };
+
+  return documentToReactComponents(doc, options);
+}

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

@@ -0,0 +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[]

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;