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

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.test.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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 from "react";
+import { render, getByRole, waitFor } from "@testing-library/react";
+import { SnackbarItem, Props } from "./SnackbarItem";
+import userEvent from "@testing-library/user-event";
+
+const initParams: Props = {
+  id: "id",
+  title: "title",
+  duration: 1,
+  variant: "success",
+  closeButtonTitle: "close",
+  onClose: jest.fn()
+};
+
+describe("SnackbarItem", () => {
+  it("renders without crashing", () => {
+    const { container } = render(<SnackbarItem {...initParams} />);
+
+    expect(container).toHaveTextContent(initParams.title);
+    const contentDiv = container.querySelector(".content");
+    expect(contentDiv).toBeNull();
+    const actionsDiv = container.querySelector(".actions");
+    expect(actionsDiv).toBeNull();
+    expect(getByRole(container, "button")).toBeDefined();
+  });
+
+  it("clicking close button call callback function", async () => {
+    const { container } = render(<SnackbarItem {...initParams} duration={10000000} />);
+
+    expect(initParams.onClose).not.toBeCalled();
+    await userEvent.click(getByRole(container, "button"));
+    waitFor(() => {
+      expect(initParams.onClose).toBeCalledTimes(1);
+      expect(initParams.onClose).toHaveBeenCalledWith(initParams.id);
+    });
+  });
+
+  it("call close callback after provided duration", () => {
+    render(<SnackbarItem {...initParams} />);
+
+    expect(initParams.onClose).not.toBeCalled();
+    waitFor(() => {
+      expect(initParams.onClose).toBeCalledTimes(1);
+      expect(initParams.onClose).toHaveBeenCalledWith(initParams.id);
+    });
+  });
+});

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -0,0 +1,138 @@
+/*
+ * 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, { useContext, useEffect, useRef } from "react";
+import { IconButton } from "../../../Button/IconButton";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { Variant, Actions } from "../interfaces";
+import classes from "./SnackbarItem.module.scss";
+import readyclasses from "../../../../readyclasses.module.scss";
+import { useAnimation } from "../../../../hooks/useAnimation";
+import { Typography } from "../../../Typography/Typography";
+import { SnackbarContext } from "../SnackbarProvider/SnackbarStateProvider";
+
+const textColor = "var(--snackbar-text-color)";
+
+export interface Props {
+  id: string;
+  title: string;
+  duration: number;
+  variant: Variant;
+  onClose: (key: string) => void;
+  closeButtonTitle: string;
+  content?: string;
+  actions?: Actions;
+}
+
+const useRegisterSnackbarHeight = (
+  singleSnackbarRef: React.RefObject<HTMLDivElement>,
+  snackbarId: string
+) => {
+  const ctx = useContext(SnackbarContext);
+
+  useEffect(() => {
+    if (singleSnackbarRef.current) {
+      ctx.setSnackbarHeight(snackbarId, singleSnackbarRef.current.getBoundingClientRect().height);
+    }
+  }, [singleSnackbarRef.current]);
+};
+
+export const SnackbarItem = ({
+  id,
+  title,
+  duration,
+  variant,
+  content,
+  actions = [],
+  onClose,
+  closeButtonTitle
+}: Props) => {
+  const timerHandler = useRef<ReturnType<typeof setTimeout>>();
+  const onAnimationEnd = () => onClose(id);
+  const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(onAnimationEnd);
+
+  useRegisterSnackbarHeight(ref, id);
+
+  useEffect(() => {
+    timerHandler.current = setTimeout(() => startAnimation(), duration);
+    return () => {
+      timerHandler.current && clearTimeout(timerHandler.current);
+    };
+  }, []);
+
+  const onMouseEnter = () => {
+    timerHandler.current && clearTimeout(timerHandler.current);
+  };
+
+  const onMouseLeave = () => {
+    timerHandler.current = setTimeout(() => startAnimation(), duration);
+  };
+
+  const getVariantIcon = () => {
+    if (variant === "error") {
+      return Icons.Error;
+    }
+    return variant === "success" ? Icons.CheckmarkCircleBreakout : Icons.InfoCircle;
+  };
+
+  const actionButtons = actions.map((actionProp, index) => (
+    <button
+      key={index}
+      {...actionProp}
+      onClick={e => {
+        onClose(id);
+        actionProp.onClick?.(e);
+      }}
+      className={classes["action-button"]}
+    >
+      {actionProp.label}
+    </button>
+  ));
+
+  return (
+    <div
+      ref={ref}
+      aria-live="polite"
+      className={`${classes["snackbar"]} ${classes[variant]} ${
+        animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"]
+      }`}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <Icon icon={getVariantIcon()} className={classes["icon"]} />
+      <div className={classes["container"]}>
+        <div className={classes["headline"]}>
+          <Typography className={classes["title"]} variant="h4" tag="span">
+            {title}
+          </Typography>
+          <IconButton
+            id={classes["close-btn"]}
+            onClick={() => startAnimation()}
+            title={closeButtonTitle}
+          >
+            <Icon icon={Icons.Times} color={textColor} />
+          </IconButton>
+        </div>
+        {!!content && (
+          <Typography className={classes["content"]} variant="body">
+            {content}
+          </Typography>
+        )}
+        {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
+      </div>
+    </div>
+  );
+};

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -0,0 +1,172 @@
+/*
+ * 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, { ReactNode, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { SnackbarContextProvider } from "./SnackbarStateProvider";
+import { Actions, SnackbarOptionsProps, Variant } from "../interfaces";
+import { Placement, SnackbarContainer } from "../SnackbarContainer/SnackbarContainer";
+import { generateID } from "../../../../util/helper";
+import { SnackbarItem } from "../SnackbarItem/SnackbarItem";
+import { useGetDomRoot } from "../../../../hooks/useGetDomRoot";
+
+/** Short msg is when only title is provided. Long one when content or/and actions are provided (or type is error). */
+interface Duration {
+  long: number;
+  short: number;
+}
+
+export interface Props {
+  closeButtonTitle: string;
+  children?: ReactNode;
+  placement?: Placement;
+  stackSize?: number;
+  domRoot?: HTMLElement;
+  autoHideDuration?: Duration;
+  className?: string;
+}
+
+export interface Item {
+  id: string;
+  title: string;
+  duration: number;
+  height: number;
+  variant: Variant;
+  content?: string;
+  actions?: Actions;
+  onClose?: () => void;
+}
+
+export const SnackbarProvider = (
+  {
+    closeButtonTitle,
+    placement = { vertical: "bottom", horizontal: "center" },
+    autoHideDuration = { long: 8000, short: 4000 },
+    stackSize = 3,
+    domRoot,
+    children,
+    className
+  }: Props = { closeButtonTitle: "" }
+) => {
+  const [snackbars, setSnackbars] = useState<Item[]>([]);
+  const wrappingDivRef = useRef(null);
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+
+  const addSnackbar = (item: Item) => {
+    setSnackbars(items => [...items, item]);
+  };
+
+  const setSnackbarHeight = (id: string, height: number) => {
+    const newSnackbarsState = snackbars.map(snackbar => {
+      if (snackbar.id !== id) {
+        return snackbar;
+      }
+
+      return { ...snackbar, height };
+    });
+
+    setSnackbars(newSnackbarsState);
+  };
+
+  const getDuration = (variant: Variant, actions?: Actions, content?: string) => {
+    const hasError = variant === "error";
+    const hasContentOrActions = content ?? actions;
+    if (hasError || hasContentOrActions) {
+      return autoHideDuration.long;
+    }
+    return autoHideDuration.short;
+  };
+
+  const enqueueSnackbar = (
+    title: string,
+    content?: string,
+    options: SnackbarOptionsProps = {}
+  ): void => {
+    const {
+      variant = "info",
+      actions,
+      duration = getDuration(variant, actions, content),
+      onClose
+    } = options;
+    const item: Item = {
+      title,
+      content,
+      variant,
+      actions,
+      duration,
+      height: 0,
+      id: generateID(15, title),
+      onClose
+    };
+    addSnackbar(item);
+  };
+
+  const enqueueSuccessSnackbar = (
+    title: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ): void => {
+    enqueueSnackbar(title, content, { ...options, variant: "success" });
+  };
+
+  const enqueueErrorSnackbar = (
+    title: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ): void => {
+    enqueueSnackbar(title, content, { ...options, variant: "error" });
+  };
+
+  const onItemClosed = (id: string) => {
+    setSnackbars(items => [...items].filter(item => item.id !== id));
+  };
+
+  const snackbarList = snackbars.map((item, index) =>
+    index < stackSize ? (
+      <SnackbarItem
+        {...item}
+        key={item.id}
+        onClose={() => {
+          onItemClosed(item.id);
+          item.onClose?.();
+        }}
+        closeButtonTitle={closeButtonTitle}
+      />
+    ) : null
+  );
+
+  const snackbarPortal = createPortal(
+    <SnackbarContainer placement={placement} className={className}>
+      {snackbarList}
+    </SnackbarContainer>,
+    root
+  );
+
+  return (
+    <SnackbarContextProvider
+      initialState={{
+        enqueueSnackbar,
+        enqueueSuccessSnackbar,
+        enqueueErrorSnackbar,
+        setSnackbarHeight,
+        snackbars
+      }}
+    >
+      {children}
+      <div ref={wrappingDivRef}>{snackbarPortal}</div>
+    </SnackbarContextProvider>
+  );
+};

