@allurereport/web-awesome 3.0.0-beta.9 → 3.0.1

package/src/components/TestResult/TestResultSteps/testResultAttachment.tsx

@@ -1,77 +0,0 @@
-import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import { Code, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
-import type { FunctionComponent } from "preact";
-import { useState } from "preact/hooks";
-import { ArrowButton } from "@/components/ArrowButton";
-import { Attachment } from "@/components/TestResult/TestResultSteps/attachment";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachmentInfo } from "@/components/TestResult/TestResultSteps/testResultAttachmentInfo";
-import { attachmentType } from "@/utils/attachments";
-
-const { lineImagesImage, lineFilesFileAttachment2 } = allureIcons;
-
-const iconMap: Record<string, string> = {
-  "text/plain": lineFilesFileAttachment2,
-  "application/xml": lineFilesFileAttachment2,
-  "text/html": lineFilesFileAttachment2,
-  "text/csv": lineFilesFileAttachment2,
-  "text/tab-separated-values": lineFilesFileAttachment2,
-  "text/css": lineFilesFileAttachment2,
-  "text/uri-list": lineFilesFileAttachment2,
-  "image/svg+xml": lineImagesImage,
-  "image/png": lineImagesImage,
-  "application/json": lineFilesFileAttachment2,
-  "application/zip": lineFilesFileAttachment2,
-  "video/webm": lineImagesImage,
-  "image/jpeg": lineImagesImage,
-  "video/mp4": lineImagesImage,
-  "application/vnd.allure.image.diff": lineImagesImage,
-};
-
-export const TestResultAttachment: FunctionComponent<{
-  item: AttachmentTestStepResult;
-  stepIndex?: number;
-  className?: string;
-}> = ({ item, stepIndex }) => {
-  const [isOpened, setIsOpen] = useState(false);
-  const { link } = item;
-  const { missed } = link;
-  const componentType = attachmentType(link.contentType);
-  const isValidComponentType = !["archive", null].includes(componentType.type as string);
-
-  return (
-    <div className={styles["test-result-step"]}>
-      <div
-        className={styles["test-result-attachment-header"]}
-        onClick={(e) => {
-          e.stopPropagation();
-          setIsOpen((prev) => !prev);
-        }}
-      >
-        <ArrowButton isOpened={isOpened} />
-        <div className={styles["test-result-attachment-icon"]}>
-          <SvgIcon size="s" id={iconMap[link.contentType] ?? lineFilesFileAttachment2} />
-        </div>
-
-        <Code size="s" className={styles["test-result-step-number"]}>
-          {stepIndex}
-        </Code>
-
-        <Text className={styles["test-result-attachment-text"]}>{link.name || link.originalFileName}</Text>
-        {missed && (
-          <Text size={"s"} className={styles["test-result-attachment-missed"]}>
-            missed
-          </Text>
-        )}
-        <TestResultAttachmentInfo item={item} shouldExpand={isValidComponentType} />
-      </div>
-      {isOpened && isValidComponentType && (
-        <div className={styles["test-result-attachment-content-wrapper"]}>
-          <div className={styles["test-result-attachment-content"]}>
-            <Attachment item={item} />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/TestResult/TestResultSteps/testResultStep.tsx

@@ -1,85 +0,0 @@
-import type { DefaultTestStepResult } from "@allurereport/core-api";
-import { Code, Text, allureIcons } from "@allurereport/web-components";
-import type { FunctionComponent } from "preact";
-import { useState } from "preact/hooks";
-import { ArrowButton } from "@/components/ArrowButton";
-import { MetadataList } from "@/components/Metadata";
-import { type MetadataItem } from "@/components/ReportMetadata";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStepInfo } from "@/components/TestResult/TestResultSteps/testResultStepInfo";
-import TreeItemIcon from "@/components/Tree/TreeItemIcon";
-import { collapsedTrees, toggleTree } from "@/stores/tree";
-
-export const TestResultStepParameters = (props: { parameters: DefaultTestStepResult["parameters"] }) => {
-  const { parameters } = props;
-
-  return (
-    <div className={styles["test-result-parameters"]}>
-      <MetadataList size={"s"} envInfo={parameters as unknown as MetadataItem[]} columns={1} />
-    </div>
-  );
-};
-export const TestResultStepsContent = (props: { item: DefaultTestStepResult }) => {
-  const { item } = props;
-
-  return (
-    <div className={styles["test-result-step-content"]}>
-      {Boolean(item?.parameters?.length) && <TestResultStepParameters parameters={item.parameters} />}
-      {Boolean(item?.steps?.length) && (
-        <>
-          {item.steps?.map((subItem, key) => {
-            if (subItem.type === "step") {
-              return <TestResultStep stepIndex={key + 1} key={key} item={subItem} />;
-            }
-
-            if (subItem.type === "attachment") {
-              return <TestResultAttachment stepIndex={key + 1} key={key} item={subItem} />;
-            }
-
-            return null;
-          })}
-        </>
-      )}
-    </div>
-  );
-};
-
-export const TestResultStep: FunctionComponent<{
-  item: DefaultTestStepResult;
-  stepIndex?: number;
-  className?: string;
-}> = ({ item, stepIndex }) => {
-  const isEarlyOpened = collapsedTrees.value.has(item.stepId);
-  const [isOpened, setIsOpen] = useState(isEarlyOpened || false);
-  const hasContent = Boolean(item?.steps?.length || item?.parameters?.length);
-
-  const handleClick = () => {
-    setIsOpen(!isOpened);
-    toggleTree(item.stepId);
-  };
-
-  return (
-    <div className={styles["test-result-step"]}>
-      <div className={styles["test-result-step-header"]} onClick={handleClick}>
-        {!hasContent ? (
-          <div className={styles["test-result-strut"]} />
-        ) : (
-          <ArrowButton
-            isOpened={isOpened}
-            icon={allureIcons.arrowsChevronDown}
-            iconSize={"xs"}
-            className={!hasContent ? styles["test-result-visibility-hidden"] : ""}
-          />
-        )}
-        <TreeItemIcon status={item.status} />
-        <Code size={"s"} className={styles["test-result-step-number"]}>
-          {stepIndex}
-        </Code>
-        <Text className={styles["test-result-header-text"]}>{item.name}</Text>
-        <TestResultStepInfo item={item} />
-      </div>
-      {hasContent && isOpened && <TestResultStepsContent item={item} />}
-    </div>
-  );
-};

package/src/components/TestResult/TestResultSteps/testResultStepInfo.tsx

@@ -1,30 +0,0 @@
-import { type DefaultTestStepResult, formatDuration } from "@allurereport/core-api";
-import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-
-export const TestResultStepInfo = (props: { item: DefaultTestStepResult }) => {
-  const { item } = props;
-  const formattedDuration = formatDuration(item?.duration as number);
-  const stepLength = item.steps?.length;
-  const attachmentLength = item.steps?.filter((step) => step.type === "attachment")?.length;
-
-  return (
-    <div className={styles["item-info"]}>
-      {Boolean(stepLength) && (
-        <div className={styles["item-info-step"]}>
-          <SvgIcon id={allureIcons.lineArrowsCornerDownRight} className={styles["item-info-step-icon"]} />
-          <Text size={"s"}>{stepLength}</Text>
-        </div>
-      )}
-      {Boolean(attachmentLength) && (
-        <div className={styles["item-info-step"]}>
-          <SvgIcon id={allureIcons.lineFilesFileAttachment2} className={styles["item-info-step-icon"]} />
-          <Text size={"s"}>{attachmentLength}</Text>
-        </div>
-      )}
-      <Text type="ui" size={"s"} className={styles["item-time"]}>
-        {formattedDuration}
-      </Text>
-    </div>
-  );
-};

package/src/components/TestResult/TestResultTabs/index.tsx

@@ -1,59 +0,0 @@
-import { Text } from "@allurereport/web-components";
-import { type ComponentChildren, createContext } from "preact";
-import { useContext, useState } from "preact/hooks";
-import * as styles from "./styles.scss";
-
-type TestResultTabsContextT = {
-  currentTab: string | undefined;
-  setCurrentTab: (id: string) => void;
-};
-
-const TestResultTabsContext = createContext<TestResultTabsContextT | null>(null);
-
-export const useTestResultTabsContext = () => {
-  const context = useContext(TestResultTabsContext);
-
-  if (!context) {
-    throw new Error("TestResultTabs components must be used within a TestResultTabs component");
-  }
-
-  return context;
-};
-
-export const TestResultTabsProvider = (props: { initialTab?: string; children: ComponentChildren }) => {
-  const { children, initialTab } = props;
-  const [currentTab, setCurrentTab] = useState<string | undefined>(initialTab);
-
-  return (
-    <TestResultTabsContext.Provider value={{ currentTab, setCurrentTab }}>{children}</TestResultTabsContext.Provider>
-  );
-};
-
-export const TestResultTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
-  return <TestResultTabsProvider {...props} />;
-};
-
-export const TestResultTabsList = (props: { children: ComponentChildren }) => {
-  return <div className={styles.tabsList}>{props.children}</div>;
-};
-
-export const TestResultTab = (props: { id: string; children: ComponentChildren; disabled?: boolean }) => {
-  const { id, children } = props;
-  const { currentTab, setCurrentTab } = useTestResultTabsContext();
-  const isCurrentTab = currentTab === id;
-
-  const handleTabClick = () => {
-    if (isCurrentTab) {
-      return;
-    }
-    setCurrentTab(id);
-  };
-
-  return (
-    <button className={styles.tab} onClick={handleTabClick} aria-current={isCurrentTab ? true : undefined}>
-      <Text type="paragraph" size="m">
-        {children}
-      </Text>
-    </button>
-  );
-};

package/src/components/ThemeButton/ThemeButton.tsx

@@ -1,20 +0,0 @@
-import { IconButton, allureIcons } from "@allurereport/web-components";
-import { useEffect } from "preact/hooks";
-import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
-
-export const ThemeButton = () => {
-  const theme = themeStore.value;
-
-  useEffect(() => {
-    getTheme();
-  }, []);
-
-  return (
-    <IconButton
-      onClick={toggleTheme}
-      style="ghost"
-      icon={theme === "light" ? allureIcons.lineShapesMoon : allureIcons.lineShapesSun}
-      size="s"
-    />
-  );
-};

package/src/components/Tree/Tree.tsx

@@ -1,75 +0,0 @@
-import type { Statistic } from "@allurereport/core-api";
-import cx from "clsx";
-import type { FunctionComponent } from "preact";
-import { useState } from "preact/hooks";
-import type { AllureAwesomeRecursiveTree, AllureAwesomeStatus } from "types";
-import TreeItem from "@/components/Tree/TreeItem";
-import { collapsedTrees, toggleTree } from "@/stores/tree";
-import TreeHeader from "./TreeHeader";
-import * as styles from "./styles.scss";
-
-interface TreeProps {
-  statistic?: Statistic;
-  tree: AllureAwesomeRecursiveTree;
-  name?: string;
-  root?: boolean;
-  statusFilter?: AllureAwesomeStatus;
-}
-
-const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, statistic }) => {
-  const isEarlyCollapsed = collapsedTrees.value.has(tree.nodeId);
-  const haveFailedSteps = statistic === undefined || !!statistic?.failed || !!statistic?.broken;
-  const [isOpened, setIsOpen] = useState(() => (isEarlyCollapsed ? !haveFailedSteps : haveFailedSteps));
-
-  const toggleTreeHeader = () => {
-    setIsOpen(!isOpened);
-    toggleTree(tree.nodeId);
-  };
-  const emptyTree = !tree?.trees?.length && !tree?.leaves?.length;
-
-  if (emptyTree) {
-    return null;
-  }
-
-  const treeContent = isOpened && (
-    <div
-      data-testid="tree-content"
-      className={cx({
-        [styles["tree-content"]]: true,
-        [styles.root]: root,
-      })}
-    >
-      {tree?.trees?.map?.((subTree) => (
-        <Tree
-          key={subTree.nodeId}
-          name={subTree.name}
-          tree={subTree}
-          statistic={subTree.statistic}
-          statusFilter={statusFilter}
-        />
-      ))}
-      {tree?.leaves?.map?.((leaf) => (
-        <TreeItem
-          data-testid="tree-leaf"
-          key={leaf.nodeId}
-          id={leaf.nodeId}
-          name={leaf.name}
-          status={leaf.status}
-          groupOrder={leaf.groupOrder}
-          duration={leaf.duration}
-        />
-      ))}
-    </div>
-  );
-
-  return (
-    <div className={styles.tree}>
-      {name && (
-        <TreeHeader categoryTitle={name} isOpened={isOpened} toggleTree={toggleTreeHeader} statistic={statistic} />
-      )}
-      {treeContent}
-    </div>
-  );
-};
-
-export default Tree;

