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

package/src/Tabs/Tabs.module.scss

@@ -1,61 +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.
- */
-
-@use "../mixins.module.scss";
-
-$focus-width: 5px;
-
-.tabs {
-  background-color: var(--tabs-background-color);
-  padding: 1rem 1.25rem;
-  border-radius: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.tablist {
-  display: flex;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  gap: 2rem;
-  position: relative;
-  margin: -$focus-width;
-  padding: $focus-width;
-  z-index: 0;
-}
-
-.indicator {
-  $transition-property: left, width;
-
-  position: absolute;
-  height: var(--tab-active-border-height);
-  border-radius: 2px 2px 0 0;
-  background-color: var(--tab-active-border-color);
-
-  @include mixins.transition($transition-property, 0.2s, ease-in-out);
-}
-
-.tabdivider {
-  border-bottom-style: var(--tablist-border-style);
-  border-bottom-width: var(--tablist-border-width);
-  border-bottom-color: var(--tablist-border-color);
-  width: calc(100% - ($focus-width * 2));
-  position: absolute;
-  bottom: $focus-width;
-  left: $focus-width;
-  z-index: -1;
-}

package/src/Tabs/Tabs.tsx

@@ -1,174 +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, {
-  ComponentPropsWithRef,
-  createRef,
-  ForwardRefRenderFunction,
-  ReactElement,
-  RefObject,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { Props as TabProps } from "./Tab";
-import { TabButton } from "./TabButton";
-import classes from "./Tabs.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
-  selected?: number;
-  onTabChange?: (index: number) => void;
-}
-
-const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, selected = 0, onTabChange, ...rest }: Props,
-  ref
-) => {
-  const [renderedButtons, setRenderedButtons] = useState<ReactElement[]>([]);
-  const [renderedTabs, setRenderedTabs] = useState<ReactElement[]>([]);
-  const [activeTabIndex, setActiveTabIndex] = useState(selected);
-  const [usingKeyboardNavigation, setUsingKeyboardNavigation] = useState(false);
-  const [indicatorStyles, setIndicatorStyles] = useState<{
-    width: number;
-    left: number;
-    top: number;
-  }>({
-    width: 0,
-    left: 0,
-    top: 0
-  });
-  const tabsRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
-  const indicatorRef = useRef<HTMLDivElement>(null);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    const totalAmountOfTabs = [children].flat().length;
-    if (!usingKeyboardNavigation) setUsingKeyboardNavigation(true);
-    if (totalAmountOfTabs === 1) return;
-
-    switch (e.key) {
-      case "ArrowRight":
-        setActiveTabIndex(currentIndex => {
-          return currentIndex + 1 > totalAmountOfTabs - 1 ? 0 : currentIndex + 1;
-        });
-        break;
-      case "ArrowLeft":
-        setActiveTabIndex(currentIndex => {
-          return currentIndex - 1 < 0 ? totalAmountOfTabs - 1 : currentIndex - 1;
-        });
-        break;
-      case "Home":
-        setActiveTabIndex(0);
-        break;
-      case "End":
-        setActiveTabIndex(totalAmountOfTabs - 1);
-        break;
-      default:
-        return;
-    }
-  };
-
-  const calculateIndicatorPosition = () => {
-    if (tabsRef.current) {
-      const selectedButton = tabsRef.current.querySelectorAll('button[role="tab"]')[
-        activeTabIndex
-      ] as HTMLElement;
-
-      setIndicatorStyles({
-        left: selectedButton.offsetLeft,
-        top:
-          selectedButton.offsetTop +
-          selectedButton.offsetHeight -
-          indicatorRef.current!.offsetHeight,
-        width: selectedButton.offsetWidth
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (tabsRef.current && renderedButtons.length) {
-      calculateIndicatorPosition();
-    }
-  }, [tabsRef.current, activeTabIndex, renderedButtons]);
-
-  useEffect(() => {
-    onTabChange && onTabChange(activeTabIndex);
-  }, [activeTabIndex]);
-
-  useEffect(() => {
-    const buttons = React.Children.map(children, (child, index) => {
-      if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
-        return React.createElement(
-          TabButton,
-          {
-            key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
-            tabIndex: activeTabIndex === index ? 0 : -1,
-            "aria-selected": activeTabIndex === index,
-            focused: usingKeyboardNavigation && activeTabIndex === index,
-            tabActive: activeTabIndex === index,
-            "aria-controls": `tab_${index}`,
-            onClick: () => setActiveTabIndex(index)
-          },
-          child.props.title
-        );
-      }
-      return null;
-    });
-
-    setRenderedButtons(buttons);
-  }, [activeTabIndex]);
-
-  useEffect(() => {
-    const tabs = React.Children.map(children, (child, index) => {
-      if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
-        return React.cloneElement(child, {
-          key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_tab`,
-          tabIndex: activeTabIndex === index ? 0 : -1,
-          tabActive: activeTabIndex === index,
-          id: `tab_${index}`,
-          children: child.props.children
-        });
-      }
-
-      return null;
-    });
-
-    setRenderedTabs(tabs);
-  }, [activeTabIndex]);
-
-  return (
-    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${rest.className ?? ""}`}>
-      <div role="tablist" className={classes["tablist"]} onKeyDown={handleKeyDown}>
-        {renderedButtons}
-        <div className={classes["tabdivider"]} />
-        <div
-          className={classes["indicator"]}
-          ref={indicatorRef}
-          aria-hidden="true"
-          tabIndex={-1}
-          style={{
-            width: indicatorStyles.width,
-            left: indicatorStyles.left,
-            top: indicatorStyles.top
-          }}
-        />
-      </div>
-      <div>{renderedTabs}</div>
-    </div>
-  );
-};
-
-export const Tabs = React.forwardRef(TabsComponent);

package/src/TextEllipsis/TextEllipsis.test.tsx

@@ -1,96 +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 { render } from "@testing-library/react";
-import user from "@testing-library/user-event";
-import { Props, TextEllipsis } from "./TextEllipsis";
-
-const defaultParams: Props = {};
-
-const createTextEllipsis = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <TextEllipsis {...parameters} data-testid="TextEllipsis">
-      content
-    </TextEllipsis>
-  );
-  const textEllipsis = queries.getByTestId("TextEllipsis");
-
-  return {
-    ...queries,
-    textEllipsis
-  };
-};
-
-describe("TextEllipsis should render", () => {
-  it("renders without crashing", () => {
-    const { textEllipsis, getAllByText } = createTextEllipsis();
-
-    expect(textEllipsis).toBeDefined();
-    expect(getAllByText("content")).toHaveLength(2);
-  });
-
-  it("does not show popover when full text is visible", () => {
-    const { textEllipsis, getByRole } = createTextEllipsis();
-
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
-    user.hover(textEllipsis);
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
-  });
-
-  it("shows popover with full text when base text has ellipsis", () => {
-    const { textEllipsis, getByRole } = createTextEllipsis();
-
-    Object.defineProperty(textEllipsis, "offsetWidth", { configurable: true, value: 1 });
-    Object.defineProperty(textEllipsis, "scrollWidth", { configurable: true, value: 2 });
-
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
-    user.hover(textEllipsis);
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "false");
-    user.unhover(textEllipsis);
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
-  });
-});
-
-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 <TextEllipsis data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

package/src/TextEllipsis/TextEllipsis.tsx

@@ -1,80 +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,
-  useRef,
-  MouseEventHandler,
-  useState,
-  ComponentPropsWithRef
-} from "react";
-import { Popover } from "../Popover/Popover";
-import classes from "./TextEllipsis.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  children?: string;
-  popoverClassName?: string;
-}
-
-const TextEllipsisComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, popoverClassName, className, ...rest }: Props,
-  ref
-) => {
-  const [showPopover, setShowPopover] = useState(false);
-  const textContainer = useRef<HTMLDivElement>(null);
-
-  const ellipsisVisible = () => {
-    if (
-      textContainer.current &&
-      textContainer.current.offsetWidth < textContainer.current.scrollWidth
-    ) {
-      return true;
-    }
-    return false;
-  };
-
-  const onMouseEnter: MouseEventHandler<HTMLDivElement> = () => {
-    ellipsisVisible() && setShowPopover(true);
-  };
-
-  const onMouseLeave: MouseEventHandler<HTMLDivElement> = () => {
-    ellipsisVisible() && setShowPopover(false);
-  };
-
-  return (
-    <div
-      {...rest}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      className={`${classes["text-ellipsis"]} ${className ?? ""}`}
-      ref={ref || textContainer}
-    >
-      {children}
-      <Popover
-        aria-hidden={true}
-        data-hidden={!showPopover}
-        show={showPopover}
-        role="tooltip"
-        anchorEl={textContainer}
-        className={`${classes.popover} ${popoverClassName ?? ""}`}
-      >
-        {children}
-      </Popover>
-    </div>
-  );
-};
-
-export const TextEllipsis = React.forwardRef(TextEllipsisComponent);