package/src/components/Pagination/Pagination.test.tsx

@@ -0,0 +1,194 @@
+/*
+ * 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 { Pagination, Props } from "./Pagination";
+import { act, render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const defaultParams: Props = {
+  currentPage: 1,
+  totalElements: 500,
+  onPageChange: jest.fn(),
+  onPageSizeChange: jest.fn()
+};
+
+const createPagination = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+
+  if (params) {
+    parameters = params(defaultParams);
+  }
+
+  const queries = render(<Pagination data-testid="pagination" {...parameters} />);
+
+  const pagination = queries.getByTestId("pagination");
+
+  return {
+    ...queries,
+    pagination
+  };
+};
+
+describe("Pagination should render", () => {
+  it("renders without crashing", () => {
+    const { pagination } = createPagination();
+
+    expect(pagination).toBeTruthy();
+  });
+});
+
+describe("Pagination events", () => {
+  it("should correctly translate user input to pagination component", async () => {
+    const onPageChange = jest.fn();
+
+    const onPageSizeChange = jest.fn();
+
+    const { pagination } = createPagination(defaultParams => ({
+      ...defaultParams,
+      currentPage: 10,
+      onPageChange: onPageChange,
+      onPageSizeChange: onPageSizeChange
+    }));
+
+    const next = pagination.querySelector('[data-paginate="next"]')!;
+    const previous = pagination.querySelector('[data-paginate="previous"]')!;
+    const first = pagination.querySelector('[data-paginate="first"]')!;
+    const last = pagination.querySelector('[data-paginate="last"]')!;
+    const pageSizeSelect = pagination.querySelector(".page-size-select")!;
+    const currentPageInput = pagination.querySelector("#current-value-input")!;
+
+    await userEvent.click(next);
+
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(11));
+
+    await userEvent.click(previous);
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(9));
+
+    await userEvent.click(first);
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(0));
+
+    await userEvent.click(last);
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(50));
+
+    await userEvent.click(pageSizeSelect.querySelector("button")!);
+
+    const option25 = pageSizeSelect.querySelector('[data-value="25"]')!;
+
+    await userEvent.click(option25);
+
+    await waitFor(() => expect(onPageSizeChange).toHaveBeenCalledWith(25));
+
+    await act(() => {
+      (currentPageInput as HTMLInputElement).focus();
+    });
+
+    await userEvent.keyboard("{backspace}{backspace}30{enter}");
+
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(30));
+  });
+});
+
+describe("different current pages and their effect on what renders", () => {
+  it("is on the first page and does not render previous and first", () => {
+    const { pagination } = createPagination();
+
+    expect(pagination.querySelector(".next")).toBeTruthy();
+    expect(pagination.querySelector(".previous")).toBeFalsy();
+  });
+
+  it("is on the second page and does not render first", () => {
+    const { pagination } = createPagination(defaultParams => ({
+      ...defaultParams,
+      currentPage: 2
+    }));
+
+    expect(pagination.querySelector('[data-paginate="first"]')).toBeFalsy();
+    expect((pagination.querySelector(".current-value-input input") as HTMLInputElement).value).toBe(
+      "2"
+    );
+  });
+
+  it("is on the second to last page and does not render last", () => {
+    const { pagination } = createPagination(defaultParams => ({
+      ...defaultParams,
+      currentPage: 499
+    }));
+
+    expect(pagination.querySelector('[data-paginate="last"]')).toBeFalsy();
+  });
+
+  it("is on the last page and does not render next & last", () => {
+    const { pagination } = createPagination(defaultParams => ({
+      ...defaultParams,
+      currentPage: 500
+    }));
+
+    expect(pagination.querySelector('[data-paginate="last"]')).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="next"]')).toBeFalsy();
+  });
+});
+
+describe("omitted attributes still renders correctly", () => {
+  it("still renders next if totalItems prop isn't given and we're on the first page", () => {
+    const { pagination } = createPagination(defaultParams => ({
+      ...defaultParams,
+      totalElements: undefined
+    }));
+
+    expect(pagination.querySelector(".page")).toBeFalsy();
+    expect(pagination.querySelector(".next")).toBeTruthy();
+    expect(pagination.querySelector(".previous")).toBeFalsy();
+  });
+
+  it("still renders next if totalItems prop isn't given and we're on the first page", () => {
+    const { pagination } = createPagination(defaultParams => ({
+      ...defaultParams,
+      currentPage: 4,
+      totalElements: undefined
+    }));
+
+    expect(pagination.querySelector(".page")).toBeFalsy();
+    expect(pagination.querySelector(".next")).toBeTruthy();
+    expect(pagination.querySelector(".previous")).toBeTruthy();
+  });
+});
+
+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 <Pagination {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});