package/src/components/Tree/TreeHeader.tsx

@@ -1,82 +0,0 @@
-import { type Statistic, statusesList } from "@allurereport/core-api";
-import { Loadable } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
-import { clsx } from "clsx";
-import { type FunctionComponent } from "preact";
-import { ArrowButton } from "@/components/ArrowButton";
-import { statsStore } from "@/stores";
-import { treeFiltersStore } from "@/stores/tree";
-import * as styles from "./styles.scss";
-
-interface TreeHeaderProps {
-  statistic?: Statistic;
-  categoryTitle: string;
-  isOpened: boolean;
-  toggleTree: () => void;
-}
-
-const maxWidthTab = 140;
-const minWidthTab = 46;
-// to make the progress bar more visually responsive for smaller values,
-// we can adjust the formula by adding an offset to stretch the lower part
-// of the logarithmic scale
-const offset = 10;
-
-const progress = (current: number, total: number) => {
-  const logOffset = Math.log(offset);
-  return (Math.log(current + offset) - logOffset) / (Math.log(total + offset) - logOffset);
-};
-
-const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
-  categoryTitle,
-  isOpened,
-  toggleTree,
-  statistic,
-  ...rest
-}) => {
-  const { status: statusFilter } = treeFiltersStore.value;
-
-  return (
-    <Loadable
-      source={statsStore}
-      renderData={(stats) => {
-        const width = Math.floor(progress(statistic.total, stats.total) * (maxWidthTab - minWidthTab) + minWidthTab);
-
-        const treeHeaderBar = statistic
-          ? statusesList
-              .map((status) => ({ status, value: statistic[status] }))
-              .filter(
-                ({ status, value }) =>
-                  value !== undefined && (statusFilter === "total" || (statusFilter === status && value > 0)),
-              )
-              .map(({ status, value }) => {
-                const className = clsx(styles["tree-header-bar-item"], styles[status]);
-                const style = { flexGrow: value };
-
-                return (
-                  <div key={status} className={className} style={style}>
-                    {value}
-                  </div>
-                );
-              })
-          : null;
-
-        return (
-          <div data-testid="tree-header" {...rest} className={styles["tree-header"]} onClick={toggleTree}>
-            <ArrowButton data-testid="tree-arrow" isOpened={isOpened} />
-            <Text data-testid="tree-header-title" size="m" bold className={styles["tree-header-title"]}>
-              {categoryTitle}
-            </Text>
-            {treeHeaderBar && (
-              <div className={styles["tree-header-bar"]} style={{ width: `${width}px` }}>
-                {treeHeaderBar}
-              </div>
-            )}
-          </div>
-        );
-      }}
-    />
-  );
-};
-
-export default TreeHeader;

