@windstream/react-shared-components 0.1.67 → 0.1.68

package/src/components/modal/Modal.stories.tsx

@@ -1,171 +1,171 @@
-import { Modal } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Modal> = {
-  title: "Components/Modal",
-  component: Modal,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A flexible modal component with customizable sizing, animations, and behavior options. Supports portal rendering, escape key handling, and overlay click dismissal.",
-      },
-    },
-  },
-  argTypes: {
-    isOpen: {
-      control: { type: "boolean" },
-      description: "Whether the modal is open",
-    },
-    title: {
-      control: { type: "text" },
-      description: "Optional title for the modal header",
-    },
-    size: {
-      control: { type: "select" },
-      options: ["xs", "sm", "md", "lg", "xl"],
-      description: "Modal size variant",
-    },
-    animation: {
-      control: { type: "select" },
-      options: ["popper", "bottomSheet"],
-      description: "Animation variant",
-    },
-    shape: {
-      control: { type: "select" },
-      options: ["rounded", "square"],
-      description: "Shape variant",
-    },
-    shouldCloseOnEsc: {
-      control: { type: "boolean" },
-      description: "Whether to close on escape key",
-    },
-    shouldCloseOnOverlayClick: {
-      control: { type: "boolean" },
-      description: "Whether to close on overlay click",
-    },
-  },
-  args: {
-    isOpen: true,
-    title: "Modal Title",
-    size: "md",
-    animation: "popper",
-    shape: "rounded",
-    shouldCloseOnEsc: true,
-    shouldCloseOnOverlayClick: true,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Modal>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-600">
-          This is a default modal with some content. You can close it by
-          clicking the X button, pressing Escape, or clicking outside the modal.
-        </p>
-        <div className="flex justify-end space-x-2">
-          <button className="px-4 py-2 text-gray-600 hover:text-gray-800">
-            Cancel
-          </button>
-          <button className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
-            Confirm
-          </button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "xs",
-    children: (
-      <div className="text-center">
-        <p className="text-gray-600">Small modal content</p>
-      </div>
-    ),
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: "xl",
-    children: (
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Large Modal</h3>
-        <p className="text-gray-600">
-          This is a large modal that can accommodate more content. It's useful
-          for forms, detailed information, or complex layouts.
-        </p>
-        <div className="grid grid-cols-2 gap-4">
-          <div className="rounded bg-gray-100 p-4">Content 1</div>
-          <div className="rounded bg-gray-100 p-4">Content 2</div>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const BottomSheet: Story = {
-  args: {
-    animation: "bottomSheet",
-    size: "sm",
-    className: "top-auto bottom-0 max-w-none rounded-t-lg",
-    children: (
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Bottom Sheet</h3>
-        <p className="text-gray-600">
-          This modal slides up from the bottom, perfect for mobile interfaces.
-        </p>
-        <div className="space-y-2">
-          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
-            Option 1
-          </button>
-          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
-            Option 2
-          </button>
-          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
-            Option 3
-          </button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const WithoutTitle: Story = {
-  args: {
-    title: undefined,
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-600">
-          This modal doesn't have a title in the header, but still has a close
-          button.
-        </p>
-      </div>
-    ),
-  },
-};
-
-export const NoCloseButton: Story = {
-  args: {
-    closeButtonClassName: "hidden",
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-600">
-          This modal doesn't have a close button. You can only close it by
-          pressing Escape or clicking outside.
-        </p>
-      </div>
-    ),
-  },
-};
+import { Modal } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A flexible modal component with customizable sizing, animations, and behavior options. Supports portal rendering, escape key handling, and overlay click dismissal.",
+      },
+    },
+  },
+  argTypes: {
+    isOpen: {
+      control: { type: "boolean" },
+      description: "Whether the modal is open",
+    },
+    title: {
+      control: { type: "text" },
+      description: "Optional title for the modal header",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md", "lg", "xl"],
+      description: "Modal size variant",
+    },
+    animation: {
+      control: { type: "select" },
+      options: ["popper", "bottomSheet"],
+      description: "Animation variant",
+    },
+    shape: {
+      control: { type: "select" },
+      options: ["rounded", "square"],
+      description: "Shape variant",
+    },
+    shouldCloseOnEsc: {
+      control: { type: "boolean" },
+      description: "Whether to close on escape key",
+    },
+    shouldCloseOnOverlayClick: {
+      control: { type: "boolean" },
+      description: "Whether to close on overlay click",
+    },
+  },
+  args: {
+    isOpen: true,
+    title: "Modal Title",
+    size: "md",
+    animation: "popper",
+    shape: "rounded",
+    shouldCloseOnEsc: true,
+    shouldCloseOnOverlayClick: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-600">
+          This is a default modal with some content. You can close it by
+          clicking the X button, pressing Escape, or clicking outside the modal.
+        </p>
+        <div className="flex justify-end space-x-2">
+          <button className="px-4 py-2 text-gray-600 hover:text-gray-800">
+            Cancel
+          </button>
+          <button className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+            Confirm
+          </button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "xs",
+    children: (
+      <div className="text-center">
+        <p className="text-gray-600">Small modal content</p>
+      </div>
+    ),
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "xl",
+    children: (
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Large Modal</h3>
+        <p className="text-gray-600">
+          This is a large modal that can accommodate more content. It's useful
+          for forms, detailed information, or complex layouts.
+        </p>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="rounded bg-gray-100 p-4">Content 1</div>
+          <div className="rounded bg-gray-100 p-4">Content 2</div>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const BottomSheet: Story = {
+  args: {
+    animation: "bottomSheet",
+    size: "sm",
+    className: "top-auto bottom-0 max-w-none rounded-t-lg",
+    children: (
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Bottom Sheet</h3>
+        <p className="text-gray-600">
+          This modal slides up from the bottom, perfect for mobile interfaces.
+        </p>
+        <div className="space-y-2">
+          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
+            Option 1
+          </button>
+          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
+            Option 2
+          </button>
+          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
+            Option 3
+          </button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const WithoutTitle: Story = {
+  args: {
+    title: undefined,
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-600">
+          This modal doesn't have a title in the header, but still has a close
+          button.
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const NoCloseButton: Story = {
+  args: {
+    closeButtonClassName: "hidden",
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-600">
+          This modal doesn't have a close button. You can only close it by
+          pressing Escape or clicking outside.
+        </p>
+      </div>
+    ),
+  },
+};

package/src/components/modal/index.tsx

@@ -1,164 +1,164 @@
-"use client";
-
-import React, { useEffect, useMemo, useState } from "react";
-import useBodyScrollLock from "../../hooks/use-body-scroll-lock";
-import { cx } from "../../utils";
-import { Button } from "../button";
-import { MaterialIcon } from "../material-icon";
-import { Animation, ModalProps, Shape, Size } from "./types";
-import ReactModal from "react-modal";
-import { Transition } from "react-transition-group";
-
-const Modal: React.FC<ModalProps> = ({
-  size = "md",
-  shape = "default",
-  animation = "popper",
-  centered,
-  title,
-  isOpen,
-  children,
-  bodyStyle,
-  className,
-  bodyClassName,
-  portalClassName,
-  overlayClassName,
-  closeButtonClassName,
-  closeWrapperClassName,
-  onRequestClose,
-  parentSelector,
-  hideScrollOnIsOpenFalse = true,
-  hideCloseButton = false,
-  ...modalProps
-}: ModalProps) => {
-  // Use the custom hook to lock/unlock the body scroll when the modal is open/closed.
-  useBodyScrollLock(isOpen, hideScrollOnIsOpenFalse);
-
-  // Animation cannot run at the same time as the modal opening
-  const [isTransitioning, setIsTransitioning] = useState(false);
-
-  useEffect(() => {
-    // Run animation one frame after rendering the modal
-    setIsTransitioning(isOpen);
-  }, [isOpen]);
-
-  const parent = useMemo(() => {
-    /* istanbul ignore next */ if (typeof document === "undefined") return null;
-    let parent = document.querySelector("main") || document.body;
-    if (parentSelector)
-      parent = document.querySelector(parentSelector) || document.body;
-
-    return parent;
-  }, [parentSelector]);
-
-  if (!parent) return null;
-
-  // Don't render anything when modal is closed
-  if (!isOpen) {
-    return null;
-  }
-
-  const getSizeClasses = (size: Size) => {
-    const sizeMap = {
-      xl: "inset-[5%] min-h-fit",
-      lg: "inset-[10%] min-h-fit",
-      md: "inset-[15%] min-h-fit",
-      sm: "top-[18%] w-[640px]",
-      xs: "w-[calc(100%-30px)]",
-    };
-    return sizeMap[size];
-  };
-
-  const getAnimationClasses = (animation: Animation, state: string) => {
-    if (animation === "popper") {
-      const baseClasses = "transition-transform duration-300";
-      if (state === "entering" || state === "entered") {
-        return `${baseClasses} opacity-100 ${state === "entered" ? "translate-y-0 pointer-events-auto" : ""}`;
-      }
-      if (state === "exiting" || state === "exited") {
-        return `${baseClasses} opacity-0 translate-y-[-18px] duration-[180ms]`;
-      }
-      return `${baseClasses} opacity-0 translate-y-[-18px]`;
-    }
-    if (animation === "bottomSheet") {
-      const baseClasses = "transition-transform duration-200 ease-in-out";
-      if (state === "entering" || state === "entered") {
-        return `${baseClasses} opacity-100 ${state === "entered" ? "translate-y-0 pointer-events-auto" : ""}`;
-      }
-      if (state === "exiting" || state === "exited") {
-        return `${baseClasses} opacity-0 translate-y-full duration-[180ms]`;
-      }
-      return `${baseClasses} opacity-0 translate-y-full`;
-    }
-    return "";
-  };
-
-  return (
-    <Transition enter exit in={isTransitioning} timeout={0}>
-      {(state: string) => (
-        <ReactModal
-          ariaHideApp={false}
-          isOpen={isOpen}
-          onRequestClose={onRequestClose}
-          closeTimeoutMS={0}
-          parentSelector={() => parent}
-          className={cx(
-            "absolute min-w-[150px] max-w-[calc(100vw-30px)] overflow-auto rounded-lg bg-white outline-none",
-            getSizeClasses(size),
-            shape === "rounded" && "rounded-3xl",
-            centered && "top-0 translate-y-[calc(50vh-50%)]",
-            getAnimationClasses(animation, state),
-            className
-          )}
-          portalClassName={cx("z-80", portalClassName)}
-          overlayClassName={cx(
-            "z-80 fixed inset-0 bg-black/50 flex items-center justify-center pb-[300px]",
-            overlayClassName
-          )}
-          {...modalProps}
-        >
-          {!hideCloseButton && (
-            <div className={cx(closeWrapperClassName)}>
-              <Button
-                className={cx(
-                  "absolute right-0 top-0 float-right h-6 cursor-pointer p-5 text-text",
-                  closeButtonClassName
-                )}
-                onClick={onRequestClose as () => void}
-                data-testid="close-button"
-                data-track-element-name="modal_close_button"
-                data-track-click-text="Close Modal"
-                data-track-element-clicked="modal"
-              >
-                <MaterialIcon name="close" size={24} />
-              </Button>
-            </div>
-          )}
-
-          {title ? (
-            <div
-              className={cx(
-                "border-b border-border-secondary-on-bg-fill px-[7px] py-[7px] text-text"
-              )}
-            >
-              {title}
-            </div>
-          ) : null}
-          <div
-            className={cx("p-5", bodyClassName)}
-            style={bodyStyle}
-            data-testid={modalProps["data-testid"]}
-            data-cy={modalProps["data-cy"]}
-          >
-            {children}
-          </div>
-        </ReactModal>
-      )}
-    </Transition>
-  );
-};
-
-export { Modal };
-
-Modal.displayName = "Modal";
-
-export type { ModalProps, Size, Shape, Animation };
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import useBodyScrollLock from "../../hooks/use-body-scroll-lock";
+import { cx } from "../../utils";
+import { Button } from "../button";
+import { MaterialIcon } from "../material-icon";
+import { Animation, ModalProps, Shape, Size } from "./types";
+import ReactModal from "react-modal";
+import { Transition } from "react-transition-group";
+
+const Modal: React.FC<ModalProps> = ({
+  size = "md",
+  shape = "default",
+  animation = "popper",
+  centered,
+  title,
+  isOpen,
+  children,
+  bodyStyle,
+  className,
+  bodyClassName,
+  portalClassName,
+  overlayClassName,
+  closeButtonClassName,
+  closeWrapperClassName,
+  onRequestClose,
+  parentSelector,
+  hideScrollOnIsOpenFalse = true,
+  hideCloseButton = false,
+  ...modalProps
+}: ModalProps) => {
+  // Use the custom hook to lock/unlock the body scroll when the modal is open/closed.
+  useBodyScrollLock(isOpen, hideScrollOnIsOpenFalse);
+
+  // Animation cannot run at the same time as the modal opening
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    // Run animation one frame after rendering the modal
+    setIsTransitioning(isOpen);
+  }, [isOpen]);
+
+  const parent = useMemo(() => {
+    /* istanbul ignore next */ if (typeof document === "undefined") return null;
+    let parent = document.querySelector("main") || document.body;
+    if (parentSelector)
+      parent = document.querySelector(parentSelector) || document.body;
+
+    return parent;
+  }, [parentSelector]);
+
+  if (!parent) return null;
+
+  // Don't render anything when modal is closed
+  if (!isOpen) {
+    return null;
+  }
+
+  const getSizeClasses = (size: Size) => {
+    const sizeMap = {
+      xl: "inset-[5%] min-h-fit",
+      lg: "inset-[10%] min-h-fit",
+      md: "inset-[15%] min-h-fit",
+      sm: "top-[18%] w-[640px]",
+      xs: "w-[calc(100%-30px)]",
+    };
+    return sizeMap[size];
+  };
+
+  const getAnimationClasses = (animation: Animation, state: string) => {
+    if (animation === "popper") {
+      const baseClasses = "transition-transform duration-300";
+      if (state === "entering" || state === "entered") {
+        return `${baseClasses} opacity-100 ${state === "entered" ? "translate-y-0 pointer-events-auto" : ""}`;
+      }
+      if (state === "exiting" || state === "exited") {
+        return `${baseClasses} opacity-0 translate-y-[-18px] duration-[180ms]`;
+      }
+      return `${baseClasses} opacity-0 translate-y-[-18px]`;
+    }
+    if (animation === "bottomSheet") {
+      const baseClasses = "transition-transform duration-200 ease-in-out";
+      if (state === "entering" || state === "entered") {
+        return `${baseClasses} opacity-100 ${state === "entered" ? "translate-y-0 pointer-events-auto" : ""}`;
+      }
+      if (state === "exiting" || state === "exited") {
+        return `${baseClasses} opacity-0 translate-y-full duration-[180ms]`;
+      }
+      return `${baseClasses} opacity-0 translate-y-full`;
+    }
+    return "";
+  };
+
+  return (
+    <Transition enter exit in={isTransitioning} timeout={0}>
+      {(state: string) => (
+        <ReactModal
+          ariaHideApp={false}
+          isOpen={isOpen}
+          onRequestClose={onRequestClose}
+          closeTimeoutMS={0}
+          parentSelector={() => parent}
+          className={cx(
+            "absolute min-w-[150px] max-w-[calc(100vw-30px)] overflow-auto rounded-lg bg-white outline-none",
+            getSizeClasses(size),
+            shape === "rounded" && "rounded-3xl",
+            centered && "top-0 translate-y-[calc(50vh-50%)]",
+            getAnimationClasses(animation, state),
+            className
+          )}
+          portalClassName={cx("z-80", portalClassName)}
+          overlayClassName={cx(
+            "z-80 fixed inset-0 bg-black/50 flex items-center justify-center pb-[300px]",
+            overlayClassName
+          )}
+          {...modalProps}
+        >
+          {!hideCloseButton && (
+            <div className={cx(closeWrapperClassName)}>
+              <Button
+                className={cx(
+                  "absolute right-0 top-0 float-right h-6 cursor-pointer p-5 text-text",
+                  closeButtonClassName
+                )}
+                onClick={onRequestClose as () => void}
+                data-testid="close-button"
+                data-track-element-name="modal_close_button"
+                data-track-click-text="Close Modal"
+                data-track-element-clicked="modal"
+              >
+                <MaterialIcon name="close" size={24} />
+              </Button>
+            </div>
+          )}
+
+          {title ? (
+            <div
+              className={cx(
+                "border-b border-border-secondary-on-bg-fill px-[7px] py-[7px] text-text"
+              )}
+            >
+              {title}
+            </div>
+          ) : null}
+          <div
+            className={cx("p-5", bodyClassName)}
+            style={bodyStyle}
+            data-testid={modalProps["data-testid"]}
+            data-cy={modalProps["data-cy"]}
+          >
+            {children}
+          </div>
+        </ReactModal>
+      )}
+    </Transition>
+  );
+};
+
+export { Modal };
+
+Modal.displayName = "Modal";
+
+export type { ModalProps, Size, Shape, Animation };