@edux-design/modals 0.1.2 → 0.2.0

package/src/demos/Modal.stories.jsx

@@ -1,304 +0,0 @@
-import React, { useState } from "react";
-import {
-  Modal,
-  ModalTrigger,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  ModalClose,
-  ModalTitle,
-  ModalDescription,
-} from "../index";
-import { Button } from "@edux-design/buttons";
-
-const loremIpsumParagraphs = [
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-  "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-];
-
-const BodyCopy = () => (
-  <div className="space-y-12">
-    {loremIpsumParagraphs.map((paragraph) => (
-      <p key={paragraph} className="text-sm text-fg-subtle">
-        {paragraph}
-      </p>
-    ))}
-  </div>
-);
-
-const meta = {
-  title: "Components/Modal",
-  component: Modal,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component: `
-Centered **Modal** built on Radix Dialog primitives.
-
-Use for confirmations, forms, and focused blocking workflows.
-        `,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["small", "medium", "large", "full"],
-      description: "Width preset for the modal content.",
-      table: { defaultValue: { summary: "medium" } },
-    },
-  },
-};
-
-export default meta;
-
-export const Basic = {
-  render: (args) => (
-    <Modal>
-      <ModalTrigger asChild>
-        <Button>Open Modal</Button>
-      </ModalTrigger>
-      <ModalContent {...args}>
-        <ModalHeader>
-          <ModalTitle>Publish changes</ModalTitle>
-          <ModalDescription>
-            Review your changes before making them visible to learners.
-          </ModalDescription>
-        </ModalHeader>
-        <ModalBody>
-          <BodyCopy />
-        </ModalBody>
-        <ModalFooter>
-          <ModalClose asChild>
-            <Button isSecondary>Cancel</Button>
-          </ModalClose>
-          <Button>Publish</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  ),
-  args: {
-    size: "medium",
-  },
-};
-
-export const Controlled = {
-  render: (args) => {
-    const [open, setOpen] = useState(false);
-
-    return (
-      <Modal open={open} onOpenChange={setOpen}>
-        <ModalTrigger asChild>
-          <Button>
-            {open ? "Close Modal" : "Open Modal"}
-          </Button>
-        </ModalTrigger>
-        <ModalContent {...args}>
-          <ModalHeader>
-            <ModalTitle>Controlled modal</ModalTitle>
-            <ModalDescription>
-              State is managed externally via open and onOpenChange.
-            </ModalDescription>
-          </ModalHeader>
-          <ModalBody>
-            <BodyCopy />
-          </ModalBody>
-          <ModalFooter>
-            <Button isBare onClick={() => setOpen(false)}>
-              Dismiss
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    );
-  },
-  args: {
-    size: "medium",
-  },
-};
-
-export const Sizes = {
-  render: () => (
-    <div className="flex flex-wrap gap-12">
-      {["small", "medium", "large", "full"].map((size) => (
-        <Modal key={size}>
-          <ModalTrigger asChild>
-            <Button isSecondary>Size: {size}</Button>
-          </ModalTrigger>
-          <ModalContent size={size}>
-            <ModalHeader>
-              <ModalTitle>{size} modal</ModalTitle>
-              <ModalDescription>
-                Demonstrates the {size} content width preset.
-              </ModalDescription>
-            </ModalHeader>
-            <ModalBody>
-              <BodyCopy />
-            </ModalBody>
-          </ModalContent>
-        </Modal>
-      ))}
-    </div>
-  ),
-};
-
-export const CustomBackdrop = {
-  render: (args) => (
-    <Modal>
-      <ModalTrigger asChild>
-        <Button>Open With Backdrop</Button>
-      </ModalTrigger>
-      <ModalContent
-        {...args}
-        backdropProps={{
-          className: "bg-bg-primary-subtle opacity-80",
-        }}
-      >
-        <ModalHeader>
-          <ModalTitle>Custom backdrop</ModalTitle>
-          <ModalDescription>
-            Backdrop styles can be customized via backdropProps.
-          </ModalDescription>
-        </ModalHeader>
-        <ModalBody>
-          <BodyCopy />
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  ),
-  args: {
-    size: "medium",
-  },
-};
-
-export const FooterActions = {
-  render: (args) => (
-    <Modal>
-      <ModalTrigger asChild>
-        <Button isSecondary>Open Action Footer</Button>
-      </ModalTrigger>
-      <ModalContent {...args}>
-        <ModalHeader>
-          <ModalTitle>Save draft</ModalTitle>
-          <ModalDescription>
-            Footer actions can group secondary and primary outcomes.
-          </ModalDescription>
-        </ModalHeader>
-        <ModalBody>
-          <BodyCopy />
-        </ModalBody>
-        <ModalFooter>
-          <ModalClose asChild>
-            <Button isBare>Back</Button>
-          </ModalClose>
-          <Button isSecondary>Save Draft</Button>
-          <Button>Continue</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  ),
-  args: {
-    size: "medium",
-  },
-};
-
-export const DestructiveFooter = {
-  render: (args) => (
-    <Modal>
-      <ModalTrigger asChild>
-        <Button>Open Destructive Footer</Button>
-      </ModalTrigger>
-      <ModalContent {...args}>
-        <ModalHeader>
-          <ModalTitle>Delete manuscript version</ModalTitle>
-          <ModalDescription>
-            Use a footer to separate destructive actions from cancellation.
-          </ModalDescription>
-        </ModalHeader>
-        <ModalBody>
-          <BodyCopy />
-        </ModalBody>
-        <ModalFooter>
-          <ModalClose asChild>
-            <Button isSecondary>Cancel</Button>
-          </ModalClose>
-          <Button isDanger>Delete Version</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  ),
-  args: {
-    size: "small",
-  },
-};
-
-export const HeaderCloseButton = {
-  render: (args) => (
-    <Modal onClose={() => {}}>
-      <ModalTrigger asChild>
-        <Button isSecondary>Open Header Close</Button>
-      </ModalTrigger>
-      <ModalContent {...args}>
-        <ModalHeader>
-          <ModalTitle>Review publish settings</ModalTitle>
-          <ModalDescription>
-            Passing onClose to Modal automatically adds the header close action.
-          </ModalDescription>
-        </ModalHeader>
-        <ModalBody>
-          <BodyCopy />
-        </ModalBody>
-        <ModalFooter>
-          <ModalClose asChild>
-            <Button isSecondary>Cancel</Button>
-          </ModalClose>
-          <Button>Save</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  ),
-  args: {
-    size: "medium",
-  },
-};
-
-export const ControlledHeaderCloseButton = {
-  render: (args) => {
-    const [open, setOpen] = useState(false);
-
-    return (
-      <Modal
-        open={open}
-        onOpenChange={setOpen}
-        onClose={() => setOpen(false)}
-      >
-        <ModalTrigger asChild>
-          <Button>
-            {open ? "Modal Open" : "Open Controlled Header Close"}
-          </Button>
-        </ModalTrigger>
-        <ModalContent {...args}>
-          <ModalHeader>
-            <ModalTitle>Controlled header close</ModalTitle>
-            <ModalDescription>
-              The built-in close icon also works when modal state is controlled.
-            </ModalDescription>
-          </ModalHeader>
-          <ModalBody>
-            <BodyCopy />
-          </ModalBody>
-          <ModalFooter>
-            <Button isBare onClick={() => setOpen(false)}>
-              Dismiss
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    );
-  },
-  args: {
-    size: "medium",
-  },
-};

