@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/src/components/admin/layout/LeftNav/LeftNavItem/LinkLeftNavItem.tsx

@@ -0,0 +1,106 @@
+/*
+ * 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, HTMLProps, MouseEvent, Ref } from "react";
+import classes from "./LeftNavItem.module.scss";
+import { MenuItem } from "../LeftNav.interfaces";
+import { Link } from "../../../../Link/Link";
+import { useKeyboardNavigation } from "./useKeyboardNavigation";
+import { UseRefItemsReturnType } from "../useRefItems";
+
+export interface Props extends HTMLProps<HTMLElement> {
+  item: MenuItem;
+  navigate: (path: string) => void;
+  onItemClick?: (path?: string, button?: boolean) => void;
+  refItems: UseRefItemsReturnType;
+  closeParentList?: () => void;
+  internalLinkPrefix?: string;
+}
+
+const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  { item, onItemClick, refItems, closeParentList, navigate, internalLinkPrefix = "" },
+  ref
+) => {
+  const { onKeyPressNavigation } = useKeyboardNavigation({ refItems, item, closeParentList });
+
+  const onLinkClickHandler = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    if (!item.disabled) {
+      onItemClick?.(item.path);
+      item.path && navigate(item.path);
+    }
+  };
+
+  const getStylingClasses = () => {
+    const menuItemLinkClasses = [classes["menu-item"], classes["menu-link"]];
+    item.active && menuItemLinkClasses.push(classes["menu-item-active"]);
+    item.disabled && menuItemLinkClasses.push(classes["disabled"]);
+    const menuLinkWrapperClasses = [classes["menu-list-item"]];
+    return {
+      menuItemLinkClasses,
+      menuLinkWrapperClasses
+    };
+  };
+
+  const { menuItemLinkClasses, menuLinkWrapperClasses } = getStylingClasses();
+  const tabIndexActive = item.active ? 0 : -1;
+  const tabIndex = item.disabled ? -1 : tabIndexActive;
+
+  return (
+    <li className={menuLinkWrapperClasses.join(" ")} data-testid={`${item.key}`}>
+      {item.path?.match(/^https?:\/\//) ? (
+        <Link
+          ref={ref as Ref<HTMLAnchorElement>}
+          onKeyDown={onKeyPressNavigation}
+          data-testid={`left-nav-item-${item.key}`}
+          aria-current={item.active ? "page" : false}
+          aria-disabled={item.disabled}
+          className={menuItemLinkClasses.join(" ")}
+          to={item.path ?? ""}
+          type="external"
+          disabled={item.disabled}
+          tabIndex={tabIndex}
+        >
+          <div className={classes["menu-item-text-wrapper"]}>
+            {item.iconComponent &&
+              React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
+            <span className={classes["menu-item-text"]}>{item.title}</span>
+          </div>
+        </Link>
+      ) : (
+        <a
+          ref={ref as Ref<HTMLAnchorElement>}
+          onKeyDown={onKeyPressNavigation}
+          onClick={onLinkClickHandler}
+          data-testid={`left-nav-item-${item.key}`}
+          aria-current={item.active ? "page" : false}
+          aria-disabled={item.disabled}
+          className={menuItemLinkClasses.join(" ")}
+          href={item.path ? internalLinkPrefix + item.path : ""}
+          tabIndex={tabIndex}
+        >
+          <div className={classes["menu-item-text-wrapper"]}>
+            {item.iconComponent &&
+              React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
+            <span className={classes["menu-item-text"]}>{item.title}</span>
+          </div>
+        </a>
+      )}
+    </li>
+  );
+};
+
+export const LinkLeftNavItem = React.forwardRef(LinkLeftNavItemComponent);

package/src/components/admin/layout/LeftNav/LeftNavItem/useKeyboardNavigation.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 { KeyboardEvent } from "react";
+import { MenuItem } from "../LeftNav.interfaces";
+import { UseRefItemsReturnType } from "../useRefItems";
+
+interface Props {
+  item: MenuItem;
+  refItems: UseRefItemsReturnType;
+  closeParentList?: () => void;
+  onExpandIconClickHandler?: () => void;
+}
+
+export const useKeyboardNavigation = ({
+  refItems,
+  item,
+  closeParentList,
+  onExpandIconClickHandler
+}: Props) => {
+  const isButtonLeftNavItem = !!onExpandIconClickHandler;
+  const onKeyPressNavigation = (e: KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    if (e.code === "Escape" || e.code === "ArrowLeft") {
+      e.preventDefault();
+      e.stopPropagation();
+      closeParentList?.();
+      refItems.getParentElement(item.key)?.focus();
+    }
+    if (e.code === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      refItems.getPrevElementOnSameLevel(item.key)?.focus();
+    }
+    if (e.code === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      refItems.getNextElementOnSameLevel(item.key)?.focus();
+    }
+    if (e.code === "Home") {
+      e.preventDefault();
+      e.stopPropagation();
+      refItems.getFirstElementOnSameLevel(item.key)?.focus();
+    }
+    if (e.code === "End") {
+      e.preventDefault();
+      e.stopPropagation();
+      refItems.getLastElementOnSameLevel(item.key)?.focus();
+    }
+    if (e.code === "Space" || e.code === "Enter") {
+      e.stopPropagation();
+      e.preventDefault();
+      isButtonLeftNavItem && refItems.getNextElement(item.key, true)?.focus();
+      e.currentTarget.click();
+    }
+    if (e.code === "ArrowRight") {
+      onExpandIconClickHandler?.();
+      refItems.getNextElement(item.key, true)?.focus();
+    }
+  };
+
+  return { onKeyPressNavigation };
+};

package/src/components/admin/layout/LeftNav/useRefItems.ts

@@ -0,0 +1,280 @@
+/*
+ * 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 { useEffect, useRef } from "react";
+import { MenuItem } from "./LeftNav.interfaces";
+
+interface Props {
+  items: MenuItem[];
+}
+
+interface LinkedMapValue {
+  item: MenuItem;
+  level: number;
+  prev?: MenuItem;
+  next?: MenuItem;
+}
+
+export type UseRefItemsReturnType = ReturnType<typeof useRefItems>;
+
+export const useRefItems = ({ items }: Props) => {
+  const navRefs = useRef<Record<string, HTMLElement>>({});
+  const itemsMap = useRef<Record<string, LinkedMapValue>>({});
+
+  useEffect(() => {
+    createLinkedMap(items);
+  }, [items]);
+
+  /**
+   * Creates linked list of provided menu items.
+   * Disabled items are filtered out.
+   */
+  const createLinkedMap = (menuItems: MenuItem[]) => {
+    const map: Record<string, LinkedMapValue> = {};
+    createRecursiveLinkedMap(map, 0, menuItems);
+    itemsMap.current = map;
+  };
+
+  const createRecursiveLinkedMap = (
+    itemsMap: Record<string, LinkedMapValue>,
+    level: number,
+    items?: MenuItem[],
+    prevItem?: MenuItem,
+    nextItem?: MenuItem
+  ): { lastItem?: MenuItem } => {
+    let currentPreviousItem: MenuItem | undefined = prevItem,
+      currentNextItem: MenuItem | undefined = nextItem;
+    const nonDisabledItems = items?.filter(item => !item.disabled);
+    nonDisabledItems?.forEach((currentItem, index) => {
+      const isLast = index === nonDisabledItems.length - 1;
+      if (!isLast) {
+        currentNextItem = nonDisabledItems[index + 1];
+      } else {
+        currentNextItem = nextItem;
+      }
+
+      const hasChildren = (currentItem.items?.filter(item => !item.disabled) ?? []).length !== 0;
+      if (hasChildren) {
+        itemsMap[currentItem.key] = {
+          item: currentItem,
+          level,
+          prev: currentPreviousItem,
+          next: currentItem?.items?.filter(item => !item.disabled)[0]
+        };
+        currentPreviousItem = currentItem;
+        const { lastItem } = createRecursiveLinkedMap(
+          itemsMap,
+          level + 1,
+          currentItem?.items,
+          currentPreviousItem,
+          currentNextItem
+        );
+        currentPreviousItem = lastItem;
+      } else {
+        itemsMap[currentItem.key] = {
+          item: currentItem,
+          level,
+          prev: currentPreviousItem,
+          next: currentNextItem
+        };
+        currentPreviousItem = currentItem;
+      }
+    });
+    return { lastItem: currentPreviousItem };
+  };
+
+  const addElementReference = (el: HTMLElement | null, key: string) => {
+    if (el) {
+      navRefs.current[key] = el;
+    } else {
+      delete navRefs.current[key];
+    }
+  };
+
+  /**
+   * Get next element that is rendered. It could be nested element
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the last element on that level
+   */
+  const getNextElement = (currentKey: string, whenHavingChildren: boolean = false) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    if (whenHavingChildren && !currentItem.item.items) {
+      return;
+    }
+    const nextKey = currentItem.next?.key;
+    return nextKey ? navRefs.current?.[nextKey] : undefined;
+  };
+
+  /**
+   * Get next element on the same level as currentKey param
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the last element on that level
+   */
+  const getNextElementOnSameLevel = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const nextItem = _traverseNextElements({
+      currentItem,
+      desiredLevel: currentLevel,
+      currentLevel
+    });
+    return nextItem?.item.key ? navRefs.current?.[nextItem?.item.key] : undefined;
+  };
+
+  /**
+   * Get previous element on the same level as currentKey param
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the first element on that level
+   */
+  const getPrevElementOnSameLevel = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const prevItem = _traversePrevElements({
+      currentItem,
+      desiredLevel: currentLevel
+    });
+    return prevItem?.item.key ? navRefs.current?.[prevItem?.item.key] : undefined;
+  };
+
+  /**
+   * Get first element on the same level as currentKey param
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the first element on that level
+   */
+  const getFirstElementOnSameLevel = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const prevItem = _traversePrevElements({
+      currentItem,
+      desiredLevel: currentLevel
+    });
+    const prevItemKey = prevItem?.item.key;
+    if (prevItemKey) {
+      const hasNextPrevElement = !!_traversePrevElements({
+        currentItem: itemsMap.current?.[prevItemKey],
+        desiredLevel: currentLevel
+      });
+      if (hasNextPrevElement) {
+        return getFirstElementOnSameLevel(prevItemKey);
+      }
+      return navRefs.current?.[prevItemKey];
+    }
+  };
+
+  /**
+   * Get last element on the same level as currentKey param
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the last element on that level
+   */
+  const getLastElementOnSameLevel = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const nextItem = _traverseNextElements({
+      currentItem,
+      desiredLevel: currentLevel,
+      currentLevel
+    });
+    const nextItemKey = nextItem?.item.key;
+    if (nextItemKey) {
+      const hasNextNextElement = !!_traverseNextElements({
+        currentItem: itemsMap.current?.[nextItemKey],
+        desiredLevel: currentLevel,
+        currentLevel
+      });
+      if (hasNextNextElement) {
+        return getLastElementOnSameLevel(nextItemKey);
+      }
+      return navRefs.current?.[nextItemKey];
+    }
+  };
+
+  const getParentElement = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const parentLevel = currentLevel - 1;
+    const parentItem = _traversePrevElements({
+      currentItem,
+      desiredLevel: parentLevel,
+      checkForMenuEscape: false
+    });
+    return parentItem?.item.key ? navRefs.current?.[parentItem?.item.key] : undefined;
+  };
+
+  const _traverseNextElements = ({
+    currentItem,
+    desiredLevel,
+    currentLevel
+  }: {
+    currentItem: LinkedMapValue;
+    desiredLevel: number;
+    currentLevel: number;
+  }) => {
+    const nextKey = currentItem.next?.key;
+    if (!nextKey) {
+      return;
+    }
+    const escapedSubMenu = desiredLevel > currentLevel;
+    if (escapedSubMenu) {
+      return;
+    }
+
+    const next = itemsMap.current?.[nextKey];
+    if (next && next.level === desiredLevel) {
+      return next;
+    } else {
+      return _traverseNextElements({ currentItem: next, desiredLevel, currentLevel: next.level });
+    }
+  };
+
+  const _traversePrevElements = ({
+    currentItem,
+    desiredLevel,
+    checkForMenuEscape = true
+  }: {
+    currentItem: LinkedMapValue;
+    desiredLevel: number;
+    checkForMenuEscape?: boolean;
+  }) => {
+    const prevKey = currentItem.prev?.key;
+    if (!prevKey) {
+      return;
+    }
+    const prev = itemsMap.current?.[prevKey];
+    const prevLevel = prev.level;
+
+    const escapedSubMenu = desiredLevel > prevLevel;
+    if (checkForMenuEscape && escapedSubMenu) {
+      return;
+    }
+
+    if (prev && prev.level === desiredLevel) {
+      return prev;
+    } else {
+      return _traversePrevElements({ currentItem: prev, desiredLevel });
+    }
+  };
+
+  return {
+    addElementReference,
+    getNextElement,
+    getNextElementOnSameLevel,
+    getPrevElementOnSameLevel,
+    getFirstElementOnSameLevel,
+    getLastElementOnSameLevel,
+    getParentElement,
+    getItemMap: () => itemsMap.current
+  };
+};

