@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

package/src/Notifications/BaseModal/BaseModal.tsx

@@ -1,149 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-import { useGetDomRoot } from "../../hooks/useGetDomRoot";
-import classes from "./BaseModal.module.scss";
-import { labelId, descriptionId } from "./BaseModalContext";
-
-const SCROLL_PROPERTY_NAME = "overflow";
-const SCROLL_PROPERTY_VALUE = "hidden";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  id: string;
-  children: React.ReactNode;
-  open: boolean;
-  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
-  className?: string;
-  containerProps?: ComponentPropsWithRef<"div">;
-  backdropProps?: ComponentPropsWithRef<"div">;
-  labelledby?: string;
-  describedby?: string;
-  disableEscapeKeyDown?: boolean;
-  disableBackdrop?: boolean;
-  forceContainerOpen?: boolean;
-  zIndex?: number;
-  domRoot?: HTMLElement;
-}
-
-export const useSetBodyScroll = (open: boolean) => {
-  const hideBodyScroll = () => {
-    document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;
-  };
-
-  const showBodyScroll = () => {
-    const allModalsClosed =
-      document.querySelectorAll("[role=dialog][data-hidden=false]").length === 0;
-    if (allModalsClosed) {
-      document.body.style.removeProperty(SCROLL_PROPERTY_NAME);
-    }
-  };
-
-  useEffect(() => {
-    if (open) {
-      hideBodyScroll();
-    } else {
-      showBodyScroll();
-    }
-  }, [open]);
-};
-
-const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    id,
-    children,
-    open,
-    onClose,
-    className = "",
-    containerProps,
-    backdropProps,
-    labelledby,
-    describedby,
-    disableEscapeKeyDown = false,
-    disableBackdrop = false,
-    forceContainerOpen = false,
-    zIndex,
-    domRoot,
-    ...rest
-  }: Props,
-  ref
-) => {
-  useSetBodyScroll(open);
-  const wrappingDivRef = useRef(null);
-  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
-
-  const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (!disableEscapeKeyDown && event.key === "Escape") {
-      event.stopPropagation();
-      onClose && onClose();
-    }
-  };
-
-  const handleBackdropClick = () => !disableBackdrop && onClose && onClose();
-
-  return (
-    <div ref={wrappingDivRef}>
-      {createPortal(
-        <div
-          {...rest}
-          ref={ref}
-          id={id}
-          className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby={labelledby || labelId(id)}
-          aria-describedby={describedby || descriptionId(id)}
-          aria-hidden={!open}
-          tabIndex={-1}
-          data-hidden={!open}
-          onKeyDown={handleEscKeyPress}
-          style={{ zIndex }}
-        >
-          <div
-            {...backdropProps}
-            className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
-            onClick={handleBackdropClick}
-          ></div>
-          {forceContainerOpen ? (
-            <div
-              {...containerProps}
-              aria-hidden={!open}
-              hidden={!open}
-              style={{ zIndex: zIndex && zIndex + 1 }}
-              className={`${classes["container"]} ${containerProps?.className ?? ""}`}
-            >
-              {children}
-            </div>
-          ) : (
-            open && (
-              <div
-                {...containerProps}
-                style={{ zIndex: zIndex && zIndex + 1 }}
-                className={`${classes["container"]} ${containerProps?.className ?? ""}`}
-              >
-                {children}
-              </div>
-            )
-          )}
-        </div>,
-        root
-      )}
-    </div>
-  );
-};
-
-export const BaseModal = React.forwardRef(BaseModalComponent);

package/src/Notifications/BaseModal/BaseModalContent/BaseModalContent.tsx