package/src/elements/Modal.jsx

@@ -1,228 +0,0 @@
-import React, {
-  createContext,
-  forwardRef,
-  useCallback,
-  useContext,
-  useMemo,
-} from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cx } from "@edux-design/utils";
-import { IconButton } from "@edux-design/buttons";
-import { Close } from "@edux-design/icons";
-
-const MODAL_OVERLAY_Z_INDEX = 2147483645;
-const MODAL_CONTENT_Z_INDEX = 2147483646;
-const ModalContext = createContext({ hasOnClose: false });
-const MODAL_SECTION_PADDING_X = "px-16";
-const MODAL_SECTION_PADDING_Y = "py-16";
-const MODAL_SURFACE_CLASSES = [
-  "fixed left-1/2 top-1/2 max-h-[92vh] -translate-x-1/2 -translate-y-1/2",
-  "bg-bg-base text-fg-base shadow-xl outline-none rounded-md border-2 border-border-subtle",
-  "flex flex-col overflow-hidden",
-  "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
-].join(" ");
-const MODAL_HEADER_CLASSES = [
-  "flex justify-between gap-12",
-  MODAL_SECTION_PADDING_X,
-  MODAL_SECTION_PADDING_Y,
-  "border-b border-border-subtle",
-].join(" ");
-const MODAL_HEADER_CONTENT_CLASSES = "flex min-w-0 flex-1 flex-col gap-4";
-const MODAL_BODY_CLASSES = [
-  "flex-1 overflow-auto",
-  MODAL_SECTION_PADDING_X,
-  MODAL_SECTION_PADDING_Y,
-].join(" ");
-const MODAL_FOOTER_CLASSES = [
-  "flex items-center justify-end gap-8",
-  MODAL_SECTION_PADDING_X,
-  MODAL_SECTION_PADDING_Y,
-  "border-t border-border-subtle",
-].join(" ");
-const MODAL_TITLE_CLASSES = "text-lg font-semibold text-fg-base";
-const MODAL_DESCRIPTION_CLASSES = "text-sm text-fg-subtle";
-const MODAL_CLOSE_LABEL = "Close modal";
-const MODAL_SIZE_CLASSES = {
-  small: "w-[min(92vw,420px)]",
-  medium: "w-[min(92vw,640px)]",
-  large: "w-[min(92vw,840px)]",
-  full: "w-[min(96vw,1200px)] h-[min(92vh,900px)]",
-};
-
-const getSizeClasses = (size) => {
-  return MODAL_SIZE_CLASSES[size] ?? MODAL_SIZE_CLASSES.medium;
-};
-
-export const Modal = ({
-  open,
-  defaultOpen,
-  onOpenChange,
-  onOpen,
-  onClose,
-  children,
-  ...props
-}) => {
-  const contextValue = useMemo(
-    () => ({ hasOnClose: typeof onClose === "function" }),
-    [onClose]
-  );
-
-  const handleOpenChange = useCallback(
-    (nextOpen) => {
-      onOpenChange?.(nextOpen);
-      if (nextOpen) {
-        onOpen?.();
-        return;
-      }
-      onClose?.();
-    },
-    [onClose, onOpen, onOpenChange]
-  );
-
-  return (
-    <ModalContext.Provider value={contextValue}>
-      <DialogPrimitive.Root
-        open={open}
-        defaultOpen={defaultOpen}
-        onOpenChange={handleOpenChange}
-        {...props}
-      >
-        {children}
-      </DialogPrimitive.Root>
-    </ModalContext.Provider>
-  );
-};
-
-export const ModalTrigger = DialogPrimitive.Trigger;
-export const ModalClose = DialogPrimitive.Close;
-export const ModalPortal = DialogPrimitive.Portal;
-
-const ModalHeaderCloseButton = () => (
-  <ModalClose asChild>
-    <IconButton
-      size="small"
-      isBare
-      icon={<Close aria-hidden="true" />}
-      aria-label={MODAL_CLOSE_LABEL}
-    />
-  </ModalClose>
-);
-
-export const ModalOverlay = forwardRef(
-  ({ className, style, ...props }, ref) => (
-    <DialogPrimitive.Overlay
-      ref={ref}
-      className={cx(
-        "fixed inset-0 bg-bg-focus-overlay opacity-70",
-        "data-[state=open]:animate-drawer-fade-in data-[state=closed]:animate-drawer-fade-out",
-        className
-      )}
-      style={{ zIndex: MODAL_OVERLAY_Z_INDEX, ...style }}
-      {...props}
-    />
-  )
-);
-
-ModalOverlay.displayName = "ModalOverlay";
-
-export const ModalContent = forwardRef(
-  (
-    {
-      children,
-      size = "medium",
-      className,
-      style,
-      backdropProps,
-      backDropProps,
-      contentProps = {},
-      ...restProps
-    },
-    ref
-  ) => {
-    const resolvedBackdropProps = backdropProps ?? backDropProps ?? {};
-    const { className: backdropClassName, style: backdropStyle, ...overlayProps } =
-      resolvedBackdropProps;
-
-    return (
-      <ModalPortal>
-        <ModalOverlay
-          {...overlayProps}
-          className={cx(backdropClassName)}
-          style={{ ...backdropStyle }}
-        />
-        <DialogPrimitive.Content
-          ref={ref}
-          className={cx(
-            MODAL_SURFACE_CLASSES,
-            getSizeClasses(size),
-            className
-          )}
-          style={{ zIndex: MODAL_CONTENT_Z_INDEX, ...style }}
-          {...contentProps}
-          {...restProps}
-        >
-          {children}
-        </DialogPrimitive.Content>
-      </ModalPortal>
-    );
-  }
-);
-
-ModalContent.displayName = "ModalContent";
-
-export const ModalHeader = forwardRef(({ className, children, ...props }, ref) => {
-  const { hasOnClose } = useContext(ModalContext);
-
-  return (
-    <div
-      ref={ref}
-      className={cx(MODAL_HEADER_CLASSES, className)}
-      {...props}
-    >
-      <div className={MODAL_HEADER_CONTENT_CLASSES}>{children}</div>
-      {hasOnClose ? <ModalHeaderCloseButton /> : null}
-    </div>
-  );
-});
-
-ModalHeader.displayName = "ModalHeader";
-
-export const ModalBody = forwardRef(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(MODAL_BODY_CLASSES, className)}
-    {...props}
-  />
-));
-
-ModalBody.displayName = "ModalBody";
-
-export const ModalFooter = forwardRef(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(MODAL_FOOTER_CLASSES, className)}
-    {...props}
-  />
-));
-
-ModalFooter.displayName = "ModalFooter";
-
-export const ModalTitle = forwardRef(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cx(MODAL_TITLE_CLASSES, className)}
-    {...props}
-  />
-));
-
-ModalTitle.displayName = "ModalTitle";
-
-export const ModalDescription = forwardRef(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cx(MODAL_DESCRIPTION_CLASSES, className)}
-    {...props}
-  />
-));
-
-ModalDescription.displayName = "ModalDescription";

