@windstream/react-shared-components 0.1.11 → 0.1.13

package/src/components/modal/types.ts

@@ -1,24 +1,24 @@
-import { Props as RModalProps } from "react-modal";
-
-export type Size = "xl" | "lg" | "md" | "sm" | "xs";
-export type Shape = "rounded" | "default";
-export type Animation = "popper" | "bottomSheet";
-
-type OwnProps = {
-  size?: Size;
-  shape?: Shape;
-  title?: string;
-  bodyClassName?: string | null | undefined;
-  closeWrapperClassName?: string | null | undefined;
-  closeButtonClassName?: string | null | undefined;
-  bodyStyle?: React.CSSProperties;
-  centered?: boolean;
-  hideScrollOnIsOpenFalse?: boolean;
-  parentSelector?: string;
-  animation?: Animation;
-  hideCloseButton?: boolean;
-  ["data-testid"]?: string;
-  ["data-cy"]?: string;
-};
-
-export type ModalProps = OwnProps & RModalProps;
+import { Props as RModalProps } from "react-modal";
+
+export type Size = "xl" | "lg" | "md" | "sm" | "xs";
+export type Shape = "rounded" | "default";
+export type Animation = "popper" | "bottomSheet";
+
+type OwnProps = {
+  size?: Size;
+  shape?: Shape;
+  title?: string;
+  bodyClassName?: string | null | undefined;
+  closeWrapperClassName?: string | null | undefined;
+  closeButtonClassName?: string | null | undefined;
+  bodyStyle?: React.CSSProperties;
+  centered?: boolean;
+  hideScrollOnIsOpenFalse?: boolean;
+  parentSelector?: string;
+  animation?: Animation;
+  hideCloseButton?: boolean;
+  ["data-testid"]?: string;
+  ["data-cy"]?: string;
+};
+
+export type ModalProps = OwnProps & RModalProps;

package/src/components/next-image/index.tsx

@@ -1,32 +1,54 @@
-"use client";
-
-import { forwardRef } from "react";
-import NextJsImage, { type ImageProps as NextImageProps } from "next/image";
-
-import { cx } from "@shared/utils";
-
-export interface NextImageComponentProps extends NextImageProps {
-  className?: string;
-}
-
-export const NextImage = forwardRef<HTMLImageElement, NextImageComponentProps>(
-  ({ className, ...props }, ref) => {
-    // Only disable optimization for SVG files from Contentful
-    // Remove query params before checking file extension
-    const srcString = typeof props.src === "string" ? props.src : "";
-    const urlWithoutParams = srcString.toLowerCase().split("?")[0] || "";
-    const isSvgFromContentful =
-      srcString.includes("images.ctfassets.net") &&
-      urlWithoutParams.endsWith(".svg");
-    return (
-      <NextJsImage
-        ref={ref}
-        className={cx(className)}
-        {...props}
-        unoptimized={isSvgFromContentful}
-      />
-    );
-  }
-);
-
-NextImage.displayName = "NextImage";
+"use client";
+
+import { forwardRef } from "react";
+import NextJsImage, {
+  type ImageLoaderProps,
+  type ImageProps as NextImageProps,
+} from "next/image";
+
+import { cx } from "@shared/utils";
+
+export interface NextImageComponentProps extends NextImageProps {
+  className?: string;
+}
+
+/**
+ * Image loader that uses Contentful's Image API to serve optimized WebP images
+ * at the requested width and quality, avoiding an extra round-trip through
+ * the Next.js image optimization server.
+ */
+const contentfulImageLoader = ({ src, width, quality }: ImageLoaderProps) => {
+  const url = new URL(src);
+  url.searchParams.set("w", String(width));
+  url.searchParams.set("q", String(quality || 90));
+  url.searchParams.set("fm", "webp");
+  return url.toString();
+};
+
+export const NextImage = forwardRef<HTMLImageElement, NextImageComponentProps>(
+  ({ className, ...props }, ref) => {
+    const srcString = typeof props.src === "string" ? props.src : "";
+    const urlWithoutParams = srcString.toLowerCase().split("?")[0] || "";
+    const isContentfulImage = srcString.includes("images.ctfassets.net");
+    const isSvgFromContentful =
+      isContentfulImage && urlWithoutParams.endsWith(".svg");
+
+    // Use Contentful's Image API for non-SVG Contentful images;
+    // skip optimization entirely for SVGs.
+    const loaderProps =
+      isContentfulImage && !isSvgFromContentful
+        ? { loader: contentfulImageLoader, unoptimized: false }
+        : { unoptimized: isSvgFromContentful };
+
+    return (
+      <NextJsImage
+        ref={ref}
+        className={cx(className)}
+        {...props}
+        {...loaderProps}
+      />
+    );
+  }
+);
+
+NextImage.displayName = "NextImage";

package/src/components/next-image/types.ts

@@ -1 +1 @@
-export type { NextImageComponentProps } from "./index";
+export type { NextImageComponentProps } from "./index";

package/src/components/pagination/index.tsx