package/src/components/admin/layout/MicrofrontendContainer/MicrofrontendContainer.module.scss

@@ -0,0 +1,25 @@
+/*!
+ * 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.
+ */
+
+.microfrontend-container {
+  &-margin {
+    padding: 2rem;
+  }
+
+  &-max-width {
+    max-width: 105rem;
+  }
+}

package/src/components/admin/layout/MicrofrontendContainer/MicrofrontendContainer.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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, { ReactElement } from "react";
+import classes from "./MicrofrontendContainer.module.scss";
+
+export interface Props {
+  header?: ReactElement | ReactElement[];
+  children: ReactElement | ReactElement[];
+  contentMargins?: boolean;
+  contentMaxWidth?: boolean;
+}
+
+export const MicrofrontendContainer = ({
+  header,
+  children,
+  contentMargins = true,
+  contentMaxWidth = true,
+  ...rest
+}: Props) => {
+  const appliedClasses = [];
+
+  contentMargins && appliedClasses.push(classes["microfrontend-container-margin"]);
+  contentMaxWidth && appliedClasses.push(classes["microfrontend-container-max-width"]);
+
+  return (
+    <>
+      <div>{header}</div>
+      <div className={appliedClasses.join(" ")} {...rest}>
+        {children}
+      </div>
+    </>
+  );
+};

