@allurereport/web-awesome 3.0.0-beta.3

package/src/components/commons/Loadable/index.tsx

@@ -0,0 +1,32 @@
+import type { Signal } from "@preact/signals";
+import type { JSX } from "preact";
+import { type StoreSignalState } from "@/stores";
+
+export type LoadableProps<T, K = T> = {
+  source: Signal<StoreSignalState<T>>;
+  transformData?: (data: T) => K;
+  renderData: (data: K) => JSX.Element;
+  renderLoader?: () => JSX.Element;
+  renderError?: (error: string) => JSX.Element;
+};
+
+export const Loadable = <T, K = T>(props: LoadableProps<T, K>) => {
+  const {
+    source,
+    transformData = (data: T) => data as unknown as K,
+    renderLoader = () => null,
+    // TODO: https://github.com/qameta/allure3/issues/179
+    renderError = (err) => <div>{err}</div>,
+    renderData,
+  } = props;
+
+  if (source.value.loading) {
+    return renderLoader();
+  }
+
+  if (source.value.error) {
+    return renderError(source.value.error);
+  }
+
+  return renderData(transformData(source.value.data));
+};

package/src/components/commons/Menu/index.tsx

@@ -0,0 +1,173 @@
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { clsx } from "clsx";
+import type { ComponentChildren, VNode } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import check from "@/assets/svg/line-general-check.svg";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Text } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+
+export const Menu = (props: {
+  children: ComponentChildren;
+  isInitialOpened?: boolean;
+  size?: "s" | "m" | "l" | "xl";
+  placement?: "bottom-start" | "bottom-end";
+  menuTrigger: (props: { onClick: () => void; isOpened: boolean; setIsOpened: (isOpened: boolean) => void }) => VNode;
+  menuTriggerWrapper?: "div" | "span";
+}) => {
+  const {
+    children,
+    menuTrigger,
+    menuTriggerWrapper: MenuTriggerWrapper = "div",
+    size = "m",
+    isInitialOpened = false,
+    placement = "bottom-end",
+  } = props;
+
+  const [isOpened, setIsOpened] = useState(isInitialOpened);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  const handleTriggerClick = () => {
+    setIsOpened(!isOpened);
+  };
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpened) {
+        setIsOpened(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (!isOpened) {
+        return;
+      }
+
+      if (!menuRef.current) {
+        return;
+      }
+
+      if (!menuRef.current.contains(e.target as Node)) {
+        setIsOpened(false);
+      }
+    };
+
+    if (isOpened) {
+      document.addEventListener("click", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [menuRef.current, isOpened]);
+
+  useEffect(() => {
+    const updatePosition = () => {
+      if (!menuRef.current && !triggerRef.current) {
+        return;
+      }
+
+      computePosition(triggerRef.current, menuRef.current, {
+        placement,
+        middleware: [offset(6), flip(), shift({ padding: 5 })],
+      }).then(({ x, y }) => {
+        if (menuRef.current) {
+          Object.assign(menuRef.current.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+            position: "absolute",
+            "z-index": 10,
+          });
+        }
+      });
+    };
+
+    updatePosition();
+    return autoUpdate(triggerRef.current, menuRef.current, updatePosition);
+  }, [menuRef.current, triggerRef.current]);
+
+  return (
+    <>
+      {typeof menuTrigger === "function" && (
+        <MenuTriggerWrapper ref={triggerRef}>
+          {menuTrigger({
+            isOpened,
+            onClick: handleTriggerClick,
+            setIsOpened,
+          })}
+        </MenuTriggerWrapper>
+      )}
+      <div ref={menuRef}>
+        {isOpened && <aside className={clsx(styles.menu, styles[`size-${size}`])}>{children}</aside>}
+      </div>
+    </>
+  );
+};
+
+Menu.Section = (props: { children: ComponentChildren }) => {
+  return <ul className={styles.section}>{props.children}</ul>;
+};
+
+type ItemProps = {
+  children: ComponentChildren;
+  onClick?: () => void;
+  leadingIcon?: string;
+  rightSlot?: ComponentChildren;
+  closeMenuOnClick?: boolean;
+  ariaLabel?: string;
+  setIsOpened: (isOpened: boolean) => void;
+};
+
+Menu.Item = (props: ItemProps) => {
+  const { children, onClick, leadingIcon, rightSlot, ariaLabel, closeMenuOnClick = true } = props;
+  const isInteractive = typeof onClick === "function";
+  const hasLeadingIcon = typeof leadingIcon === "string";
+
+  const handleItemClick = (e: MouseEvent) => {
+    if (isInteractive && closeMenuOnClick) {
+      e.stopPropagation();
+    }
+
+    if (isInteractive) {
+      onClick?.();
+    }
+  };
+
+  return (
+    <li className={styles.menuListItem}>
+      <Text
+        aria-label={ariaLabel}
+        type="paragraph"
+        size="m"
+        tag={isInteractive ? "button" : "div"}
+        className={clsx(styles.menuItem, isInteractive && styles.interactive)}
+        onClick={handleItemClick}
+        data-interactive-menu-item={isInteractive ? true : undefined}
+      >
+        {hasLeadingIcon && <SvgIcon id={leadingIcon} className={styles.leadingIcon} size="m" />}
+        <div className={styles.content}>{children}</div>
+        {rightSlot && <div className={styles.right}>{rightSlot}</div>}
+      </Text>
+    </li>
+  );
+};
+
+Menu.ItemWithCheckmark = (
+  props: ItemProps & {
+    isChecked: boolean;
+  },
+) => {
+  const { isChecked = false, ...itemProps } = props;
+  return (
+    <Menu.Item {...itemProps} rightSlot={isChecked && <SvgIcon className={styles.checkmarkIcon} id={check.id} />} />
+  );
+};