@@ -1,100 +1,100 @@
-"use client";
-
-import React from "react";
-import { PaginationProps } from "./types";
-
-import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
-
-export const Pagination: React.FC<PaginationProps> = ({
-  currentPage,
-  totalPages,
-  onPageChange,
-  ariaLabel = "Pagination",
-}: PaginationProps) => {
-  const pageItems = buildPageItems(currentPage, totalPages);
-
-  const navBtnBase =
-    "inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent cursor-pointer transition-colors duration-150 hover:border-text-brand hover:text-text-brand disabled:opacity-40 disabled:cursor-not-allowed";
-
-  const pageBtnBase =
-    "inline-flex items-center justify-center w-9 h-9 rounded-lg text-body2 text-gray-700 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-gray-100 hover:text-gray-900";
-
-  const pageBtnActive = "bg-bg-surface-active font-bold hover:bg-bg-gray-300";
-
-  return (
-    <nav
-      className="flex items-center justify-center gap-1 px-6 pb-12"
-      aria-label={ariaLabel}
-    >
-      {/* Previous */}
-      <Button
-        className={navBtnBase}
-        onClick={() => onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-        aria-label="Go to previous page"
-      >
-        <MaterialIcon name="chevron_left" size={32} aria-hidden="true" />
-      </Button>
-
-      {/* Page numbers */}
-      {pageItems.map((item, idx) =>
-        item === "..." ? (
-          <span
-            key={`ellipsis-${idx}`}
-            className="inline-flex h-9 w-9 cursor-default items-center justify-center text-body2 text-gray-500"
-            aria-hidden="true"
-          >
-            …
-          </span>
-        ) : (
-          <Button
-            key={item}
-            className={`${pageBtnBase} ${item === currentPage ? pageBtnActive : ""}`}
-            onClick={() => onPageChange(item)}
-            aria-label={`Go to page ${item}`}
-            aria-current={item === currentPage ? "page" : undefined}
-          >
-            {item}
-          </Button>
-        )
-      )}
-
-      {/* Next */}
-      <Button
-        className={navBtnBase}
-        onClick={() => onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-        aria-label="Go to next page"
-      >
-        <MaterialIcon name="chevron_right" size={32} aria-hidden="true" />
-      </Button>
-    </nav>
-  );
-};
-
-/** Returns an array of page numbers and ellipsis to render. */
-function buildPageItems(current: number, total: number): (number | "...")[] {
-  if (total <= 7) {
-    return Array.from({ length: total }, (_, i) => i + 1);
-  }
-  const items: (number | "...")[] = [];
-  items.push(1);
-
-  if (current > 3) {
-    items.push("...");
-  }
-  const rangeStart = Math.max(2, current - 1);
-  const rangeEnd = Math.min(total - 1, current + 1);
-
-  for (let i = rangeStart; i <= rangeEnd; i++) {
-    items.push(i);
-  }
-
-  if (current < total - 2) {
-    items.push("...");
-  }
-
-  items.push(total);
-  return items;
-}
+"use client";
+
+import React from "react";
+import { PaginationProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  ariaLabel = "Pagination",
+}: PaginationProps) => {
+  const pageItems = buildPageItems(currentPage, totalPages);
+
+  const navBtnBase =
+    "inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent cursor-pointer transition-colors duration-150 hover:border-text-brand hover:text-text-brand disabled:opacity-40 disabled:cursor-not-allowed";
+
+  const pageBtnBase =
+    "inline-flex items-center justify-center w-9 h-9 rounded-lg text-body2 text-gray-700 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-gray-100 hover:text-gray-900";
+
+  const pageBtnActive = "bg-bg-surface-active font-bold hover:bg-bg-gray-300";
+
+  return (
+    <nav
+      className="flex items-center justify-center gap-1 px-6 pb-12"
+      aria-label={ariaLabel}
+    >
+      {/* Previous */}
+      <Button
+        className={navBtnBase}
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        aria-label="Go to previous page"
+      >
+        <MaterialIcon name="chevron_left" size={32} aria-hidden="true" />
+      </Button>
+
+      {/* Page numbers */}
+      {pageItems.map((item, idx) =>
+        item === "..." ? (
+          <span
+            key={`ellipsis-${idx}`}
+            className="inline-flex h-9 w-9 cursor-default items-center justify-center text-body2 text-gray-500"
+            aria-hidden="true"
+          >
+            …
+          </span>
+        ) : (
+          <Button
+            key={item}
+            className={`${pageBtnBase} ${item === currentPage ? pageBtnActive : ""}`}
+            onClick={() => onPageChange(item)}
+            aria-label={`Go to page ${item}`}
+            aria-current={item === currentPage ? "page" : undefined}
+          >
+            {item}
+          </Button>
+        )
+      )}
+
+      {/* Next */}
+      <Button
+        className={navBtnBase}
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        aria-label="Go to next page"
+      >
+        <MaterialIcon name="chevron_right" size={32} aria-hidden="true" />
+      </Button>
+    </nav>
+  );
+};
+
+/** Returns an array of page numbers and ellipsis to render. */
+function buildPageItems(current: number, total: number): (number | "...")[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const items: (number | "...")[] = [];
+  items.push(1);
+
+  if (current > 3) {
+    items.push("...");
+  }
+  const rangeStart = Math.max(2, current - 1);
+  const rangeEnd = Math.min(total - 1, current + 1);
+
+  for (let i = rangeStart; i <= rangeEnd; i++) {
+    items.push(i);
+  }
+
+  if (current < total - 2) {
+    items.push("...");
+  }
+
+  items.push(total);
+  return items;
+}

package/src/components/pagination/types.ts

@@ -1,6 +1,6 @@
-export interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-  ariaLabel?: string;
-}
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  ariaLabel?: string;
+}