package/src/components/Tree/TreeItem.tsx

@@ -1,35 +0,0 @@
-import { type TestStatus, formatDuration } from "@allurereport/core-api";
-import { Text } from "@allurereport/web-components";
-import type { FunctionComponent } from "preact";
-import TreeItemIcon from "@/components/Tree/TreeItemIcon";
-import { navigateTo } from "@/index";
-import * as styles from "./styles.scss";
-
-interface TreeItemProps {
-  name: string;
-  status: TestStatus;
-  duration?: number;
-  id: string;
-  groupOrder: number;
-}
-
-export const TreeItem: FunctionComponent<TreeItemProps> = ({ name, groupOrder, status, duration, id, ...rest }) => {
-  const formattedDuration = formatDuration(duration);
-
-  return (
-    <div {...rest} className={styles["tree-item"]} onClick={() => navigateTo(id)}>
-      <TreeItemIcon status={status} />
-      <span data-testid="tree-leaf-order" class={styles.order}>
-        {groupOrder}
-      </span>
-      <Text data-testid="tree-leaf-title" className={styles["item-title"]}>
-        {name}
-      </Text>
-      <Text data-testid="tree-leaf-duration" type="ui" size={"m"} className={styles["item-time"]}>
-        {formattedDuration}
-      </Text>
-    </div>
-  );
-};
-
-export default TreeItem;