package/src/components/commons/Menu/styles.scss

@@ -0,0 +1,94 @@
+.menu {
+  background-color: var(--bg-base-modal);
+  border: 1px solid var(--on-border-primary);
+  box-shadow: var(--shadow-medium);
+  border-radius: 6px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+
+  &.size-s {
+    width: 180px;
+  }
+
+  &.size-m {
+    width: 200px;
+  }
+
+  &.size-l {
+    width: 280px;
+  }
+
+  &.size-xl {
+    width: 408px;
+  }
+}
+
+.menuListItem {
+  padding: 2px 4px;
+}
+
+.section {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.menuItem {
+  background-color: var(--bg-control-flat);
+  padding: 6px 8px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  user-select: none;
+  appearance: none;
+  width: 100%;
+  border: none;
+
+  &.interactive {
+    transition: background-color var(--color-change-transition-duration);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--bg-control-flat-medium);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      background-color: var(--bg-control-flat-medium);
+    }
+
+    &:active {
+      background-color: var(--bg-control-flat-heavy);
+    }
+  }
+
+  & .leadingIcon {
+    color: var(--on-icon-secondary);
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+
+  & .content {
+    flex-grow: 1;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    font-family: inherit;
+    text-align: left;
+  }
+
+  & .right {
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+
+  & .checkmarkIcon {
+    color: var(--on-support-aldebaran);
+    margin-top: 2px;
+  }
+}

package/src/components/commons/PageLoader/index.tsx

@@ -0,0 +1,10 @@
+import { Spinner } from "@/components/commons/Spinner";
+import * as styles from "./styles.scss";
+
+export const PageLoader = () => {
+  return (
+    <div className={styles["page-loader"]}>
+      <Spinner size="m" />
+    </div>
+  );
+};

package/src/components/commons/PageLoader/styles.scss

@@ -0,0 +1,29 @@
+.page-loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  background: var(--bg-base-secondary);
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border-radius: 100%;
+  animation: spin 0.5s linear infinite;
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--gray-200);
+  border-bottom-color: var(--atlas-night-darken-6);
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/commons/SearchBox/index.tsx

