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

package/src/Pagination/Pagination.tsx

@@ -1,235 +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, Fragment, useState } from "react";
-import classes from "./Pagination.module.scss";
-import readyclasses from "../readyclasses.module.scss";
-import { IconButton } from "../Button/IconButton";
-import { Icons, Icon } from "../Icon/Icon";
-import { Input } from "../Form/Input/Input";
-import { Select } from "../Form/Select/Select";
-import { Option } from "../Form/Select/Option";
-import { Label } from "../Form/Label/Label";
-
-export type PaginationTranslations = {
-  totalItems: string;
-  itemsPerPage: string;
-  itemsPerPageLabel: string;
-  currentPage: string;
-  currentPageLabel: string;
-};
-
-export type PageChangeLabels = "next" | "previous" | "first" | "last";
-
-enum DefaultTranslations {
-  totalItems = "Total items",
-  itemsPerPage = "Items per page",
-  currentPage = "Page %1 of %2",
-  itemsPerPageLabel = "Select how many items per page you want to see.",
-  currentPageLabel = "What page you are currently on."
-}
-
-export type PageSize = 10 | 25 | 50;
-
-export interface Props extends Omit<ComponentPropsWithRef<"div">, "translate"> {
-  currentPage?: number;
-  totalElements?: number;
-  pageSize?: PageSize;
-  translate?: PaginationTranslations;
-  onPageChange: (pageToGoTo: number) => void;
-  onPageSizeChange: (pageSize: PageSize) => void;
-}
-
-const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    totalElements,
-    pageSize = 10,
-    translate = DefaultTranslations,
-    currentPage,
-    className,
-    onPageChange,
-    onPageSizeChange,
-    ...rest
-  }: Props,
-  ref
-) => {
-  /** We use an internal state variable, because we don't want to fire onCurrentPageChange whenever onChange fires on the input. Rather, only when the Enter key is pressed. */
-  const [internalCurrentPage, setInternalCurrentPage] = useState(currentPage?.toString() || "1");
-  const calculateAmountOfPages = () => {
-    if (!totalElements) return 1;
-
-    if (Math.ceil(totalElements / pageSize) < 1) {
-      return 1;
-    }
-
-    return Math.ceil(totalElements / pageSize);
-  };
-
-  const onEnterListener = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.code === "Enter") {
-      onPageChange(Number(internalCurrentPage));
-    }
-  };
-
-  const renderCurrentPageTranslation = () => {
-    const amountOfPages = calculateAmountOfPages();
-
-    if (amountOfPages) {
-      const splitCurrentPageTranslation = translate.currentPage.split(" ");
-
-      return splitCurrentPageTranslation.map(string => {
-        if (string.includes("%1")) {
-          return (
-            <Fragment key={string}>
-              <Label
-                id="current-value-input-label"
-                htmlFor="current-value-input"
-                className={`${readyclasses["sr-only"]} ${classes["current-value-input-label"]}`}
-              >
-                {translate.currentPageLabel}
-              </Label>
-              <Input
-                aria-labelledby="current-value-input-label"
-                key="input"
-                id="current-value-input"
-                type="text"
-                size={currentPage?.toString().length}
-                max={calculateAmountOfPages()}
-                wrapperProps={{ className: classes["current-value-input"] }}
-                onKeyUp={onEnterListener}
-                onBlur={(event: React.ChangeEvent<HTMLInputElement>) =>
-                  onPageChange(Number(event.target.value))
-                }
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setInternalCurrentPage(e.target.value)
-                }
-                name="current-value-input"
-                value={internalCurrentPage}
-                className={`${classes["form-element"]} ${classes["current-page-input"]}`}
-              />
-            </Fragment>
-          );
-        }
-
-        if (string.includes("%2")) {
-          return (
-            <div key={string}>
-              <strong>{string.replace("%2", amountOfPages.toString())}</strong>&nbsp;
-            </div>
-          );
-        }
-
-        return <div key={string}>{string}&nbsp;</div>;
-      });
-    }
-
-    return null;
-  };
-
-  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const pageSizeNumber = Number(event.target.value) as PageSize;
-    onPageSizeChange(pageSizeNumber);
-  };
-
-  const onPageChangeHandler = (pageToGoTo: number) => {
-    onPageChange(pageToGoTo);
-  };
-
-  return (
-    <div
-      {...rest}
-      ref={ref}
-      className={`${classes["pagination-wrapper"]} ${className ? className : ""}`}
-    >
-      {totalElements && (
-        <div className={classes["total"]}>
-          <span tabIndex={0}>
-            {translate.totalItems}: <span>{totalElements}</span>
-          </span>
-        </div>
-      )}
-      <div className={classes["pagination"]}>
-        {pageSize && (
-          <div className={classes["per-page"]}>
-            <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
-            <Select
-              labeledBy="page-size-select-label"
-              className={`${classes["form-element"]} ${classes["page-size-select"]}`}
-              value={pageSize.toString()}
-              onChange={onPageSizeChangeHandler}
-            >
-              <Option value="10">10</Option>
-              <Option value="25">25</Option>
-              <Option value="50">50</Option>
-            </Select>
-          </div>
-        )}
-        <Fragment>
-          {!!((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
-            <div className={classes["previous"]}>
-              {currentPage > 2 && (
-                <IconButton
-                  title="first"
-                  onClick={() => onPageChangeHandler(0)}
-                  data-paginate="first"
-                >
-                  <Icon icon={Icons.NavigationFirst} />
-                </IconButton>
-              )}
-              {currentPage > 1 && (
-                <IconButton
-                  title="previous"
-                  onClick={() => onPageChangeHandler(currentPage - 1)}
-                  data-paginate="previous"
-                >
-                  <Icon icon={Icons.ChevronLeft} />
-                </IconButton>
-              )}
-            </div>
-          )}
-          {totalElements && !!calculateAmountOfPages() && (
-            <div className={classes["page"]}>{renderCurrentPageTranslation()}</div>
-          )}
-          <div className={classes["next"]}>
-            {!!(
-              (currentPage !== undefined && currentPage < calculateAmountOfPages()!) ||
-              (currentPage !== undefined && !totalElements)
-            ) && (
-              <IconButton
-                title="next"
-                onClick={() => onPageChangeHandler(currentPage + 1)}
-                data-paginate="next"
-              >
-                <Icon icon={Icons.ChevronRight} />
-              </IconButton>
-            )}
-            {!!(currentPage && totalElements && currentPage < calculateAmountOfPages()! - 1) && (
-              <IconButton
-                title="last"
-                onClick={() => onPageChangeHandler(totalElements / pageSize)}
-                data-paginate="last"
-              >
-                <Icon icon={Icons.NavigationLast} />
-              </IconButton>
-            )}
-          </div>
-        </Fragment>
-      </div>
-    </div>
-  );
-};
-
-export const Pagination = React.forwardRef(PaginationComponent);

