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

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

@@ -1,63 +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 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", () => {
-    const { container } = render(<SnackbarItem {...initParams} duration={10000000} />);
-
-    expect(initParams.onClose).not.toBeCalled();
-    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/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -1,138 +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, { 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 && 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/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -1,172 +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, { 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 && 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/Pagination/Pagination.test.tsx

@@ -1,192 +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 { Pagination, Props } from "./Pagination";
-import { 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")!;
-
-    userEvent.click(next);
-
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(11));
-
-    userEvent.click(previous);
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(9));
-
-    userEvent.click(first);
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(0));
-
-    userEvent.click(last);
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(50));
-
-    userEvent.click(pageSizeSelect.querySelector("button")!);
-
-    const option25 = pageSizeSelect.querySelector('[data-value="25"]')!;
-
-    userEvent.click(option25);
-
-    await waitFor(() => expect(onPageSizeChange).toHaveBeenCalledWith(25));
-
-    (currentPageInput as HTMLInputElement).focus();
-
-    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} />);
-  });
-});