@@ -0,0 +1,61 @@
+import { clsx } from "clsx";
+import { useState } from "preact/hooks";
+import searchIcon from "@/assets/svg/line-general-search-md.svg";
+import closeIcon from "@/assets/svg/line-general-x-close.svg";
+import { useDebouncedCallback } from "@/hooks/useDebouncedCallback";
+import { IconButton } from "../Button";
+import { SvgIcon } from "../SvgIcon";
+import { Text } from "../Typography";
+import * as styles from "./styles.scss";
+
+type Props = {
+  placeholder?: string;
+  invalid?: string;
+  error?: string;
+  value: string;
+  onChange: (value: string) => void;
+  changeDebounce?: number;
+};
+
+export const SearchBox = (props: Props) => {
+  const { placeholder, value, onChange, changeDebounce = 300 } = props;
+  const [localValue, setLocalValue] = useState(value);
+
+  const onChangeDebounced = useDebouncedCallback(onChange, changeDebounce);
+
+  const handleChange = (e: Event) => {
+    const newValue = (e.target as HTMLInputElement).value;
+
+    setLocalValue(newValue);
+    onChangeDebounced(newValue);
+  };
+
+  const handleClear = (e: PointerEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setLocalValue("");
+    onChangeDebounced("");
+  };
+
+  const showClear = !!localValue;
+
+  return (
+    <Text className={styles.inputWrap} type="ui" size="m" tag="div">
+      <SvgIcon id={searchIcon.id} size="s" className={styles.leadingIcon} />
+      <input
+        className={clsx(styles.input, showClear && styles.inputClear)}
+        type="text"
+        placeholder={placeholder}
+        onInput={handleChange}
+        value={localValue}
+        name="search"
+        autocomplete="off"
+      />
+      {showClear && (
+        <div className={styles.clearButton}>
+          <IconButton size="s" icon={closeIcon.id} onClick={handleClear} style="ghost" />
+        </div>
+      )}
+    </Text>
+  );
+};

package/src/components/commons/SearchBox/styles.scss

@@ -0,0 +1,58 @@
+.inputWrap {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+}
+
+.input {
+  color: var(--on-text-primary);
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  font-family: inherit;
+  flex-grow: 1;
+  background-color: var(--bg-control-flat);
+  border: 1px solid var(--on-border-control);
+  padding: 7px;
+  padding-left: calc(7px + 16px + 7px);
+  border-radius: 6px;
+  transition:
+    background-color var(--color-change-transition-duration),
+    border-color var(--color-change-transition-duration);
+
+  &:hover:not(:focus) {
+    background-color: var(--bg-control-flat-medium);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--on-border-heavy);
+  }
+
+  &::placeholder {
+    color: var(--on-text-secondary);
+  }
+
+  &.inputClear {
+    padding-right: calc(7px + 16px + 7px);
+  }
+}
+
+.leadingIcon {
+  display: block;
+  top: 8px;
+  left: 8px;
+  position: absolute;
+  user-select: none;
+  pointer-events: none;
+  color: var(--on-icon-primary);
+  z-index: 0;
+}
+
+.clearButton {
+  top: 4px;
+  right: 4px;
+  position: absolute;
+  z-index: 0;
+}

package/src/components/commons/Spinner/index.tsx

@@ -0,0 +1,8 @@
+import spinnerIcon from "@/assets/svg/spinner.svg";
+import { SvgIcon } from "../SvgIcon";
+
+export function Spinner(props: { size?: "s" | "m" }) {
+  const { size } = props;
+
+  return <SvgIcon role="progressbar" id={spinnerIcon.id} size={size} />;
+}

package/src/components/commons/SuccessRatePieChart/index.tsx

@@ -0,0 +1,52 @@
+import type { TestStatus } from "@allurereport/core-api";
+import { Heading } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+
+type Slice = {
+  status: TestStatus;
+  count: number;
+  d: string;
+};
+
+type Props = {
+  slices: Slice[];
+  percentage: number;
+};
+
+function getColorFromStatus(status: TestStatus) {
+  switch (status) {
+    case "passed":
+      return "var(--bg-support-castor)";
+    case "failed":
+      return "var(--bg-support-capella)";
+    case "broken":
+      return "var(--bg-support-atlas)";
+    case "unknown":
+      return "var(--bg-support-skat)";
+    case "skipped":
+      return "var(--bg-support-rau)";
+    default:
+      return "var(--bg-support-skat)";
+  }
+}
+
+export const SuccessRatePieChart = (props: Props) => {
+  const { slices, percentage } = props;
+
+  return (
+    <article aria-label="Success rate" role="presentation" className={styles.chart}>
+      <svg aria-hidden viewBox="0 0 100 100">
+        <g transform={`translate(50, 50)`}>
+          {slices.map((slice) => (
+            <path key={slice.status} d={slice.d} fill={getColorFromStatus(slice.status)} />
+          ))}
+        </g>
+      </svg>
+      {!!percentage && (
+        <Heading className={styles.legend} size="s" tag="b">
+          {percentage}%
+        </Heading>
+      )}
+    </article>
+  );
+};