package/src/components/Tree/TreeItemIcon.tsx

@@ -1,32 +0,0 @@
-import { SvgIcon, allureIcons } from "@allurereport/web-components";
-import { clsx } from "clsx";
-import type { FunctionalComponent } from "preact";
-import * as styles from "./styles.scss";
-
-interface TestStatusIconProps {
-  status?: "failed" | "broken" | "passed" | "skipped" | "unknown";
-  className?: string;
-  classNameIcon?: string;
-}
-
-const { solidAlertCircle, solidCheckCircle, solidHelpCircle, solidMinusCircle, solidXCircle } = allureIcons;
-
-const icons = {
-  failed: solidXCircle,
-  broken: solidAlertCircle,
-  passed: solidCheckCircle,
-  skipped: solidMinusCircle,
-  unknown: solidHelpCircle,
-};
-
-const TreeItemIcon: FunctionalComponent<TestStatusIconProps> = ({ status = "unknown", className, classNameIcon }) => {
-  const statusClass = clsx(styles[`status-${status}`], classNameIcon);
-
-  return (
-    <div data-testid={`tree-leaf-status-${status}`} className={clsx(styles["tree-item-icon"], className)}>
-      <SvgIcon className={statusClass} id={icons[status]} />
-    </div>
-  );
-};
-
-export default TreeItemIcon;