@@ -1,60 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, {
-  ForwardRefRenderFunction,
-  ComponentPropsWithRef,
-  createRef,
-  useEffect
-} from "react";
-import classes from "./BaseModalContent.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  id?: string;
-  children: React.ReactNode;
-  className?: string;
-  disableAutoFocus?: boolean;
-}
-
-const BaseModalContentComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { id, children, className = "", disableAutoFocus = false, ...rest }: Props,
-  ref
-) => {
-  const contentRef = createRef<HTMLDivElement>();
-
-  useEffect(() => {
-    if (!disableAutoFocus && ref) {
-      (ref as React.RefObject<HTMLDivElement>).current?.focus();
-    } else if (!disableAutoFocus) {
-      contentRef.current?.focus();
-    }
-  }, []);
-
-  /**tabIndex is set to be able to do focus on that element which we need for catching keyDown events */
-  return (
-    <div
-      {...rest}
-      ref={ref || contentRef}
-      id={id}
-      className={`${classes["content"]} ${className}`}
-      tabIndex={-1}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const BaseModalContent = React.forwardRef(BaseModalContentComponent);

package/src/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.test.tsx

@@ -1,74 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { useEffect, useRef } from "react";
-import { BaseModalHeader, Props } from "./BaseModalHeader";
-import { render, getByRole, getByTestId, getByText } from "@testing-library/react";
-import { labelId } from "../BaseModalContext";
-import userEvent from "@testing-library/user-event";
-
-const additionalContent = "Additional content";
-const initParams: Props = {
-  id: labelId("modal"),
-  title: "Example title",
-  onClose: jest.fn(),
-  children: <div data-testid="additional-content">{additionalContent}</div>
-};
-
-describe("BaseModalHeader", () => {
-  it("renders without crashing", () => {
-    const { container } = render(<BaseModalHeader {...initParams} />);
-    const closeBtn = getByRole(container, "button");
-    expect(initParams.onClose).toBeCalledTimes(0);
-
-    userEvent.click(closeBtn);
-
-    const dialogContentContainer = container.children[0];
-    const titleContainer = getByText(container, initParams.title);
-    expect(dialogContentContainer).toHaveClass("header");
-    expect(titleContainer).toHaveAttribute("id", "modal-label");
-    expect(getByTestId(container, "additional-content")).toHaveTextContent(additionalContent);
-    expect(initParams.onClose).toBeCalledTimes(1);
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return (
-        <BaseModalHeader id="test" title="test" onClose={jest.fn()} data-ref="testing" ref={ref} />
-      );
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

package/src/Notifications/Dialog/Dialog.test.tsx

@@ -1,130 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { useEffect, useRef } from "react";
-import { Dialog, Props } from "./Dialog";
-import { render, getAllByRole } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const initParams: Props = {
-  id: "modal",
-  open: true,
-  onClose: jest.fn(),
-  alignActions: "left",
-  title: "Example dialog",
-  primaryAction: {
-    label: "Save",
-    onClick: jest.fn()
-  },
-  secondaryAction: {
-    label: "Cancel",
-    onClick: jest.fn()
-  },
-  children: "This is example dialog content."
-};
-
-const getButtons = (container: HTMLElement) => getAllByRole(container, "button");
-
-describe("Dialog", () => {
-  it("renders without crashing", () => {
-    const { getByText } = render(<Dialog {...initParams} />);
-    const [primaryButton, secondaryButton] = getButtons(document.body);
-
-    expect(getByText(initParams.title)).toBeDefined();
-    expect(getByText(initParams.children as string)).toBeDefined();
-    const actionsDiv = primaryButton.closest("div");
-    expect(actionsDiv).toHaveClass("left");
-    expect(actionsDiv?.children[0]).toEqual(primaryButton);
-    expect(actionsDiv?.children[1]).toEqual(secondaryButton);
-    expect(primaryButton).toHaveClass("fill");
-    expect(secondaryButton).toHaveClass("text");
-  });
-
-  it("renders action aligned to right", () => {
-    render(<Dialog {...initParams} alignActions="right" />);
-    const [secondaryButton, primaryButton] = getButtons(document.body);
-
-    const actionsDiv = primaryButton.closest("div");
-    expect(actionsDiv).not.toHaveClass("left");
-    expect(actionsDiv?.children[0]).toEqual(secondaryButton);
-    expect(actionsDiv?.children[1]).toEqual(primaryButton);
-    expect(primaryButton).toHaveClass("fill");
-    expect(secondaryButton).toHaveClass("text");
-  });
-
-  it("renders only one button", () => {
-    render(<Dialog {...initParams} secondaryAction={undefined} />);
-    const buttons = getButtons(document.body);
-
-    expect(buttons).toHaveLength(1);
-    expect(buttons[0]).toHaveClass("fill");
-  });
-
-  it("should handle clicking on buttons and ENTER press", () => {
-    render(<Dialog {...initParams} />);
-    const [primaryButton, secondaryButton] = getButtons(document.body);
-    expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(0);
-    expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(0);
-    expect(initParams.onClose).toHaveBeenCalledTimes(0);
-
-    const autoSummissionInput = document.body.querySelector("input") as HTMLElement;
-    userEvent.type(autoSummissionInput, "{enter}");
-    expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(1);
-
-    userEvent.click(primaryButton);
-    expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(2);
-    userEvent.click(secondaryButton);
-    expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return (
-        <Dialog
-          children="test"
-          open={false}
-          alignActions={"left"}
-          onClose={jest.fn()}
-          primaryAction={{ label: "test", onClick: jest.fn() }}
-          title="test"
-          id="test"
-          data-ref="testing"
-          ref={ref}
-        />
-      );
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

package/src/Notifications/Dialog/Dialog.tsx

@@ -1,129 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useState } from "react";
-import { BaseModal } from "../BaseModal/BaseModal";
-import { BaseModalContent } from "../BaseModal/BaseModalContent/BaseModalContent";
-import { DialogActions } from "./DialogActions/DialogActions";
-import classes from "./Dialog.module.scss";
-import { DialogTitle } from "./DialogTitle/DialogTitle";
-import { Button, Props as ButtonProps } from "../../Button/Button";
-import { labelId, descriptionId } from "../BaseModal/BaseModalContext";
-import { generateID } from "../../util/helper";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  id?: string;
-  open: boolean;
-  children: React.ReactNode;
-  alignActions: "left" | "right";
-  onClose: () => void;
-  title: string;
-  primaryAction: Action;
-  secondaryAction?: Action;
-  zIndex?: number;
-  disableEscapeKeyDown?: boolean;
-}
-
-export interface Action extends Omit<ButtonProps, "variant" | "ref"> {
-  label: string;
-  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
-}
-
-const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    id,
-    open,
-    children,
-    alignActions,
-    onClose,
-    title,
-    primaryAction,
-    secondaryAction,
-    zIndex,
-    disableEscapeKeyDown = true,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const [dialogId] = useState(id ?? generateID(20));
-  const { label: primaryLabel, ...restOfPrimaryAction } = primaryAction;
-  const PrimaryButton = (
-    <Button key="primary" {...restOfPrimaryAction}>
-      {primaryLabel}
-    </Button>
-  );
-  const TertiaryButton =
-    secondaryAction &&
-    (function () {
-      const { label: secondaryLabel, ...restOfSecondaryAction } = secondaryAction;
-      return (
-        <Button key="tertiary" variant="text" {...restOfSecondaryAction}>
-          {secondaryLabel}
-        </Button>
-      );
-    })();
-
-  const onHiddenInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
-    if (event.key === "Enter") {
-      primaryAction.onClick();
-    }
-  };
-
-  return (
-    <BaseModal
-      {...rest}
-      ref={ref}
-      id={dialogId}
-      className={classes["dialog"]}
-      containerProps={{ className: classes["container"] }}
-      open={open}
-      disableBackdrop
-      onClose={onClose}
-      zIndex={zIndex}
-      disableEscapeKeyDown={disableEscapeKeyDown}
-    >
-      <DialogTitle id={labelId(dialogId)} title={title} />
-      <BaseModalContent
-        id={descriptionId(dialogId)}
-        className={classes["content"]}
-        disableAutoFocus
-      >
-        {children}
-      </BaseModalContent>
-      <DialogActions align={alignActions}>
-        {alignActions === "left"
-          ? [PrimaryButton, TertiaryButton]
-          : [TertiaryButton, PrimaryButton]}
-      </DialogActions>
-      <input
-        autoFocus
-        aria-hidden={true}
-        style={{
-          position: "absolute",
-          width: 0,
-          height: 0,
-          opacity: 0
-        }}
-        maxLength={0}
-        tabIndex={-1}
-        onKeyPress={onHiddenInputKeyPress}
-      />
-    </BaseModal>
-  );
-};
-
-export const Dialog = React.forwardRef(DialogComponent);

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.test.tsx

@@ -1,111 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { useEffect, useRef } from "react";
-import { DiscardChangesDialog, Props } from "./DiscardChangesDialog";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  open: true,
-  onKeepEditing: jest.fn(),
-  onDiscardChanges: jest.fn(),
-  discardChangesButtonLabel: "Discard Changes",
-  keepEditingButtonLabel: "Keep Editing",
-  contentLabel: "Content",
-  titleLabel: "Unsaved changes"
-};
-
-const createDiscardChangesDialog = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <DiscardChangesDialog {...parameters} data-testid="DiscardChangesDialog"></DiscardChangesDialog>
-  );
-  const discardChangesDialog = queries.getByTestId("DiscardChangesDialog");
-  const discardChangesBtn = queries.getByRole("button", {
-    name: defaultParams.discardChangesButtonLabel
-  });
-  const keepEditingBtn = queries.getByRole("button", {
-    name: defaultParams.keepEditingButtonLabel
-  });
-
-  return {
-    ...queries,
-    discardChangesDialog,
-    discardChangesBtn,
-    keepEditingBtn
-  };
-};
-
-describe("DiscardChangesDialog should render", () => {
-  it("renders without crashing", () => {
-    const { discardChangesDialog, discardChangesBtn, keepEditingBtn } =
-      createDiscardChangesDialog();
-
-    expect(discardChangesDialog).toBeDefined();
-    expect(discardChangesDialog).toHaveTextContent(defaultParams.contentLabel);
-    expect(discardChangesDialog).toHaveTextContent(defaultParams.titleLabel);
-
-    userEvent.click(discardChangesBtn);
-    expect(defaultParams.onDiscardChanges).toBeCalledTimes(1);
-
-    userEvent.click(keepEditingBtn);
-    expect(defaultParams.onKeepEditing).toBeCalledTimes(1);
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return (
-        <DiscardChangesDialog
-          open={false}
-          onKeepEditing={jest.fn()}
-          onDiscardChanges={jest.fn()}
-          discardChangesButtonLabel="test"
-          keepEditingButtonLabel="test"
-          contentLabel="test"
-          titleLabel="test"
-          title="test"
-          id="test"
-          data-ref="testing"
-          ref={ref}
-        />
-      );
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});