@windstream/react-shared-components 0.2.45 → 0.2.47

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

@@ -46,6 +46,12 @@ jest.mock("@shared/components/checklist", () => ({
   ),
 }));
 
+jest.mock("@shared/components/video-link", () => ({
+  VideoLink: ({ videoLink }: any) => (
+    <div data-testid="video-link" data-video-link={JSON.stringify(videoLink)} />
+  ),
+}));
+
 // Helper to build a Contentful Document
 function makeDoc(...content: any[]): Document {
   return {
@@ -334,6 +340,22 @@ describe("renderContentfulRichText", () => {
       const emptySpan = Array.from(spans).find(s => s.textContent === "");
       expect(emptySpan).toBeDefined();
     });
+
+    it("renders componentVideoLink inline entry (REST shape)", () => {
+      const doc = makeDoc({
+        nodeType: BLOCKS.PARAGRAPH,
+        data: {},
+        content: [
+          makeInlineEntry("componentVideoLink", {
+            link: "https://vimeo.com/123",
+          }),
+        ],
+      });
+      const { container } = render(<>{renderContentfulRichText(doc)}</>);
+      expect(
+        container.querySelector('[data-testid="video-link"]')
+      ).toBeInTheDocument();
+    });
   });
 
   describe("Embedded entry rendering via defaultOptions", () => {
@@ -354,6 +376,74 @@ describe("renderContentfulRichText", () => {
       const { container } = render(<>{renderContentfulRichText(doc)}</>);
       expect(container.querySelector("aside")).not.toBeInTheDocument();
     });
+
+    it("renders componentVideoLink block entry (REST shape)", () => {
+      const doc = makeDoc(
+        makeEmbeddedEntry("componentVideoLink", {
+          image: { fields: { file: { url: "https://cdn.com/poster.jpg" } } },
+          link: "https://youtube.com/watch?v=123",
+          videoPopup: true,
+        })
+      );
+      const { container } = render(<>{renderContentfulRichText(doc)}</>);
+      const el = container.querySelector('[data-testid="video-link"]')!;
+      expect(el).toBeInTheDocument();
+      const videoLink = JSON.parse(el.getAttribute("data-video-link")!);
+      expect(videoLink).toMatchObject({
+        image: "https://cdn.com/poster.jpg",
+        link: "https://youtube.com/watch?v=123",
+        videoPopup: true,
+      });
+    });
+
+    it("renders ComponentVideoLink (GraphQL __typename) block entry resolved from links", () => {
+      const unresolvedNode: any = {
+        nodeType: BLOCKS.EMBEDDED_ENTRY,
+        data: { target: { sys: { id: "video-1" } } },
+        content: [],
+      };
+      const doc = makeDoc(unresolvedNode);
+      const links = {
+        entries: {
+          block: [
+            {
+              __typename: "ComponentVideoLink",
+              sys: { id: "video-1" },
+              videoSourceType: "contentful",
+              videoAssetUrl: "https://videos.ctfassets.net/a/b/c.mp4",
+              videoAssetType: "video/mp4",
+              title: "My video",
+            },
+          ],
+          inline: [],
+        },
+      };
+      const { container } = render(
+        <>{renderContentfulRichText(doc, undefined, "body1", "body1 font-bold", undefined, links)}</>
+      );
+      const el = container.querySelector('[data-testid="video-link"]')!;
+      expect(el).toBeInTheDocument();
+      const videoLink = JSON.parse(el.getAttribute("data-video-link")!);
+      expect(videoLink).toMatchObject({
+        videoSourceType: "contentful",
+        videoAssetUrl: "https://videos.ctfassets.net/a/b/c.mp4",
+        videoAssetType: "video/mp4",
+        title: "My video",
+      });
+    });
+
+    it("returns null for a GraphQL-style entry that cannot be resolved from links", () => {
+      const unresolvedNode: any = {
+        nodeType: BLOCKS.EMBEDDED_ENTRY,
+        data: { target: { sys: { id: "missing" } } },
+        content: [],
+      };
+      const doc = makeDoc(unresolvedNode);
+      const { container } = render(<>{renderContentfulRichText(doc)}</>);
+      expect(
+        container.querySelector('[data-testid="video-link"]')
+      ).not.toBeInTheDocument();
+    });
   });
 
   describe("Embedded asset via defaultOptions", () => {
@@ -659,6 +749,34 @@ describe("useContentfulRichText", () => {
     expect(container.querySelector("aside")).not.toBeInTheDocument();
   });
 
+  it("resolves a GraphQL-style componentVideoLink entry via config.links", () => {
+    const unresolvedNode: any = {
+      nodeType: BLOCKS.EMBEDDED_ENTRY,
+      data: { target: { sys: { id: "video-2" } } },
+      content: [],
+    };
+    const doc = makeDoc(unresolvedNode);
+    const links = {
+      entries: {
+        block: [
+          {
+            __typename: "ComponentVideoLink",
+            sys: { id: "video-2" },
+            link: "https://youtube.com/watch?v=abc",
+          },
+        ],
+        inline: [],
+      },
+    };
+    const { result } = renderHook(() =>
+      useContentfulRichText(doc, undefined, { links })
+    );
+    const { container } = render(<>{result.current}</>);
+    expect(
+      container.querySelector('[data-testid="video-link"]')
+    ).toBeInTheDocument();
+  });
+
   it("renders inline entry with componentCheckList type", () => {
     const doc = makeDoc({
       nodeType: BLOCKS.PARAGRAPH,

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

@@ -14,6 +14,8 @@ 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 { VideoLink } from "@shared/components/video-link";
+import type { VideoLinkProps } from "@shared/components/video-link";
 import { toDocument } from "@shared/utils/contentful/to-document";
 
 const isEmptyParagraph = (node: any): boolean =>
@@ -23,6 +25,49 @@ const isEmptyParagraph = (node: any): boolean =>
       child?.nodeType === "text" && (!child.value || child.value.trim() === "")
   );
 
+// Resolves an embedded entry node's data. REST/CDA responses already resolve
+// `data.target` to the full entry (fields + sys.contentType). GraphQL responses
+// only include the sys.id reference, so the real entry must be looked up in the
+// `links.entries.block`/`links.entries.inline` arrays returned alongside `json`.
+const resolveEmbeddedEntry = (node: any, links?: any): any => {
+  const target = node?.data?.target;
+  if (target?.fields || target?.sys?.contentType) return target;
+  const id = target?.sys?.id;
+  if (!id) return null;
+  const pool = [
+    ...(links?.entries?.block ?? []),
+    ...(links?.entries?.inline ?? []),
+  ];
+  return pool.find((entry: any) => entry?.sys?.id === id) ?? null;
+};
+
+// Supports both REST (sys.contentType.sys.id) and GraphQL (__typename) shapes.
+const getEntryTypeId = (entry: any): string =>
+  entry?.sys?.contentType?.sys?.id ?? entry?.__typename ?? "";
+
+// REST entries expose data under `fields`; GraphQL entries have fields flattened.
+const getEntryFields = (entry: any): any => entry?.fields ?? entry ?? {};
+
+const toVideoLinkProps = (fields: any): VideoLinkProps => ({
+  image:
+    fields?.image?.fields?.file?.url ??
+    fields?.image?.url ??
+    fields?.image,
+  link: fields?.link,
+  videoPopup: Boolean(fields?.videoPopup),
+  videoSourceType: fields?.videoSourceType,
+  videoAssetUrl:
+    fields?.videoAssetUrl?.fields?.file?.url ??
+    fields?.videoAssetUrl?.url ??
+    fields?.videoAssetUrl,
+  videoAssetType:
+    fields?.videoAssetUrl?.fields?.file?.contentType ??
+    fields?.videoAssetUrl?.contentType ??
+    fields?.videoAssetType,
+  title: fields?.title ?? fields?.entryTitle,
+  description: fields?.description,
+});
+
 // A link is "external" only when it belongs to a different app than the one
 // currently rendering this shared component (business vs. main/www are separate
 // apps). Matching is environment-agnostic so a prod link like
@@ -80,7 +125,7 @@ const isExternalUrl = (url: string): boolean => {
   }
 };
 
-const defaultOptions: Options = {
+const getDefaultOptions = (links?: any): Options => ({
   renderMark: {
     [MARKS.BOLD]: text => <strong className="font-black">{text}</strong>,
     [MARKS.ITALIC]: text => <em>{text}</em>,
@@ -158,26 +203,33 @@ const defaultOptions: Options = {
     },
 
     [BLOCKS.EMBEDDED_ENTRY]: node => {
-      const entry = (node as any)?.data?.target;
-      const ctid = entry?.sys?.contentType?.sys?.id;
+      const entry = resolveEmbeddedEntry(node, links);
+      if (!entry) return null;
+      const ctid = getEntryTypeId(entry);
+      const fields = getEntryFields(entry);
       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>
+              <strong>{fields.title}</strong>
+              <div>{fields.body}</div>
             </aside>
           );
+        case "componentVideoLink":
+        case "ComponentVideoLink":
+          return <VideoLink videoLink={toVideoLinkProps(fields)} />;
         default:
           return null;
       }
     },
 
     [INLINES.EMBEDDED_ENTRY]: node => {
-      const entry = (node as any)?.data?.target;
-      const ctid = entry?.sys?.contentType?.sys?.id;
+      const entry = resolveEmbeddedEntry(node, links);
+      if (!entry) return null;
+      const ctid = getEntryTypeId(entry);
+      const fields = getEntryFields(entry);
       switch (ctid) {
         case "componentCheckList":
           return (
@@ -193,15 +245,18 @@ const defaultOptions: Options = {
                 fontSize: "0.9em",
               }}
             >
-              ✅ {entry.fields.title}
+              ✅ {fields.title}
             </span>
           );
+        case "componentVideoLink":
+        case "ComponentVideoLink":
+          return <VideoLink videoLink={toVideoLinkProps(fields)} />;
         default:
-          return <span>{entry?.fields?.title ?? ""}</span>;
+          return <span>{fields?.title ?? ""}</span>;
       }
     },
   },
-};
+});
 /**
  * Utility function to render Contentful Rich Text.
  * Safe to use inside .map() loops.
@@ -211,10 +266,12 @@ export function renderContentfulRichText(
   target?: boolean,
   className: string = "body1",
   linkClassName: string = "body1 font-bold",
-  options?: Options
+  options?: Options,
+  links?: any
 ): ReactNode | null {
   if (!doc || !Array.isArray(doc.content)) return null;
 
+  const defaultOptions = getDefaultOptions(links);
   const merged: Options = {
     ...defaultOptions,
     ...options,
@@ -260,10 +317,11 @@ export function renderContentfulRichText(
 export function useContentfulRichText(
   doc: Document | null | undefined,
   options?: Options,
-  config?: { boldClassName?: string }
+  config?: { boldClassName?: string; links?: any }
 ): ReactNode | null {
   return useMemo(() => {
     if (!doc || !Array.isArray(doc.content)) return null;
+    const defaultOptions = getDefaultOptions(config?.links);
     const merged: Options = {
       ...defaultOptions,
       renderMark: {
@@ -280,7 +338,7 @@ export function useContentfulRichText(
       renderNode: { ...defaultOptions.renderNode, ...options?.renderNode },
     };
     return documentToReactComponents(doc, merged);
-  }, [doc, options, config?.boldClassName]);
+  }, [doc, options, config?.boldClassName, config?.links]);
 }
 // 1. Remove useMemo and React Hook imports from this specific function's logic
 export function renderContentfulRichTextTable(
@@ -289,6 +347,7 @@ export function renderContentfulRichTextTable(
 ) {
   if (!doc || !Array.isArray(doc.content)) return null;
 
+  const defaultOptions = getDefaultOptions(links);
   const options: Options = {
     ...defaultOptions, // Spread defaultOptions so <p> and <strong> still work!
     renderMark: {

package/src/index.ts

@@ -29,6 +29,9 @@ export type { SpinnerProps } from "./components/spinner";
 export { Text } from "./components/text";
 export type { TextProps, TextVariant } from "./components/text";
 
+export { VideoLink } from "./components/video-link";
+export type { VideoLinkProps } from "./components/video-link";
+
 export { CallButton } from "./components/call-button";
 export type { CallButtonProps } from "./components/call-button";
 
@@ -83,6 +86,23 @@ export type { SkeletonProps } from "./components/skeleton";
 export { Tooltip } from "./components/tooltip";
 export type { ToolTipProps } from "./components/tooltip";
 
+export {
+  FiberForm,
+  fiberFormAddressCollectionFormSchema,
+  fiberFormInputInitialValues,
+  fiberFormInputList,
+} from "./contentful/blocks/fiber-form";
+export type {
+  FiberAddress,
+  FiberAddressAutocompleteProps,
+  FiberAddressAutocompleteResult,
+  FiberAddressCandidate,
+  FiberAddressUnit,
+  FiberFormInputList,
+  FiberFormProps,
+  FiberFormValues,
+} from "./contentful/blocks/fiber-form";
+
 export { AnimationWrapper } from "./components/animation-wrapper";
 export { DEFAULT_BUTTON_ANIMATION_TYPE } from "./components/animation-wrapper";
 export type {