package/src/Popover/Popover.module.scss

@@ -1,38 +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";
-
-.popover {
-  $transition-property: transform, opacity;
-
-  position: fixed;
-  z-index: 1;
-  pointer-events: none;
-  background-color: var(--light);
-  border-radius: 8px;
-  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.29);
-  opacity: 0;
-  transform: scale(0.5);
-
-  @include mixins.transition($transition-property, 0.2s, ease-in-out);
-
-  &.show {
-    transform: scale(1);
-    pointer-events: auto;
-    opacity: 1;
-  }
-}

package/src/Popover/Popover.test.tsx

@@ -1,103 +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, { Fragment, useRef } from "react";
-import { Popover, Props } from "./Popover";
-import { render } from "@testing-library/react";
-import { usePosition } from "../hooks/usePosition";
-
-const createPopover = (params?: (defaultParams: Props) => Props) => {
-  const Component = () => {
-    const relativeElement = useRef<HTMLButtonElement>(null);
-    const elementToBePositioned = useRef<HTMLDivElement>(null);
-
-    const defaultParams: Props = {
-      children: (
-        <ul>
-          <li>Test</li>
-          <li>Test</li>
-          <li>Test</li>
-        </ul>
-      ),
-      show: true,
-      placement: { vertical: "top", horizontal: "left" }
-    };
-    let parameters: Props = defaultParams;
-
-    if (params) {
-      parameters = params(defaultParams);
-    }
-
-    const { top, left, bottom, right, calculatePosition } = usePosition({
-      elementToBePositioned: elementToBePositioned,
-      relativeElement: relativeElement,
-      ...parameters
-    });
-
-    return (
-      <Fragment>
-        <button data-testid="button" onClick={calculatePosition} ref={relativeElement}>
-          Test
-        </button>
-        <Popover
-          {...defaultParams}
-          data-testid="popover"
-          style={{ top: top, left: left, bottom: bottom, right: right }}
-          ref={elementToBePositioned}
-        >
-          Test
-        </Popover>
-      </Fragment>
-    );
-  };
-
-  const queries = render(<Component />);
-  const button = queries.getByTestId("button");
-  const popover = queries.getByTestId("popover");
-
-  /** Let the hacking begin */
-  Object.defineProperty(button, "offsetHeight", { configurable: true, value: 500 });
-  Object.defineProperty(button, "offsetWidth", { configurable: true, value: 500 });
-
-  Object.defineProperty(window, "innerHeight", {
-    configurable: true,
-    value: 1000
-  });
-  Object.defineProperty(window, "innerWidth", {
-    configurable: true,
-    value: 1000
-  });
-
-  Object.defineProperty(popover, "offsetHeight", { configurable: true, value: 100 });
-  Object.defineProperty(popover, "offsetWidth", { configurable: true, value: 100 });
-
-  return {
-    ...queries,
-    popover,
-    button
-  };
-};
-
-describe("Popover should render", () => {
-  it("renders without crashing and has default left and top attributes", () => {
-    const { popover } = createPopover();
-
-    window.dispatchEvent(new Event("resize"));
-    window.dispatchEvent(new Event("scroll"));
-
-    expect(popover).toBeTruthy();
-  });
-});

package/src/Popover/Popover.tsx