package/src/components/miscellaneous/IdentityProviderButton.module.scss

@@ -0,0 +1,31 @@
+/*!
+ * 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";
+
+.idp-button {
+  width: 100%;
+
+  &--with-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+
+    margin-top: -0.125rem;
+    margin-bottom: -0.125rem;
+  }
+}

package/src/components/miscellaneous/IdentityProviderButton.tsx

@@ -0,0 +1,92 @@
+/*
+ * 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, CSSProperties, ForwardRefRenderFunction } from "react";
+import classes from "./IdentityProviderButton.module.scss";
+import { Button } from "../Button/Button";
+
+export interface SupportedCustomizationKeys {
+  backgroundColor: string;
+  focusBorderColor: string;
+  focusBackgroundColor: string;
+  hoverBackgroundColor: string;
+  pressedBackgroundColor: string;
+  textColor: string;
+  borderColor: string;
+}
+
+export interface Props extends Omit<ComponentPropsWithRef<"button">, "color"> {
+  iconUrl?: string;
+  imgAltText?: string;
+  idpType: string;
+  customization?: SupportedCustomizationKeys;
+  loading?: boolean;
+}
+
+export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement, Props> = ({
+  children,
+  iconUrl,
+  imgAltText,
+  idpType,
+  customization,
+  loading,
+  ...rest
+}) => {
+  const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
+  const DEFAULT_BORDER_COLOR = "#000000";
+  const DEFAULT_TEXT_COLOR = "#000000";
+  const DEFAULT_FOCUS_OUTLINE_COLOR = "var(--color-black50)";
+  const DEFAULT_HOVER_COLOR = "var(--color-black10)";
+  const DEFAULT_PRESSED_COLOR = "var(--color-black20)";
+
+  const generateCSSProperties = () => {
+    return {
+      "--button-fill-primary-default-color":
+        customization?.backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+      borderColor: customization?.borderColor ?? DEFAULT_BORDER_COLOR,
+      "--button-fill-text-color": customization?.textColor ?? DEFAULT_TEXT_COLOR,
+      "--color-focus": customization?.focusBorderColor ?? DEFAULT_FOCUS_OUTLINE_COLOR,
+      "--button-fill-primary-focused-color":
+        customization?.focusBackgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+      "--button-fill-primary-hover-color":
+        customization?.hoverBackgroundColor ?? DEFAULT_HOVER_COLOR,
+      "--button-fill-primary-pressed-color":
+        customization?.pressedBackgroundColor ?? DEFAULT_PRESSED_COLOR
+    } as CSSProperties;
+  };
+
+  return (
+    <Button
+      style={generateCSSProperties()}
+      color="primary"
+      variant="fill"
+      className={classes["idp-button"]}
+      loading={loading}
+      {...rest}
+    >
+      <span className={classes["idp-button--with-icon"]}>
+        <img
+          height={24}
+          width={24}
+          aria-hidden={!imgAltText}
+          src={iconUrl || `/ui-resources-static/common/idb/icons/${idpType}.svg`}
+          alt={imgAltText || "Identity Provider icon"}
+        />
+        {children}
+      </span>
+    </Button>
+  );
+};