package/src/Tiles/Tile.module.scss

@@ -1,88 +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.
- */
-
-@use "../mixins.module.scss";
-
-.tile {
-  border: 1px solid var(--light-grey-border);
-  border-radius: 8px;
-  box-sizing: border-box;
-  padding: 0 0 2rem;
-  background-color: var(--light);
-  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
-  font-family: var(--font-family);
-
-  &:hover {
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-
-    .icon {
-      padding: 0 1rem;
-    }
-  }
-
-  figure {
-    margin: 0 0 1rem;
-    height: 3rem;
-
-    img {
-      vertical-align: top;
-      height: 3rem;
-      width: auto;
-    }
-  }
-
-  .placeholder {
-    font-size: 3rem;
-    margin: 0 0 1rem;
-    color: var(--greyed-out);
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: default;
-    padding: 0 1rem;
-  }
-
-  &.loading {
-    header {
-      display: none;
-    }
-
-    .image {
-      margin-top: 2.5rem;
-      @include mixins.skeletonLoading();
-      border-radius: 0.5rem;
-      width: 3rem;
-      height: 3rem;
-    }
-
-    .title {
-      @include mixins.skeletonLoading();
-      color: transparent;
-      display: inline-block;
-      width: 70%;
-      border-radius: 0.5rem;
-    }
-  }
-}