package/src/components/commons/SuccessRatePieChart/styles.scss

@@ -0,0 +1,12 @@
+.legend {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--on-text-primary);
+}
+
+.chart {
+  position: relative;
+  display: flex;
+}

package/src/components/commons/SvgIcon/index.tsx

@@ -0,0 +1,46 @@
+import { clsx } from "clsx";
+import type { JSX } from "preact";
+import * as styles from "./styles.scss";
+
+export type SvgIconProps = Omit<JSX.HTMLAttributes<SVGElement>, "className" | "id" | "size" | "inline"> & {
+  /**
+   * "xs" is 12x12
+   * "s" is 16x16
+   * "m" size is 20x20
+   *
+   * @default s
+   */
+  size?: "xs" | "s" | "m";
+  /**
+   * Additional class name
+   */
+  className?: string;
+  /**
+   * Icon id
+   *
+   * @example
+   * import lineShapesMoonIcon from "@/assets/svg/line-shapes-moon.svg";
+   *
+   * <SvgIcon id={lineShapesMoonIcon.id} />
+   */
+  id: string;
+  /**
+   * Inline icon
+   */
+  inline?: boolean;
+};
+
+/**
+ * Renders SVG icon
+ *
+ * default size is 16x16
+ */
+export const SvgIcon = (props: SvgIconProps) => {
+  const { id, size = "s", inline = false, className = "" } = props;
+
+  return (
+    <svg className={clsx(styles.icon, styles[`size-${size}`], inline && styles.inline, className)}>
+      <use xlinkHref={`#${id}`} />
+    </svg>
+  );
+};

package/src/components/commons/SvgIcon/styles.scss

@@ -0,0 +1,26 @@
+.icon {
+  display: block;
+  overflow: hidden;
+
+  &.size-xs {
+    width: 12px;
+    height: 12px;
+  }
+
+  &.size-s {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.size-m {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.inline {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+  }
+}

package/src/components/commons/Toggle/index.tsx

@@ -0,0 +1,29 @@
+import * as styles from "./styles.scss";
+
+type Props = {
+  value: boolean;
+  label: string;
+  onChange: (value: boolean) => void;
+  focusable?: boolean;
+};
+
+export const Toggle = (props: Props) => {
+  const { value, label, onChange, focusable = true } = props;
+
+  const handleChange = (e: Event) => {
+    const newValue = !(e.target as HTMLInputElement).checked;
+    onChange(newValue);
+  };
+
+  return (
+    <input
+      tabIndex={focusable ? 0 : -1}
+      className={styles.toggle}
+      role="switch"
+      type="checkbox"
+      checked={value}
+      aria-label={label}
+      onChange={handleChange}
+    />
+  );
+};

package/src/components/commons/Toggle/styles.scss

@@ -0,0 +1,48 @@
+.toggle {
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  width: 28px;
+  height: 16px;
+  background-color: var(--bg-base-neutral);
+  position: relative;
+  border-radius: 9px;
+  padding: 2px;
+  transition: background-color var(--color-change-transition-duration);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--on-icon-secondary);
+  }
+
+  &:active {
+    background-color: var(--on-icon-primary);
+  }
+
+  &:checked {
+    background-color: var(--bg-support-aldebaran);
+
+    &:hover {
+      background-color: var(--bg-support-aldebaran-medium);
+    }
+
+    &:active {
+      background-color: var(--bg-support-aldebaran-heavy);
+    }
+
+    &::after {
+      transform: translateX(12px);
+    }
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    width: 12px;
+    height: 12px;
+    border-radius: 100px;
+    background-color: var(--constant-on-icon-primary);
+    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
+    transition: transform var(--interaction-transition-duration) ease-out;
+  }
+}