@allurereport/web-awesome 3.0.0-beta.3

package/src/components/app/ArrowButton/index.tsx

@@ -0,0 +1,36 @@
+import { clsx } from "clsx";
+import { FunctionalComponent } from "preact";
+import lineChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import * as styles from "./styles.scss";
+
+export interface ArrowButtonProps {
+  isOpened?: boolean;
+  iconSize?: "m" | "xs" | "s";
+  buttonSize?: "m" | "xs" | "s";
+  className?: string;
+  icon?: string;
+}
+
+export const ArrowButton: FunctionalComponent<ArrowButtonProps> = ({
+  isOpened,
+  buttonSize = "m",
+  iconSize = "xs",
+  className,
+  icon,
+}) => {
+  return (
+    <button className={clsx(styles["arrow-button"], styles[`arrow-button-${buttonSize}`])}>
+      <SvgIcon
+        id={icon || lineChevronDown.id}
+        size={iconSize}
+        className={clsx(
+          styles["arrow-button-icon"],
+          isOpened && styles["arrow-button-icon--opened"],
+          styles[`icon-size-${iconSize}`],
+          className,
+        )}
+      />
+    </button>
+  );
+};

package/src/components/app/ArrowButton/styles.scss

@@ -0,0 +1,32 @@
+.arrow-button {
+  background: transparent;
+  border: none;
+  padding: 8px 4px;
+  color: var(--on-icon-secondary);
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.arrow-button-s {
+  padding: 0 4px;
+}
+
+.arrow-button-m {
+  padding: 6px 6px;
+}
+
+.icon-size-m {
+  width: 15px;
+  height: 15px;
+}
+
+.arrow-button-icon {
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.arrow-button-icon--opened {
+  transform: rotate(0);
+}

package/src/components/app/BaseLayout/index.tsx

@@ -0,0 +1,60 @@
+import { ensureReportDataReady } from "@allurereport/web-commons";
+import { useEffect } from "preact/compat";
+import { Footer } from "@/components/app/Footer";
+import MainReport from "@/components/app/MainReport";
+import Modal from "@/components/app/Modal";
+import TestResult from "@/components/app/TestResult";
+import { Loadable } from "@/components/commons/Loadable";
+import { PageLoader } from "@/components/commons/PageLoader";
+import { fetchStats, getTheme } from "@/stores";
+import { getLocale } from "@/stores";
+import { fetchPieChartData } from "@/stores/chart";
+import { fetchEnvInfo } from "@/stores/envInfo";
+import { fetchTestResult, testResultStore } from "@/stores/testResults";
+import { fetchTreeData, treeStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+export const BaseLayout = ({ testResultId }) => {
+  useEffect(() => {
+    getTheme();
+    getLocale();
+  }, []);
+
+  useEffect(() => {
+    if (testResultId) {
+      fetchTestResult(testResultId);
+    } else {
+      Promise.all([
+        ensureReportDataReady(),
+        fetchStats(),
+        fetchPieChartData(),
+        fetchTreeData("suites"),
+        fetchEnvInfo(),
+      ]);
+    }
+  }, [testResultId]);
+
+  const content = testResultId ? (
+    <Loadable
+      source={testResultStore}
+      renderLoader={() => <PageLoader />}
+      transformData={(data) => data[testResultId]}
+      renderData={(testResult) => (
+        <>
+          <Modal testResult={testResult} />
+          <div className={styles.wrapper}>
+            <TestResult testResult={testResult} />
+            <Footer />
+          </div>
+        </>
+      )}
+    />
+  ) : (
+    <div className={styles.wrapper}>
+      <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
+      <Footer />
+    </div>
+  );
+
+  return <div className={styles.layout}>{content}</div>;
+};

package/src/components/app/BaseLayout/styles.scss

@@ -0,0 +1,60 @@
+.layout {
+  margin: auto;
+  padding: 12px 32px;
+  background: var(--bg-base-secondary);
+  color: var(--on-text-primary);
+  font-size: 14px;
+  min-height: 100vh;
+}
+
+.wrapper {
+  max-width: 920px;
+  width: 100%;
+  flex-direction: column;
+  margin: auto;
+}
+
+.content {
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+  width: 100%;
+}
+
+.test-results {
+  min-height: 320px;
+  padding-bottom: 32px;
+  padding-top: 12px;
+}
+
+.logo {
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.title {
+  font-size: 14px;
+  line-height: 1.25;
+  color: var(--on-text-primary);
+  margin-bottom: 8px;
+}
+
+.above {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: 12px;
+  align-items: center;
+}
+
+.below {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+  align-items: center;
+}
+
+.test-result-errors {
+  padding: 0 24px;
+  margin-top: 12px;
+}

package/src/components/app/Footer/FooterLogo.tsx

@@ -0,0 +1,16 @@
+import { Text } from "@/components/commons/Typography";
+import { ReportLogoFull } from "../ReportLogoFull";
+import * as styles from "./styles.scss";
+
+export const FooterLogo = () => {
+  return (
+    <div className={styles["footer-logo"]}>
+      <a href="https://allurereport.org" target={"_blank"}>
+        <Text type="paragraph" size="m" className={styles["footer-logo"]}>
+          Powered by
+        </Text>
+        <ReportLogoFull className={styles.logo} />
+      </a>
+    </div>
+  );
+};

package/src/components/app/Footer/FooterVersion.tsx

@@ -0,0 +1,27 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { Text } from "@/components/commons/Typography";
+import { currentLocale } from "@/stores";
+import { AllureAwesomeReportOptions } from "../../../../types";
+import * as styles from "./styles.scss";
+
+export function FooterVersion() {
+  const currentLang = currentLocale.value;
+  const { createdAt } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
+  const locale = currentLang === "en" ? "en-US" : "ru-RU";
+
+  const formattedCreatedAt = new Date(createdAt).toLocaleDateString(locale, {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
+
+  return (
+    <Text type="paragraph" size="m" className={styles.version}>
+      {formattedCreatedAt}
+      <span> Ver: 3.0.0</span>
+    </Text>
+  );
+}

package/src/components/app/Footer/index.tsx

@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import * as styles from "@/components/app/BaseLayout/styles.scss";
+import { FooterLogo } from "@/components/app/Footer/FooterLogo";
+import { FooterVersion } from "@/components/app/Footer/FooterVersion";
+
+export const Footer = () => {
+  return (
+    <div className={clsx(styles.below)}>
+      <FooterLogo />
+      <FooterVersion />
+    </div>
+  );
+};

package/src/components/app/Footer/styles.scss

@@ -0,0 +1,14 @@
+.footer-logo {
+  color: var(--on-text-secondary);
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  margin-left: 8px;
+}
+
+.version {
+  color: var(--on-text-hint);
+}

package/src/components/app/Header/index.tsx

@@ -0,0 +1,17 @@
+import githubLogo from "@/assets/svg/github.svg";
+import { LanguagePicker } from "@/components/app/LanguagePicker";
+import { ThemeButton } from "@/components/app/ThemeButton/ThemeButton";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Text } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+
+export const Header = () => {
+  return (
+    <div className={styles.above}>
+      <div className={styles.right}>
+        <LanguagePicker />
+        <ThemeButton />
+      </div>
+    </div>
+  );
+};

package/src/components/app/Header/styles.scss

@@ -0,0 +1,26 @@
+.above {
+  margin-bottom: 12px;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.logoWrapper {
+  margin-right: auto;
+  color: var(--on-text-secondary);
+}
+
+.logo {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+  top: -2px;
+}
+
+.right {
+  margin-left: auto;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}

package/src/components/app/LanguagePicker/index.tsx

@@ -0,0 +1,41 @@
+import { DropdownButton } from "@/components/commons/Button";
+import { LANG_LOCALE, type LangLocale } from "@/i18n/constants";
+import { currentLocale } from "@/stores";
+import { setLocale } from "@/stores/locale";
+import { Menu } from "../../commons/Menu";
+
+const langPickerOptions = Object.entries(LANG_LOCALE).map(([key, { full }]) => ({
+  key: key as LangLocale,
+  value: full,
+}));
+
+export const LanguagePicker = () => {
+  const locale = currentLocale.value;
+
+  const handleSelect = (selectedOption: LangLocale) => {
+    setLocale(selectedOption);
+  };
+
+  return (
+    <Menu
+      size="s"
+      menuTrigger={({ isOpened, onClick }) => (
+        <DropdownButton
+          style="ghost"
+          size="s"
+          text={LANG_LOCALE[locale || "en"].short}
+          isExpanded={isOpened}
+          onClick={onClick}
+        />
+      )}
+    >
+      <Menu.Section>
+        {langPickerOptions.map(({ key, value }) => (
+          <Menu.ItemWithCheckmark onClick={() => handleSelect(key)} key={key} isChecked={locale === key}>
+            {value}
+          </Menu.ItemWithCheckmark>
+        ))}
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/app/MainReport/index.tsx

@@ -0,0 +1,19 @@
+import * as styles from "@/components/app/BaseLayout/styles.scss";
+import { Header } from "@/components/app/Header";
+import { ReportBody } from "@/components/app/ReportBody";
+import { ReportHeader } from "@/components/app/ReportHeader";
+import { ReportMetadata } from "@/components/app/ReportMetadata";
+
+const MainReport = () => {
+  return (
+    <>
+      <Header />
+      <div className={styles.content}>
+        <ReportHeader />
+        <ReportMetadata />
+        <ReportBody />
+      </div>
+    </>
+  );
+};
+export default MainReport;

package/src/components/app/Metadata/index.tsx

@@ -0,0 +1,114 @@
+import clsx from "clsx";
+import i18n from "i18next";
+import { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import LineGeneralCopy3 from "@/assets/svg/line-general-copy-3.svg";
+import { MetadataButton } from "@/components/app/MetadataButton";
+import { MetadataProps } from "@/components/app/ReportMetadata";
+import { Button } from "@/components/commons/Button";
+import { Menu } from "@/components/commons/Menu";
+import { Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores/locale";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+const { t } = useI18n("ui");
+
+export const MetadataList: FunctionalComponent<MetadataProps & { columns?: number }> = ({
+  envInfo,
+  size = "m",
+  columns = 2,
+}) => {
+  return (
+    <div
+      class={styles["report-metadata-list"]}
+      style={{ gridTemplateColumns: `repeat(${columns}, ${100 / columns - 5}%)` }}
+    >
+      {envInfo?.map((envInfo) => (
+        <MetadataKeyValue size={size} title={envInfo.name} value={envInfo.value} values={envInfo.values} />
+      ))}
+    </div>
+  );
+};
+
+export const TestResultMetadataList: FunctionalComponent<MetadataProps> = ({ groupedLabels, size = "m" }) => {
+  return (
+    <div class={styles["report-metadata-list"]}>
+      {groupedLabels &&
+        Object.entries(groupedLabels)?.map(([name, values]) => (
+          <MetadataKeyValue size={size} title={name} values={values} />
+        ))}
+    </div>
+  );
+};
+export const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
+  const [isOpened, setIsOpen] = useState(true);
+  return (
+    <div class={styles["report-metadata"]}>
+      <MetadataButton isOpened={isOpened} setIsOpen={setIsOpen} counter={envInfo.length} title={t("metadata")} />
+      {isOpened && <MetadataList envInfo={envInfo} />}
+    </div>
+  );
+};
+const MetadataTooltip = ({ value }) => {
+  const { t } = useI18n("ui");
+  return (
+    <div className={styles["metadata-tooltip"]}>
+      <div className={styles["metadata-tooltip-value"]}>
+        <Text>{value}</Text>
+      </div>
+      <Button style={"outline"} icon={LineGeneralCopy3.id} text={t("copy")} onClick={() => copyToClipboard(value)} />
+    </div>
+  );
+};
+const MetaDataKeyLabel: FunctionalComponent<{
+  size?: "s" | "m";
+  value: string;
+}> = ({ size = "s", value }) => {
+  return (
+    <Menu
+      size="xl"
+      menuTrigger={({ onClick }) => (
+        <div className={styles["report-metadata-keyvalue-wrapper"]}>
+          <Text type={"ui"} size={size} onClick={onClick} bold className={styles["report-metadata-keyvalue-value"]}>
+            {value}
+          </Text>
+        </div>
+      )}
+    >
+      <Menu.Section>
+        <MetadataTooltip value={value} />
+      </Menu.Section>
+    </Menu>
+  );
+};
+
+const MetadataKeyValue: FunctionalComponent<{
+  title: string;
+  value?: string;
+  values?: string[];
+  size?: "s" | "m";
+}> = ({ title, value, values, size = "m" }) => {
+  return (
+    <div className={styles["report-metadata-keyvalue"]}>
+      <Text
+        type={"ui"}
+        size={size}
+        className={clsx(styles["report-metadata-keyvalue-title"], styles[`report-metadata-${size}`])}
+      >
+        {title}
+      </Text>
+      {values?.length ? (
+        <div className={styles["report-metadata-values"]}>
+          {values.map((item) => (
+            <MetaDataKeyLabel value={item} />
+          ))}
+        </div>
+      ) : (
+        <div className={styles["report-metadata-values"]}>
+          <MetaDataKeyLabel value={value} />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/app/Metadata/styles.scss

@@ -0,0 +1,146 @@
+@import "../../../assets/scss/mixins.scss";
+
+.report-metadata-wrapper {
+  padding: 0 24px;
+  align-items: center;
+}
+
+.report-metadata-separator {
+  border-left: 1px solid var(--on-border-primary);
+  height: 24px;
+  margin: 11px 0;
+}
+
+.report-metadata-status {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.report-metadata-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 16px 0;
+  border-top: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--on-border-primary);
+  width: 100%;
+}
+
+.report-metadata-all-tests {
+  display: flex;
+  flex: 1 1 auto;
+  gap: 24px;
+  margin-right: 8px;
+}
+
+.metadata-item-title {
+  color: var(--on-text-secondary);
+  margin-bottom: 6px;
+}
+
+.metadata-item-value {
+  font-weight: bold;
+}
+
+.report-metadata {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.report-metadata-keyvalue {
+  display: inline-grid;
+  grid-template-columns: 30% 60%;
+  gap: 10%;
+  align-items: center;
+}
+
+.report-metadata-values {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.report-metadata-s {
+  font-size: 12px;
+}
+
+.report-metadata-keyvalue-title {
+  padding: 8px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.report-metadata-keyvalue-wrapper {
+  background: var(--on-border-primary);
+  border-radius: 4px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 2px 4px;
+  line-height: 16px;
+}
+
+.report-metadata-keyvalue-value {
+  width: max-content;
+  height: max-content;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.report-metadata-list {
+  display: grid;
+  column-gap: 5%;
+  grid-template-columns: repeat(2, 45%);
+}
+
+.metadata-test-type {
+  display: flex;
+}
+
+.metadata-color-badge {
+  width: 4px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--on-text-secondary);
+  margin-right: 8px;
+  align-self: center;
+  @include status-bg-and-text;
+}
+
+.metadata-with-icon {
+  display: flex;
+  align-items: center;
+}
+
+.metadata-icon {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+}
+
+.metadata-tooltip {
+  padding: 12px 12px 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.metadata-tooltip-value {
+  flex: 1 1 auto;
+  min-width: 320px;
+  background: var(--bg-base-secondary);
+  max-height: 238px;
+  padding: 8px 16px;
+  overflow: hidden;
+  overflow-y: auto;
+  border-radius: 8px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

package/src/components/app/MetadataButton/index.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import { FunctionalComponent } from "preact";
+import { ArrowButton } from "@/components/app/ArrowButton";
+import { Counter } from "@/components/commons/Counter";
+import { Text } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+
+interface MetadataButtonProps {
+  isOpened?: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  counter?: number;
+  title?: string;
+}
+
+export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({ isOpened, setIsOpen, counter, title }) => {
+  return (
+    <div
+      className={clsx(styles["report-metadata-header"], isOpened && styles["report-metadata-header-opened"])}
+      onClick={() => setIsOpen(!isOpened)}
+    >
+      <Text size={"m"} bold>
+        {title}
+      </Text>
+      {counter && <Counter count={counter} size="s" />}
+      <ArrowButton
+        isOpened={isOpened}
+        iconSize={"s"}
+        buttonSize={"s"}
+        className={styles["report-metadata-header-arrow"]}
+      />
+    </div>
+  );
+};