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

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-c2627b69.js"
+  "main.js": "app-f16f6693.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,8 +31,9 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.6",
-    "@allurereport/web-commons": "3.0.0-beta.6",
+    "@allurereport/core-api": "3.0.0-beta.8",
+    "@allurereport/web-commons": "3.0.0-beta.8",
+    "@allurereport/web-components": "3.0.0-beta.8",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -60,7 +61,7 @@
     "@typescript-eslint/parser": "^8.0.0",
     "@vitest/runner": "^2.1.8",
     "@vitest/snapshot": "^2.1.8",
-    "allure-vitest": "^3.0.7",
+    "allure-vitest": "^3.0.9",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",
@@ -79,6 +80,7 @@
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "filesize": "^10.1.6",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "globals": "^15.9.0",
     "html-webpack-plugin": "^5.6.3",
     "mini-css-extract-plugin": "^2.9.1",

package/src/assets/scss/fonts.scss

@@ -1,21 +1,3 @@
-@font-face {
-  font-family: "PTRootUIWebVF";
-  font-display: swap;
-  font-weight: 300 700;
-  src:
-    url("../fonts/pt-root-ui_vf.woff2") format("woff2 supports variations"),
-    url("../fonts/pt-root-ui_vf.woff2") format("woff2-variations"),
-    url("../fonts/pt-root-ui_vf.woff") format("woff supports variations"),
-    url("../fonts/pt-root-ui_vf.woff") format("woff-variations");
-}
+@import "~@allurereport/web-components/mixins.scss";
 
-@font-face {
-  font-family: JetBrainsMonoVF;
-  font-display: swap;
-  font-weight: 100 800;
-  src:
-    url("../fonts/JetBrainsMono_vf.woff2") format("woff2 supports variations"),
-    url("../fonts/JetBrainsMono_vf.woff2") format("woff2-variations"),
-    url("../fonts/JetBrainsMono_vf.woff") format("woff supports variations"),
-    url("../fonts/JetBrainsMono_vf.woff") format("woff-variations");
-}
+@include allure-fonts;

package/src/components/{app/ArrowButton → ArrowButton}/index.tsx