package/src/elements/Modal.test.jsx

@@ -1,139 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import {
-  Modal,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  ModalTitle,
-  ModalDescription,
-} from "./Modal";
-
-let lastRootProps;
-
-vi.mock("@radix-ui/react-dialog", () => {
-  const Passthrough = ({ children, ...props }) => <div {...props}>{children}</div>;
-  const AsChildPassthrough = ({ children, asChild, ...props }) =>
-    asChild ? children : <button type="button" {...props}>{children}</button>;
-  const Buttonish = ({ children, ...props }) => (
-    <button type="button" {...props}>
-      {children}
-    </button>
-  );
-  const Content = React.forwardRef((props, ref) => (
-    <div ref={ref} data-testid="radix-content" {...props} />
-  ));
-  Content.displayName = "RadixContent";
-  const Overlay = React.forwardRef((props, ref) => (
-    <div ref={ref} data-testid="radix-overlay" {...props} />
-  ));
-  Overlay.displayName = "RadixOverlay";
-  const Root = ({ children, open, defaultOpen, onOpenChange }) => {
-    lastRootProps = { open, defaultOpen, onOpenChange };
-    return <div>{children}</div>;
-  };
-
-  return {
-    Root,
-    Trigger: Buttonish,
-    Portal: ({ children }) => <div>{children}</div>,
-    Overlay,
-    Content,
-    Close: AsChildPassthrough,
-    Title: Passthrough,
-    Description: Passthrough,
-  };
-});
-
-describe("ModalContent", () => {
-  it("renders overlay with default styling and supports custom backdrop props", () => {
-    render(
-      <Modal>
-        <ModalContent
-          size="large"
-          backdropProps={{ className: "custom-backdrop" }}
-        >
-          Body
-        </ModalContent>
-      </Modal>
-    );
-
-    const overlay = screen.getByTestId("radix-overlay");
-    expect(overlay).toHaveClass("bg-bg-focus-overlay");
-    expect(overlay).toHaveClass("custom-backdrop");
-    expect(overlay).toHaveStyle({ zIndex: "2147483645" });
-
-    const content = screen.getByTestId("radix-content");
-    expect(content).toHaveClass("left-1/2");
-    expect(content).toHaveClass("w-[min(92vw,840px)]");
-    expect(content).toHaveStyle({ zIndex: "2147483646" });
-  });
-
-  it("composes header, body, footer, title, and description sections", () => {
-    render(
-      <Modal>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Header</ModalTitle>
-            <ModalDescription>Details</ModalDescription>
-          </ModalHeader>
-          <ModalBody>Body</ModalBody>
-          <ModalFooter>Footer</ModalFooter>
-        </ModalContent>
-      </Modal>
-    );
-
-    expect(screen.getByText("Header")).toHaveClass("font-semibold");
-    expect(screen.getByText("Details")).toHaveClass("text-fg-subtle");
-    expect(screen.getByText("Body")).toHaveClass("overflow-auto");
-    expect(screen.getByText("Footer")).toHaveClass("border-t");
-  });
-
-  it("adds a close icon button to the header when Modal receives onClose", () => {
-    render(
-      <Modal onClose={vi.fn()}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Header</ModalTitle>
-          </ModalHeader>
-        </ModalContent>
-      </Modal>
-    );
-
-    expect(screen.getByLabelText("Close modal")).toBeInTheDocument();
-  });
-
-  it("does not add a close icon button to the header without onClose", () => {
-    render(
-      <Modal>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Header</ModalTitle>
-          </ModalHeader>
-        </ModalContent>
-      </Modal>
-    );
-
-    expect(screen.queryByLabelText("Close modal")).not.toBeInTheDocument();
-  });
-});
-
-describe("Modal", () => {
-  it("fires onOpen and onClose from onOpenChange", () => {
-    const onOpen = vi.fn();
-    const onClose = vi.fn();
-
-    render(
-      <Modal onOpen={onOpen} onClose={onClose}>
-        <ModalContent>Body</ModalContent>
-      </Modal>
-    );
-
-    lastRootProps.onOpenChange(true);
-    lastRootProps.onOpenChange(false);
-
-    expect(onOpen).toHaveBeenCalledTimes(1);
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-});

package/src/index.js

@@ -1,13 +0,0 @@
-export {
-  Modal,
-  ModalTrigger,
-  ModalClose,
-  ModalPortal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  ModalTitle,
-  ModalDescription,
-} from "./elements/Modal";