package/src/Tiles/Tile.test.tsx

@@ -1,181 +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 { Tile, Props } from "./Tile";
-import { render } from "@testing-library/react";
-import { Icon, Icons } from "../Icon/Icon";
-import { ContextMenu } from "../ContextMenu/ContextMenu";
-import { IconButton } from "../Button/IconButton";
-import { ContextMenuItem } from "../ContextMenu/ContextMenuItem";
-import userEvent from "@testing-library/user-event";
-
-const onShow = jest.fn();
-const onClose = jest.fn();
-const contextMenuItemOnClick = jest.fn();
-
-const contextMenu = (
-  <ContextMenu
-    id="context_menu"
-    data-testid="contextmenu"
-    onShow={onShow}
-    onClose={onClose}
-    trigger={
-      <IconButton data-testid="contextmenu-trigger" title="context menu">
-        <Icon icon={Icons.EllipsisAlt} />
-      </IconButton>
-    }
-  >
-    <ContextMenuItem data-testid="item1" onClick={contextMenuItemOnClick}>
-      Item 1
-    </ContextMenuItem>
-    <ContextMenuItem data-testid="item2" onClick={contextMenuItemOnClick}>
-      Item 2
-    </ContextMenuItem>
-    <ContextMenuItem data-testid="item3" onClick={contextMenuItemOnClick}>
-      Item 3
-    </ContextMenuItem>
-  </ContextMenu>
-);
-
-const defaultParams: Props = {
-  title: "tile",
-  enabled: true,
-  tileAction: contextMenu
-};
-
-const createTile = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <Tile {...parameters} data-testid="tile">
-      tile content
-    </Tile>
-  );
-  const tile = queries.getByTestId("tile");
-  const menutrigger = queries.getByTestId("contextmenu-trigger");
-
-  return {
-    ...queries,
-    tile,
-    menutrigger
-  };
-};
-
-describe("Tile should render", () => {
-  it("renders without crashing and enabled", () => {
-    const { tile } = createTile();
-
-    expect(tile.querySelector(".icon-checkmark")).toBeTruthy();
-    expect(tile.querySelector(".icon-forbidden")).toBeFalsy();
-    expect(tile).toBeDefined();
-  });
-
-  it("renders disabled", () => {
-    const { tile } = createTile(defaultParams => ({ ...defaultParams, enabled: false }));
-
-    expect(tile.querySelector(".icon-checkmark")).toBeFalsy();
-    expect(tile.querySelector(".icon-forbidden")).toBeTruthy();
-  });
-
-  it("renders no status", () => {
-    const { tile } = createTile(defaultParams => ({ ...defaultParams, enabled: undefined }));
-
-    expect(tile.querySelector(".icon-checkmark")).toBeFalsy();
-    expect(tile.querySelector(".icon-forbidden")).toBeFalsy();
-  });
-});
-
-describe("should throw errors since we don't pass props", () => {
-  it("throws because of missing id", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      render(<Tile imageProps={{ src: "test" }} />);
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected = "Please make sure to pass a title prop to your Tile component.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-});
-
-describe("contextmenu", () => {
-  it("should render everything correctly", () => {
-    const { menutrigger, getByTestId } = createTile();
-
-    const contextMenu = getByTestId("contextmenu");
-    const menuitem1 = getByTestId("item1");
-    const menuitem2 = getByTestId("item2");
-    const menuitem3 = getByTestId("item3");
-    const popover = document.querySelector(".popover");
-
-    expect(popover).toHaveStyle({ opacity: "0;" });
-    expect(menutrigger).toBeTruthy();
-    expect(contextMenu).toBeTruthy();
-    expect(menuitem1).toBeTruthy();
-    expect(menuitem2).toBeTruthy();
-    expect(menuitem3).toBeTruthy();
-
-    userEvent.click(menutrigger);
-    expect(onShow).toHaveBeenCalled();
-    expect(popover).toHaveClass("show");
-    expect(popover).toHaveStyle({ opacity: "1;" });
-
-    userEvent.click(menuitem1);
-    userEvent.click(menuitem2);
-    userEvent.click(menuitem3);
-
-    expect(contextMenuItemOnClick).toHaveBeenCalledTimes(3);
-  });
-});
-
-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 <Tile {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});