@@ -1,7 +1,6 @@
+import { SvgIcon, allureIcons } from "@allurereport/web-components";
 import { clsx } from "clsx";
 import type { 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 {
@@ -17,13 +16,13 @@ export const ArrowButton: FunctionalComponent<ArrowButtonProps> = ({
   buttonSize = "m",
   iconSize = "xs",
   className,
-  icon,
+  icon = allureIcons.lineArrowsChevronDown,
   ...rest
 }) => {
   return (
     <button className={clsx(styles["arrow-button"], styles[`arrow-button-${buttonSize}`])} {...rest}>
       <SvgIcon
-        id={icon || lineChevronDown.id}
+        id={icon}
         size={iconSize}
         className={clsx(
           styles["arrow-button-icon"],

package/src/components/{app/BaseLayout → BaseLayout}/index.tsx

@@ -1,11 +1,10 @@
-import { ensureReportDataReady, getReportOptions } from "@allurereport/web-commons";
+import { ensureReportDataReady } from "@allurereport/web-commons";
+import { Loadable, PageLoader } from "@allurereport/web-components";
 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 { Footer } from "@/components/Footer";
+import MainReport from "@/components/MainReport";
+import Modal from "@/components/Modal";
+import TestResult from "@/components/TestResult";
 import { fetchStats, getLocale, getTheme } from "@/stores";
 import { fetchPieChartData } from "@/stores/chart";
 import { fetchEnvInfo } from "@/stores/envInfo";
@@ -13,7 +12,11 @@ import { fetchTestResult, fetchTestResultNav, testResultStore } from "@/stores/t
 import { fetchTreeData, treeStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
-export const BaseLayout = ({ testResultId }) => {
+export type BaseLayoutProps = {
+  testResultId?: string;
+};
+
+export const BaseLayout = ({ testResultId }: BaseLayoutProps) => {
   useEffect(() => {
     getTheme();
     getLocale();
@@ -24,13 +27,11 @@ export const BaseLayout = ({ testResultId }) => {
       fetchTestResult(testResultId);
       fetchTestResultNav();
     } else {
-      Promise.all([
-        ensureReportDataReady(),
-        fetchStats(),
-        fetchPieChartData(),
-        fetchTreeData(),
-        fetchEnvInfo(),
-      ]);
+      ensureReportDataReady();
+      fetchStats();
+      fetchPieChartData();
+      fetchTreeData();
+      fetchEnvInfo();
     }
   }, [testResultId]);
 
@@ -42,7 +43,7 @@ export const BaseLayout = ({ testResultId }) => {
       renderData={(testResult) => (
         <>
           <Modal testResult={testResult} />
-          <div className={styles.wrapper}>
+          <div className={styles.wrapper} key={testResult?.id}>
             <TestResult testResult={testResult} />
             <Footer />
           </div>

package/src/components/{app/Footer → Footer}/FooterLogo.tsx

@@ -1,11 +1,11 @@
-import { Text } from "@/components/commons/Typography";
+import { Text } from "@allurereport/web-components";
 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"}>
+      <a href="https://allurereport.org" target={"_blank"} rel="noreferrer">
         <Text type="paragraph" size="m" className={styles["footer-logo"]}>
           Powered by
         </Text>

package/src/components/Footer/FooterVersion.tsx

@@ -0,0 +1,33 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { Text } from "@allurereport/web-components";
+import { useEffect, useState } from "preact/hooks";
+import type { AllureAwesomeReportOptions } from "types";
+import { currentLocaleIso } from "@/stores";
+import * as styles from "./styles.scss";
+
+export const FooterVersion = () => {
+  const [createdAt, setCreatedAt] = useState<number | null>(null);
+
+  useEffect(() => {
+    const reportOptions = getReportOptions<AllureAwesomeReportOptions>();
+    if (reportOptions?.createdAt) {
+      setCreatedAt(Number(reportOptions.createdAt));
+    }
+  }, []);
+
+  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
+    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/Footer/index.tsx

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

package/src/components/Header/index.tsx

@@ -0,0 +1,14 @@
+import { LanguagePicker } from "@/components/LanguagePicker";
+import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
+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/LanguagePicker → LanguagePicker}/index.tsx

@@ -1,9 +1,9 @@
-import { DropdownButton } from "@/components/commons/Button";
+import { DropdownButton, Menu } from "@allurereport/web-components";
 import { LANG_LOCALE, type LangLocale } from "@/i18n/constants";
 import { currentLocale } from "@/stores";
 import { setLocale } from "@/stores/locale";
-import { Menu } from "../../commons/Menu";
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 const langPickerOptions = Object.entries(LANG_LOCALE).map(([key, { full }]) => ({
   key: key as LangLocale,
   value: full,
@@ -11,7 +11,6 @@ const langPickerOptions = Object.entries(LANG_LOCALE).map(([key, { full }]) => (
 
 export const LanguagePicker = () => {
   const locale = currentLocale.value;
-
   const handleSelect = (selectedOption: LangLocale) => {
     setLocale(selectedOption);
   };

package/src/components/MainReport/index.tsx

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

package/src/components/{app/Metadata → Metadata}/index.tsx

@@ -1,19 +1,13 @@
+import { Button, Menu, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
-import i18n from "i18next";
-import { FunctionalComponent } from "preact";
+import type { 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 { MetadataButton } from "@/components/MetadataButton";
+import type { MetadataProps } from "@/components/ReportMetadata";
 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",
@@ -24,8 +18,8 @@ export const MetadataList: FunctionalComponent<MetadataProps & { columns?: numbe
       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} />
+      {envInfo?.map(({ name, values, value }) => (
+        <MetadataKeyValue key={name} size={size} title={name} value={value} values={values} />
       ))}
     </div>
   );
@@ -35,14 +29,18 @@ export const TestResultMetadataList: FunctionalComponent<MetadataProps> = ({ gro
   return (
     <div class={styles["report-metadata-list"]}>
       {groupedLabels &&
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         Object.entries(groupedLabels)?.map(([name, values]) => (
-          <MetadataKeyValue size={size} title={name} values={values} />
+          <MetadataKeyValue key={name} size={size} title={name} values={values} />
         ))}
     </div>
   );
 };
+
 export const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
+  const { t } = useI18n("ui");
   const [isOpened, setIsOpen] = useState(true);
+
   return (
     <div class={styles["report-metadata"]}>
       <MetadataButton isOpened={isOpened} setIsOpen={setIsOpen} counter={envInfo.length} title={t("metadata")} />
@@ -50,17 +48,26 @@ export const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
     </div>
   );
 };
-const MetadataTooltip = ({ value }) => {
+
+const MetadataTooltip = (props: { value: string }) => {
+  const { value } = props;
   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)} />
+      <Button
+        style={"outline"}
+        icon={allureIcons.lineGeneralCopy3}
+        text={t("copy")}
+        onClick={() => copyToClipboard(value)}
+      />
     </div>
   );
 };
+
 const MetaDataKeyLabel: FunctionalComponent<{
   size?: "s" | "m";
   value: string;
@@ -101,7 +108,7 @@ const MetadataKeyValue: FunctionalComponent<{
       {values?.length ? (
         <div className={styles["report-metadata-values"]}>
           {values.map((item) => (
-            <MetaDataKeyLabel value={item} />
+            <MetaDataKeyLabel key={item} value={item} />
           ))}
         </div>
       ) : (

package/src/components/{app/Metadata → Metadata}/styles.scss

@@ -1,4 +1,4 @@
-@import "../../../assets/scss/mixins.scss";
+@import "~@allurereport/web-components/mixins.scss";
 
 .report-metadata-wrapper {
   padding: 0 24px;

package/src/components/{app/MetadataButton → MetadataButton}/index.tsx

@@ -1,8 +1,7 @@
+import { Counter, Text } from "@allurereport/web-components";
 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 type { FunctionalComponent } from "preact";
+import { ArrowButton } from "@/components/ArrowButton";
 import * as styles from "./styles.scss";
 
 interface MetadataButtonProps {

package/src/components/{app/Modal → Modal}/index.tsx

@@ -1,19 +1,12 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { Button, Heading, IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import { signal } from "@preact/signals";
 import type { FunctionalComponent, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import Prism from "prismjs";
-import LineGeneralDownloadCloud from "@/assets/svg/line-general-download-cloud.svg";
-import LineGeneralCopy from "@/assets/svg/line-general-link-external.svg";
-import LineGeneralXClose from "@/assets/svg/line-general-x-close.svg";
-import ViewOffIcon from "@/assets/svg/view-off.svg";
-import ViewIcon from "@/assets/svg/view.svg";
-import { Attachment } from "@/components/app/TestResult/TestResultSteps/attachment";
-import { Button, IconButton } from "@/components/commons/Button";
-import { TooltipWrapper } from "@/components/commons/Tooltip";
-import { Heading } from "@/components/commons/Typography";
+import type { AllureAwesomeTestResult } from "types";
+import { Attachment } from "@/components/TestResult/TestResultSteps/attachment";
 import { attachmentType, downloadAttachment, openAttachmentInNewTab } from "@/utils/attachments";
-import type { AllureAwesomeTestResult } from "../../../../types.js";
 import * as styles from "./styles.scss";
 
 export const isModalOpen = signal(false);
@@ -43,7 +36,7 @@ const closeModal = () => {
   isModalOpen.value = false;
 };
 
-const ModalThumb = ({ item, children }) => {
+const ModalThumb: FunctionalComponent<{ item: AttachmentTestStepResult }> = ({ item, children }) => {
   const isActiveThumb = modalData.value.data?.link?.id === item.link?.id;
 
   const showAttach = (showedItem: AttachmentTestStepResult) => {
@@ -54,10 +47,7 @@ const ModalThumb = ({ item, children }) => {
   };
 
   return (
-    <div
-      className={`${styles["modal-thumb"]} ${isActiveThumb ? styles.active : ""}`}
-      onClick={() => showAttach(item as AttachmentTestStepResult)}
-    >
+    <div className={`${styles["modal-thumb"]} ${isActiveThumb ? styles.active : ""}`} onClick={() => showAttach(item)}>
       {children}
     </div>
   );
@@ -136,7 +126,7 @@ const Modal: FunctionalComponent<ModalProps> = ({ testResult }) => {
                 <Button
                   style={"outline"}
                   onClick={openInNewWindow}
-                  icon={LineGeneralCopy.id}
+                  icon={allureIcons.lineGeneralLinkExternal}
                   text={"Open in new tab"}
                 />
               )}
@@ -146,7 +136,7 @@ const Modal: FunctionalComponent<ModalProps> = ({ testResult }) => {
                     style={"outline"}
                     size={"m"}
                     iconSize={"s"}
-                    icon={modalData.value.preview ? ViewOffIcon.id : ViewIcon.id}
+                    icon={modalData.value.preview ? allureIcons.viewOff : allureIcons.view}
                     onClick={() => {
                       modalData.value = {
                         ...modalData.value,
@@ -161,11 +151,11 @@ const Modal: FunctionalComponent<ModalProps> = ({ testResult }) => {
                   style={"outline"}
                   size={"m"}
                   iconSize={"s"}
-                  icon={LineGeneralDownloadCloud.id}
+                  icon={allureIcons.lineGeneralDownloadCloud}
                   onClick={(e: MouseEvent) => downloadData(e)}
                 />
               </TooltipWrapper>
-              <IconButton iconSize={"m"} style={"ghost"} onClick={closeModal} icon={LineGeneralXClose.id} />
+              <IconButton iconSize={"m"} style={"ghost"} onClick={closeModal} icon={allureIcons.lineGeneralXClose} />
             </div>
           </div>
           <div className={styles["modal-data"]}>

package/src/components/{app/ReportBody → ReportBody}/Filters.tsx

@@ -1,10 +1,6 @@
-import notificationBoxIcon from "@/assets/svg/line-alerts-notification-box.svg";
-import refreshIcon from "@/assets/svg/line-arrows-refresh-ccw-1.svg";
-import settingsIcon from "@/assets/svg/line-general-settings-1.svg";
-import zapIcon from "@/assets/svg/line-general-zap.svg";
-import { Button } from "@/components/commons/Button";
-import { Menu } from "@/components/commons/Menu";
-import { Toggle } from "@/components/commons/Toggle";
+import { Button, allureIcons } from "@allurereport/web-components";
+import { Menu } from "@allurereport/web-components";
+import { Toggle } from "@allurereport/web-components";
 import { useI18n } from "@/stores/locale";
 import { setTreeFilter, treeFiltersStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
@@ -19,7 +15,7 @@ export const Filters = () => {
       menuTrigger={({ isOpened, onClick }) => (
         <div className={hasFilter && styles.filtersBtnWithFilters}>
           <Button
-            icon={settingsIcon.id}
+            icon={allureIcons.lineGeneralSettings1}
             text={t("more-filters")}
             size="m"
             style="outline"
@@ -37,7 +33,7 @@ export const Filters = () => {
           onClick={() => {
             setTreeFilter("flaky", !flaky);
           }}
-          leadingIcon={zapIcon.id}
+          leadingIcon={allureIcons.lineGeneralZap}
           rightSlot={
             <div className={styles.filterToggle}>
               <Toggle
@@ -56,7 +52,7 @@ export const Filters = () => {
           closeMenuOnClick={false}
           ariaLabel={t("enable-filter", { filter: t("retry") })}
           onClick={() => setTreeFilter("retry", !retry)}
-          leadingIcon={refreshIcon.id}
+          leadingIcon={allureIcons.lineArrowsRefreshCcw1}
           rightSlot={
             <div className={styles.filterToggle}>
               <Toggle
@@ -75,7 +71,7 @@ export const Filters = () => {
           closeMenuOnClick={false}
           ariaLabel={t("enable-filter", { filter: t("new") })}
           onClick={() => setTreeFilter("new", !isNew)}
-          leadingIcon={notificationBoxIcon.id}
+          leadingIcon={allureIcons.lineAlertsNotificationBox}
           rightSlot={
             <div className={styles.filterToggle}>
               <Toggle

package/src/components/{app/ReportBody → ReportBody}/HeaderActions.tsx

@@ -1,6 +1,6 @@
+import { SearchBox } from "@allurereport/web-components";
 import { useI18n } from "@/stores/locale";
 import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
-import { SearchBox } from "../../commons/SearchBox";
 import { Filters } from "./Filters";
 import * as styles from "./styles.scss";
 

package/src/components/{app/ReportBody → ReportBody}/SortBy.tsx

@@ -1,16 +1,12 @@
+import { DropdownButton, allureIcons } from "@allurereport/web-components";
+import { Link } from "@allurereport/web-components";
+import { Menu } from "@allurereport/web-components";
+import { SvgIcon } from "@allurereport/web-components";
+import { Text } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { ComponentChildren } from "preact";
-import lineChevronDownIcon from "@/assets/svg/line-arrows-chevron-down.svg";
-import sortAscIcon from "@/assets/svg/line-arrows-sort-line-asc.svg";
-import sortDescIcon from "@/assets/svg/line-arrows-sort-line-desc.svg";
-import switchVerticalIcon from "@/assets/svg/line-arrows-switch-vertical-1.svg";
 import { useI18n } from "@/stores/locale";
 import { setTreeDirection, setTreeSortBy, treeFiltersStore } from "@/stores/tree";
-import { DropdownButton } from "../../commons/Button";
-import { Link } from "../../commons/Link";
-import { Menu } from "../../commons/Menu";
-import { SvgIcon } from "../../commons/SvgIcon";
-import { Text } from "../../commons/Typography";
 import * as styles from "./styles.scss";
 
 const BtnWrapper = ({ children }: { children: ComponentChildren }) => {
@@ -40,7 +36,7 @@ export const SortBy = () => {
                 {displayedSortByValue} {displayedDirection}
                 <SvgIcon
                   size="s"
-                  id={lineChevronDownIcon.id}
+                  id={allureIcons.lineArrowsChevronDown}
                   className={clsx(styles.sortByIcon, isOpened && styles.sortByIconReversed)}
                 />
               </Link>
@@ -54,7 +50,7 @@ export const SortBy = () => {
                 <Menu.Item
                   closeMenuOnClick={false}
                   onClick={onClick}
-                  leadingIcon={switchVerticalIcon.id}
+                  leadingIcon={allureIcons.lineArrowsSwitchVertical1}
                   rightSlot={
                     <BtnWrapper>
                       <DropdownButton
@@ -92,7 +88,9 @@ export const SortBy = () => {
                 <Menu.Item
                   closeMenuOnClick={false}
                   onClick={onClick}
-                  leadingIcon={direction === "asc" ? sortAscIcon.id : sortDescIcon.id}
+                  leadingIcon={
+                    direction === "asc" ? allureIcons.lineArrowsSortLineAsc : allureIcons.lineArrowsSortLineDesc
+                  }
                   rightSlot={
                     <BtnWrapper>
                       <DropdownButton
@@ -112,14 +110,14 @@ export const SortBy = () => {
               <Menu.Section>
                 <Menu.ItemWithCheckmark
                   onClick={() => setTreeDirection("asc")}
-                  leadingIcon={sortAscIcon.id}
+                  leadingIcon={allureIcons.lineArrowsSortLineAsc}
                   isChecked={direction === "asc"}
                 >
                   {sortByDirectionsLocale(`${sortBy}-asc`)}
                 </Menu.ItemWithCheckmark>
                 <Menu.ItemWithCheckmark
                   onClick={() => setTreeDirection("desc")}
-                  leadingIcon={sortDescIcon.id}
+                  leadingIcon={allureIcons.lineArrowsSortLineDesc}
                   isChecked={direction === "desc"}
                 >
                   {sortByDirectionsLocale(`${sortBy}-desc`)}

package/src/components/{app/ReportBody → ReportBody}/index.tsx

@@ -1,9 +1,9 @@
 import { statusesList } from "@allurereport/core-api";
-import { Loadable } from "@/components/commons/Loadable";
+import { Loadable } from "@allurereport/web-components";
+import { Counter } from "@allurereport/web-components";
 import { statsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
 import { capitalize } from "@/utils/capitalize";
-import { Counter } from "../../commons/Counter";
 import { Tab, Tabs, TabsList } from "../Tabs";
 import { TreeList } from "../Tree";
 import { HeaderActions } from "./HeaderActions";

package/src/components/{app/ReportHeader → ReportHeader}/ReportHeaderLabelList.tsx

@@ -1,5 +1,5 @@
-import * as styles from "@/components/app/ReportHeader/styles.scss";
-import { Label } from "@/components/commons/Label";
+import { Label } from "@allurereport/web-components";
+import * as styles from "@/components/ReportHeader/styles.scss";
 
 export const ReportHeaderLabelList = () => {
   return (

package/src/components/{app/ReportHeader → ReportHeader}/ReportHeaderLogo.tsx

@@ -1,5 +1,5 @@
-import * as styles from "@/components/app/ReportHeader/styles.scss";
-import { ReportLogo } from "@/components/app/ReportLogo";
+import * as styles from "@/components/ReportHeader/styles.scss";
+import { ReportLogo } from "@/components/ReportLogo";
 
 export const ReportHeaderLogo = () => {
   return (

package/src/components/{app/ReportHeader → ReportHeader}/ReportHeaderPie.tsx

@@ -1,5 +1,5 @@
-import { Loadable } from "@/components/commons/Loadable";
-import { SuccessRatePieChart } from "@/components/commons/SuccessRatePieChart";
+import { Loadable } from "@allurereport/web-components";
+import { SuccessRatePieChart } from "@allurereport/web-components";
 import { pieChartStore } from "@/stores/chart";
 import * as styles from "./styles.scss";
 

package/src/components/{app/ReportHeader → ReportHeader}/index.tsx

@@ -1,14 +1,14 @@
 import { getReportOptions } from "@allurereport/web-commons";
-import { ReportHeaderLogo } from "@/components/app/ReportHeader/ReportHeaderLogo";
-import { ReportHeaderPie } from "@/components/app/ReportHeader/ReportHeaderPie";
-import { Heading, Text } from "@/components/commons/Typography";
+import { Heading, Text } from "@allurereport/web-components";
+import type { AllureAwesomeReportOptions } from "types";
+import { ReportHeaderLogo } from "@/components/ReportHeader/ReportHeaderLogo";
+import { ReportHeaderPie } from "@/components/ReportHeader/ReportHeaderPie";
 import { currentLocaleIso } from "@/stores";
-import type { AllureAwesomeReportOptions } from "../../../../types.js";
 import * as styles from "./styles.scss";
 
 export const ReportHeader = () => {
   const { reportName, createdAt } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
-  const formattedCreatedAt = new Date(createdAt).toLocaleDateString(currentLocaleIso.value as string, {
+  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
     month: "long",
     day: "numeric",
     year: "numeric",