@allurereport/web-awesome 3.0.0-beta.6 → 3.0.0-beta.8

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

@@ -1,32 +0,0 @@
-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

@@ -1,198 +0,0 @@
-import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
-import { clsx } from "clsx";
-import type { ComponentChildren, VNode } from "preact";
-import { createContext } from "preact";
-import { useContext, 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";
-
-type MenuContextT = {
-  setIsOpened: (isOpened: boolean) => void;
-};
-
-const MenuContext = createContext<MenuContextT | null>(null);
-
-export const useMenuContext = () => {
-  const context = useContext(MenuContext);
-
-  if (!context) {
-    throw new Error("useMenuContext must be used within a Menu");
-  }
-
-  return context;
-};
-
-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 (
-    <MenuContext.Provider
-      value={{
-        setIsOpened,
-      }}
-    >
-      <>
-        {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>
-      </>
-    </MenuContext.Provider>
-  );
-};
-
-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 { setIsOpened } = useMenuContext();
-  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();
-      setIsOpened(false);
-    }
-
-    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

@@ -1,94 +0,0 @@
-.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

@@ -1,10 +0,0 @@
-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

@@ -1,29 +0,0 @@
-.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

@@ -1,64 +0,0 @@
-import { clsx } from "clsx";
-import {useEffect, 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;
-
-  useEffect(() => {
-    if (localValue !== value) {
-      setLocalValue(value);
-    }
-  }, [value]);
-
-  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"
-        data-testid="search-input"
-      />
-      {showClear && (
-        <div className={styles.clearButton}>
-          <IconButton size="s" icon={closeIcon.id} onClick={handleClear} style="ghost" />
-        </div>
-      )}
-    </Text>
-  );
-};

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

@@ -1,58 +0,0 @@
-.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

@@ -1,8 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,26 +0,0 @@
-.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

@@ -1,30 +0,0 @@
-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, ...rest } = props;
-
-  const handleChange = (e: Event) => {
-    const newValue = !(e.target as HTMLInputElement).checked;
-    onChange(newValue);
-  };
-
-  return (
-    <input
-      {...rest}
-      tabIndex={focusable ? 0 : -1}
-      className={styles.toggle}
-      role="switch"
-      type="checkbox"
-      checked={value}
-      aria-label={label}
-      onToggle={handleChange}
-    />
-  );
-};