@@ -1,110 +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,
-  ReactNode,
-  RefObject,
-  useEffect,
-  useRef
-} from "react";
-import { Offset, Placement, usePosition } from "../hooks/usePosition";
-import classes from "./Popover.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  children?: ReactNode;
-  show?: boolean;
-  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef
-  placement?: Placement;
-  offset?: Offset;
-  debounceAmount?: number;
-  transformOrigin?: Placement;
-  onAnchorOutOfView?: () => void;
-}
-
-const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    children,
-    className,
-    show,
-    placement,
-    offset,
-    debounceAmount,
-    transformOrigin,
-    anchorEl,
-    onAnchorOutOfView,
-    ...rest
-  },
-  ref
-) => {
-  const elToBePositioned = useRef<HTMLDivElement>(null);
-
-  const { top, left, right, bottom, calculatePosition } = usePosition({
-    elementToBePositioned: elToBePositioned,
-    relativeElement: anchorEl,
-    offset: offset,
-    placement: placement,
-    transformOrigin: transformOrigin,
-    debounceAmount: debounceAmount || undefined
-  });
-
-  useEffect(() => {
-    if (!show) {
-      return;
-    }
-
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition);
-
-    return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition);
-    };
-  }, [show]);
-
-  useEffect(() => {
-    calculatePosition();
-  }, [show]);
-
-  useEffect(() => {
-    const isAnchorOffscreen =
-      show &&
-      (top === 0 ||
-        left === 0 ||
-        right === 0 ||
-        bottom === 0 ||
-        window.innerHeight - (elToBePositioned.current as HTMLElement).offsetHeight === top);
-
-    if (isAnchorOffscreen) {
-      onAnchorOutOfView && onAnchorOutOfView();
-    }
-  }, [top, left, right, bottom]);
-
-  return (
-    <div ref={ref} {...rest}>
-      <div
-        ref={elToBePositioned}
-        className={`${classes.popover} ${className ?? ""} ${show ? classes.show : ""}`}
-        style={{ top: top, left: left, right: right, bottom: bottom }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export const Popover = React.forwardRef(PopoverComponent);

package/src/ProgressBar/ProgressBar.module.scss

@@ -1,58 +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 "../mixins.module.scss";
-
-.progress-bar {
-  position: relative;
-  display: block;
-  height: 0.5rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  background-color: var(--disabled);
-  overflow: hidden;
-
-  @media (prefers-reduced-motion: reduce) {
-    display: none;
-  }
-
-  .bar {
-    position: absolute;
-    height: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-primary);
-    &.loading-state {
-      width: 50%;
-      animation: cubic-bezier(0.23, 0.78, 0.78, 0.23) 1s slide-in infinite;
-      @keyframes slide-in {
-        0% {
-          left: -50%;
-        }
-
-        100% {
-          left: 100%;
-        }
-      }
-    }
-  }
-}
-
-.placeholder {
-  display: none;
-
-  @media (prefers-reduced-motion: reduce) {
-    display: unset;
-  }
-}

package/src/Skeleton/Skeleton.module.scss

@@ -1,36 +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";
-
-.skeleton {
-  display: block;
-  height: auto;
-  @include mixins.skeletonLoading();
-}
-
-.no-height::before {
-  content: " ";
-  white-space: pre-wrap;
-}
-
-.text {
-  border-radius: 0.5rem;
-}
-
-.circular {
-  border-radius: 50%;
-}

package/src/StatusIndicator/StatusIndicator.tsx

@@ -1,44 +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, ReactNode } from "react";
-import { Typography, Props as TypographyProps } from "../Typography/Typography";
-import classes from "./StatusIndicator.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  children?: ReactNode;
-  status: "active" | "error" | "neutral" | "warning";
-  badgeProps?: ComponentPropsWithRef<"div">;
-  typographyProps?: TypographyProps;
-}
-
-const StatusIndicatorComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, status, badgeProps, typographyProps, ...rest }: Props,
-  ref
-) => {
-  return (
-    <div {...rest} className={classes["status-indicator"]} ref={ref}>
-      <div
-        className={`${classes["status-badge"]} ${classes[status]} ${badgeProps?.className ?? ""}`}
-      />
-      <Typography {...typographyProps} spacing={{ margin: "0" }} variant="body" tag="div">
-        {typographyProps?.children || children}
-      </Typography>
-    </div>
-  );
-};
-
-export const StatusIndicator = React.forwardRef(StatusIndicatorComponent);

package/src/Tabs/Tab.tsx

@@ -1,39 +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, { HTMLProps } from "react";
-import classes from "./Tab.module.scss";
-
-export interface Props extends HTMLProps<HTMLDivElement> {
-  title: string;
-  children?: unknown;
-  tabActive?: boolean;
-}
-
-export const Tab = ({ children, tabActive, ...rest }: Props) => {
-  return (
-    <div
-      {...rest}
-      aria-hidden={!tabActive}
-      role="tabpanel"
-      className={`${classes["tab"]} ${tabActive ? classes["selected"] : ""} ${
-        rest.className ?? ""
-      }`}
-    >
-      {children}
-    </div>
-  );
-};