@windstream/react-shared-components 0.1.20 → 0.1.22

package/src/contentful/index.ts

@@ -1,75 +1,75 @@
-// 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";
+// 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";

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;

package/src/hooks/use-outside-click.ts

@@ -1,17 +1,17 @@
-import { RefObject, useEffect } from "react";
-
-export const useOutsideClick = (ref: RefObject<any>, callback: () => void) => {
-  const handleClick = (e: MouseEvent) => {
-    if (!ref?.current?.contains(e.target)) {
-      callback();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("click", handleClick);
-
-    return () => {
-      document.removeEventListener("click", handleClick);
-    };
-  });
-};
+import { RefObject, useEffect } from "react";
+
+export const useOutsideClick = (ref: RefObject<any>, callback: () => void) => {
+  const handleClick = (e: MouseEvent) => {
+    if (!ref?.current?.contains(e.target)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+};

package/src/index.ts

@@ -1,96 +1,96 @@
-// Import global styles
-import "./styles/globals.css";
-
-// Core Components
-export { Button } from "./components/button";
-export type { ButtonProps } from "./components/button";
-
-export { Input, InputField, Input as TextInput } from "./components/input";
-export type { InputProps, InputFieldProps } from "./components/input";
-
-export { Image } from "./components/image";
-export type { ImageProps, ImageComponentProps } from "./components/image";
-
-export { NextImage } from "./components/next-image";
-export type { NextImageComponentProps } from "./components/next-image";
-
-export { Link } from "./components/link";
-export type { LinkProps } from "./components/link";
-
-export { List, ListItem } from "./components/list";
-export type { ListProps, ListItemProps } from "./components/list";
-
-export { MaterialIcon } from "./components/material-icon";
-export type { IconProps, IconName } from "./components/material-icon";
-
-export { Spinner } from "./components/spinner";
-export type { SpinnerProps } from "./components/spinner";
-
-export { Text } from "./components/text";
-export type { TextProps, TextVariant } from "./components/text";
-
-export { CallButton } from "./components/call-button";
-export type { CallButtonProps } from "./components/call-button";
-
-export { Modal } from "./components/modal";
-export type { ModalProps, Size, Shape, Animation } from "./components/modal";
-
-export { Accordion } from "./components/accordion";
-export type { AccordionProps } from "./components/accordion";
-
-export { Checkbox } from "./components/checkbox";
-export type { CheckboxProps } from "./components/checkbox";
-
-export { Select } from "./components/select";
-export type {
-  SelectProps,
-  SelectOption,
-  FilterOptions,
-} from "./components/select";
-
-export { AlertCard } from "./components/alert-card";
-export type { AlertCardProps } from "./components/alert-card";
-
-export { BrandButton } from "./components/brand-button";
-export type {
-  ButtonProps as BrandButtonProps,
-  ButtonVariantsT,
-  ButtonSizeT,
-  ResponsiveSize,
-} from "./components/brand-button";
-
-export { Checklist } from "./components/checklist";
-export type { ChecklistProps } from "./components/checklist";
-
-export { Collapse } from "./components/collapse";
-export type { CollapsibleProps } from "./components/collapse";
-
-export { Divider } from "./components/divider";
-export type { DividerProps } from "./components/divider";
-
-export { RadioButton } from "./components/radio-button";
-export type { RadioButtonProps } from "./components/radio-button";
-
-export { SeeMore } from "./components/see-more";
-export type { SeeMoreProps } from "./components/see-more";
-
-export { SelectPlanButton } from "./components/select-plan-button";
-export type { SelectPlanButtonProps } from "./components/select-plan-button";
-
-export { Skeleton, PageSkeleton } from "./components/skeleton";
-export type { SkeletonProps } from "./components/skeleton";
-
-export { Tooltip } from "./components/tooltip";
-export type { ToolTipProps } from "./components/tooltip";
-
-export { ViewCartButton } from "./components/view-cart-button";
-export type { ViewCartButtonProps } from "./components/view-cart-button";
-
-export { default as useBodyScrollLock } from "./hooks/use-body-scroll-lock";
-
-// Utils
-export { cx, clsx } from "./utils";
-export type { ClassValue } from "./utils";
-
-// Re-export types
-export type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
+// Import global styles
+import "./styles/globals.css";
+
+// Core Components
+export { Button } from "./components/button";
+export type { ButtonProps } from "./components/button";
+
+export { Input, InputField, Input as TextInput } from "./components/input";
+export type { InputProps, InputFieldProps } from "./components/input";
+
+export { Image } from "./components/image";
+export type { ImageProps, ImageComponentProps } from "./components/image";
+
+export { NextImage } from "./components/next-image";
+export type { NextImageComponentProps } from "./components/next-image";
+
+export { Link } from "./components/link";
+export type { LinkProps } from "./components/link";
+
+export { List, ListItem } from "./components/list";
+export type { ListProps, ListItemProps } from "./components/list";
+
+export { MaterialIcon } from "./components/material-icon";
+export type { IconProps, IconName } from "./components/material-icon";
+
+export { Spinner } from "./components/spinner";
+export type { SpinnerProps } from "./components/spinner";
+
+export { Text } from "./components/text";
+export type { TextProps, TextVariant } from "./components/text";
+
+export { CallButton } from "./components/call-button";
+export type { CallButtonProps } from "./components/call-button";
+
+export { Modal } from "./components/modal";
+export type { ModalProps, Size, Shape, Animation } from "./components/modal";
+
+export { Accordion } from "./components/accordion";
+export type { AccordionProps } from "./components/accordion";
+
+export { Checkbox } from "./components/checkbox";
+export type { CheckboxProps } from "./components/checkbox";
+
+export { Select } from "./components/select";
+export type {
+  SelectProps,
+  SelectOption,
+  FilterOptions,
+} from "./components/select";
+
+export { AlertCard } from "./components/alert-card";
+export type { AlertCardProps } from "./components/alert-card";
+
+export { BrandButton } from "./components/brand-button";
+export type {
+  ButtonProps as BrandButtonProps,
+  ButtonVariantsT,
+  ButtonSizeT,
+  ResponsiveSize,
+} from "./components/brand-button";
+
+export { Checklist } from "./components/checklist";
+export type { ChecklistProps } from "./components/checklist";
+
+export { Collapse } from "./components/collapse";
+export type { CollapsibleProps } from "./components/collapse";
+
+export { Divider } from "./components/divider";
+export type { DividerProps } from "./components/divider";
+
+export { RadioButton } from "./components/radio-button";
+export type { RadioButtonProps } from "./components/radio-button";
+
+export { SeeMore } from "./components/see-more";
+export type { SeeMoreProps } from "./components/see-more";
+
+export { SelectPlanButton } from "./components/select-plan-button";
+export type { SelectPlanButtonProps } from "./components/select-plan-button";
+
+export { Skeleton, PageSkeleton } from "./components/skeleton";
+export type { SkeletonProps } from "./components/skeleton";
+
+export { Tooltip } from "./components/tooltip";
+export type { ToolTipProps } from "./components/tooltip";
+
+export { ViewCartButton } from "./components/view-cart-button";
+export type { ViewCartButtonProps } from "./components/view-cart-button";
+
+export { default as useBodyScrollLock } from "./hooks/use-body-scroll-lock";
+
+// Utils
+export { cx, clsx } from "./utils";
+export type { ClassValue } from "./utils";
+
+// Re-export types
+export type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";

package/src/next/index.ts

@@ -1,5 +1,5 @@
-"use client";
-
-// Next.js specific components
-export { NextImage } from "../components/next-image";
-export type { NextImageComponentProps } from "../components/next-image";
+"use client";
+
+// Next.js specific components
+export { NextImage } from "../components/next-image";
+export type { NextImageComponentProps } from "../components/next-image";

package/src/setupTests.ts

@@ -1,46 +1,46 @@
-import "@testing-library/jest-dom";
-
-// Mock window.matchMedia
-Object.defineProperty(window, "matchMedia", {
-  writable: true,
-  value: (query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: () => {}, // deprecated
-    removeListener: () => {}, // deprecated
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    dispatchEvent: () => true,
-  }),
-});
-
-// Mock ResizeObserver
-global.ResizeObserver = class ResizeObserver {
-  observe = () => {};
-  unobserve = () => {};
-  disconnect = () => {};
-  constructor(_callback: ResizeObserverCallback) {}
-} as unknown as typeof ResizeObserver;
-
-// Mock IntersectionObserver
-global.IntersectionObserver = class IntersectionObserver {
-  observe = () => {};
-  unobserve = () => {};
-  disconnect = () => {};
-  constructor(_callback: IntersectionObserverCallback) {}
-} as unknown as typeof IntersectionObserver;
-
-// Mock scrollTo
-Object.defineProperty(window, "scrollTo", {
-  writable: true,
-  value: () => {},
-});
-
-// Mock getComputedStyle
-Object.defineProperty(window, "getComputedStyle", {
-  writable: true,
-  value: () => ({
-    getPropertyValue: () => "",
-  }),
-});
+import "@testing-library/jest-dom";
+
+// Mock window.matchMedia
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {}, // deprecated
+    removeListener: () => {}, // deprecated
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => true,
+  }),
+});
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  observe = () => {};
+  unobserve = () => {};
+  disconnect = () => {};
+  constructor(_callback: ResizeObserverCallback) {}
+} as unknown as typeof ResizeObserver;
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  observe = () => {};
+  unobserve = () => {};
+  disconnect = () => {};
+  constructor(_callback: IntersectionObserverCallback) {}
+} as unknown as typeof IntersectionObserver;
+
+// Mock scrollTo
+Object.defineProperty(window, "scrollTo", {
+  writable: true,
+  value: () => {},
+});
+
+// Mock getComputedStyle
+Object.defineProperty(window, "getComputedStyle", {
+  writable: true,
+  value: () => ({
+    getPropertyValue: () => "",
+  }),
+});

package/src/stories/DocsTemplate.tsx

@@ -1,24 +1,24 @@
-import {
-  ArgTypes,
-  Controls,
-  Description,
-  Primary,
-  Source,
-  Stories,
-  Subtitle,
-  Title,
-} from "@storybook/blocks";
-
-// Shared docs layout used by all component stories
-export const DocsPage = () => (
-  <>
-    <Title />
-    <Subtitle />
-    <Description />
-    <Primary />
-    <Source />
-    <Controls />
-    <Stories includePrimary={false} title="Examples" />
-    <ArgTypes />
-  </>
-);
+import {
+  ArgTypes,
+  Controls,
+  Description,
+  Primary,
+  Source,
+  Stories,
+  Subtitle,
+  Title,
+} from "@storybook/blocks";
+
+// Shared docs layout used by all component stories
+export const DocsPage = () => (
+  <>
+    <Title />
+    <Subtitle />
+    <Description />
+    <Primary />
+    <Source />
+    <Controls />
+    <Stories includePrimary={false} title="Examples" />
+    <ArgTypes />
+  </>
+);