package/src/i18n/constants.ts

@@ -1,124 +0,0 @@
-export const AVAILABLE_LOCALES = [
-  "en",
-  "ru",
-  "pl",
-  "es",
-  "pt",
-  "de",
-  "am",
-  "az",
-  "fr",
-  "it",
-  "ja",
-  "he",
-  "ka",
-  "kr",
-  "nl",
-  "sv",
-  "tr",
-  "zh",
-] as const;
-
-export const DEFAULT_LOCALE = "en";
-
-export type LangLocale = (typeof AVAILABLE_LOCALES)[number];
-
-export const LANG_LOCALE: Record<
-  LangLocale,
-  {
-    short: string;
-    full: string;
-    iso: string;
-  }
-> = {
-  en: {
-    short: "Eng",
-    full: "English",
-    iso: "en-US",
-  },
-  ru: {
-    short: "Ру",
-    full: "Русский",
-    iso: "ru-RU",
-  },
-  pl: {
-    short: "Pl",
-    full: "Polski",
-    iso: "pl-PL",
-  },
-  es: {
-    short: "Es",
-    full: "Español",
-    iso: "es-ES",
-  },
-  pt: {
-    short: "Pt",
-    full: "Português",
-    iso: "pt-PT",
-  },
-  de: {
-    short: "De",
-    full: "Deutsch",
-    iso: "de-DE",
-  },
-  am: {
-    short: "Am",
-    full: "Հայերեն",
-    iso: "hy-AM",
-  },
-  az: {
-    short: "Az",
-    full: "Azərbaycan",
-    iso: "az-AZ",
-  },
-  fr: {
-    short: "Fr",
-    full: "Français",
-    iso: "fr-FR",
-  },
-  it: {
-    short: "It",
-    full: "Italiano",
-    iso: "it-IT",
-  },
-  ja: {
-    short: "Ja",
-    full: "日本語",
-    iso: "ja-JP",
-  },
-  he: {
-    short: "He",
-    full: "עברית",
-    iso: "he-IL",
-  },
-  ka: {
-    short: "Ka",
-    full: "ქართული",
-    iso: "ka-GE",
-  },
-  kr: {
-    short: "Kr",
-    full: "한국어",
-    iso: "kr-KR",
-  },
-  nl: {
-    short: "Nl",
-    full: "Nederlands",
-    iso: "nl-NL",
-  },
-  sv: {
-    short: "Sv",
-    full: "Svenska",
-    iso: "sv-SE",
-  },
-  tr: {
-    short: "Tr",
-    full: "Türkçe",
-    iso: "tr-TR",
-  },
-  zh: {
-    short: "Zh",
-    full: "中文",
-    iso: "zh-CN",
-  },
-};