@allurereport/web-awesome 3.8.2 → 3.10.0

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-07332238da9897064301.js"
+  "main.js": "app-733f473da7b51f98876d.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.8.2",
+  "version": "3.10.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -15,7 +15,10 @@
   "types": "./types.d.ts",
   "scripts": {
     "clean": "rimraf dist",
-    "dev": "webpack serve --mode development",
+    "dev": "run-s dev:demo dev:copy dev:serve",
+    "dev:demo": "rimraf out/demo && yarn run -T allure generate ${ALLURE_RESULTS_DIR:-../sandbox/allure-results} --config=./allurerc-dev.mjs --output=./out/demo",
+    "dev:copy": "rimraf out/dev/data out/dev/widgets && mkdir -p out/dev && cp -R out/demo/data out/dev/data && cp -R out/demo/widgets out/dev/widgets",
+    "dev:serve": "webpack serve --mode development",
     "build": "run-s clean 'build:prod:*'",
     "build:dev": "run-s clean 'build:dev:*'",
     "build:prod:single": "SINGLE_FILE_MODE=1 webpack --mode production",
@@ -27,16 +30,17 @@
     "lint:fix": "oxlint --import-plugin --fix src test features stories"
   },
   "dependencies": {
-    "@allurereport/charts-api": "3.8.2",
-    "@allurereport/core-api": "3.8.2",
-    "@allurereport/plugin-api": "3.8.2",
-    "@allurereport/web-commons": "3.8.2",
-    "@allurereport/web-components": "3.8.2",
+    "@allurereport/charts-api": "3.10.0",
+    "@allurereport/core-api": "3.10.0",
+    "@allurereport/plugin-api": "3.10.0",
+    "@allurereport/web-commons": "3.10.0",
+    "@allurereport/web-components": "3.10.0",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "i18next": "^24.0.2",
     "md5": "^2.3.0",
+    "minisearch": "^7.2.0",
     "preact": "^10.28.2",
     "prismjs": "^1.30.0"
   },
@@ -54,11 +58,12 @@
     "@types/babel__core": "^7.20.5",
     "@types/d3-shape": "^3.1.6",
     "@types/md5": "^2.3.5",
-    "@types/node": "^20.17.9",
+    "@types/node": "^20",
     "@types/prismjs": "^1.26.5",
     "@vitest/runner": "^3.2.4",
     "@vitest/snapshot": "^3.2.4",
-    "allure-vitest": "^3.3.2",
+    "allure-js-commons": "^3",
+    "allure-vitest": "^3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",
@@ -71,20 +76,20 @@
     "jsdom": "^26.1.0",
     "mini-css-extract-plugin": "^2.9.1",
     "npm-run-all2": "^7.0.1",
-    "postcss": "^8.5.6",
-    "rimraf": "^6.0.1",
+    "postcss": "^8.5.10",
+    "rimraf": "^6",
     "sass": "^1.79.1",
     "sass-loader": "^16.0.1",
     "split.js": "^1.6.5",
     "style-loader": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
     "terser-webpack-plugin": "^5.3.14",
-    "typescript": "^5.6.3",
+    "typescript": "^5",
     "vite": "^8.0.9",
-    "vitest": "^3.2.4",
+    "vitest": "^4.1.0",
     "webpack": "^5.99.9",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.2",
+    "webpack-dev-server": "^5.2.4",
     "webpack-manifest-plugin": "^5.0.0"
   },
   "browserslist": [

package/src/assets/scss/_common.scss

@@ -136,8 +136,8 @@ table {
 }
 
 body {
-  color: var(--on-text-primary);
-  background: var(--bg-base-secondary);
+  color: var(--color-text-primary);
+  background: var(--color-bg-canvas);
   font-family: var(--font-family);
   -webkit-text-size-adjust: 100%;
 }

package/src/assets/scss/index.scss

@@ -1,7 +1,9 @@
-@import "vars.scss";
-@import "fonts.scss";
-@import "day.scss";
-@import "night.scss";
-@import "theme.scss";
-@import "palette.scss";
+@import "../../../../web-components/src/assets/scss/fonts.scss";
+@import "../../../../web-components/src/assets/scss/typography.scss";
+@import "../../../../web-components/src/assets/scss/palette.scss";
+@import "../../../../web-components/src/assets/scss/semantic.scss";
+@import "../../../../web-components/src/assets/scss/spacing.scss";
+@import "../../../../web-components/src/assets/scss/radius.scss";
+@import "../../../../web-components/src/assets/scss/effects.scss";
+@import "../../../../web-components/src/assets/scss/motion.scss";
 @import "common.scss";

package/src/components/BaseLayout/index.tsx

@@ -2,6 +2,7 @@ import { Loadable, PageLoader } from "@allurereport/web-components";
 
 import MainReport from "@/components/MainReport";
 import TestResult from "@/components/TestResult";
+import { focusTestResultPane, focusTreePane } from "@/stores/keyboard";
 import { rootTabRoute, testResultRoute } from "@/stores/router";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
@@ -20,7 +21,13 @@ export const BaseLayout = () => {
 
   if (matches) {
     return (
-      <div className={styles.layout} data-testid="base-layout">
+      <div
+        className={styles.layout}
+        data-testid="base-layout"
+        data-tree-scroll-container
+        data-tr-scroll-container
+        onMouseDown={() => focusTestResultPane()}
+      >
         <Loadable
           source={testResultStore}
           renderLoader={() => <PageLoader />}
@@ -38,7 +45,12 @@ export const BaseLayout = () => {
   }
 
   return (
-    <div className={styles.layout} data-testid="base-layout">
+    <div
+      className={styles.layout}
+      data-testid="base-layout"
+      data-tree-scroll-container
+      onMouseDown={() => focusTreePane()}
+    >
       <div className={styles.wrapper}>
         <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
       </div>

package/src/components/BaseLayout/styles.scss

@@ -1,8 +1,8 @@
 .layout {
   margin: auto;
   padding: 0 32px;
-  background: var(--bg-base-secondary);
-  color: var(--on-text-primary);
+  background: var(--color-bg-canvas);
+  color: var(--color-text-primary);
   font-size: 14px;
   height: 100%;
   overflow: auto;
@@ -18,7 +18,7 @@
 
 .content {
   box-shadow: var(--shadow-small);
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
   border-radius: 12px;
   width: 100%;
 }
@@ -37,7 +37,7 @@
 .title {
   font-size: 14px;
   line-height: 1.25;
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
   margin-bottom: 8px;
 }
 
@@ -53,7 +53,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 24px;
+  padding: 8px 60px 8px 24px;
   width: 100%;
 }
 

package/src/components/Categories/CategoryHeaderItem/styles.scss

@@ -2,7 +2,7 @@
   font-size: 24px;
   margin-bottom: 16px;
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 
@@ -22,7 +22,7 @@
 }
 
 .tree-item-category-name {
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;

package/src/components/Categories/CategoryTreeItem/styles.scss

@@ -9,14 +9,14 @@
     bottom: 0;
     left: 12px;
     width: 1px;
-    background: var(--on-border-muted);
+    background: var(--color-border-subtle);
     opacity: 0;
     transition: opacity 200ms;
   }
 }
 
 .tree-item {
-  border-top: 1px solid var(--on-border-muted);
+  border-top: 1px solid var(--color-border-subtle);
   // padding-left: 24px;
 
 }

package/src/components/Categories/GroupTreeItem/styles.scss

@@ -30,18 +30,17 @@
 }
 
 .tree-item-group[data-group-key="flaky"] :global(.styles_tree-section-title) {
-  color: var(--on-support-atlas);
+  color: var(--color-intent-warning-text);
 }
 
 .tree-item-group[data-group-key="transition"] :global(.styles_tree-section-title) {
-  color: var(--on-support-aldebaran);
+  color: var(--color-intent-primary-text);
 }
 
 .tree-item-group[data-group-key="owner"] :global(.styles_tree-section-title) {
-  color: var(--on-support-sirius);
+  color: var(--color-intent-info-text);
 }
 
 .tree-item-group[data-group-key="layer"] :global(.styles_tree-section-title) {
-  color: var(--on-support-castor);
+  color: var(--color-intent-success-text);
 }
-

package/src/components/Categories/HistoryTreeItem/styles.scss

@@ -4,7 +4,7 @@
 
 .tree-item-history {
   padding: 0;
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
 }
 
 .tree-item-history :global(.styles_tree-section-title) {
@@ -32,7 +32,7 @@
 }
 
 .tree-item-history-name {
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;

package/src/components/Categories/LabelTreeItem/styles.scss

@@ -1,6 +1,6 @@
 .tree-item-label {
   padding: 0;
-  border-top: 1px solid var(--on-border-muted);
+  border-top: 1px solid var(--color-border-subtle);
 }
 
 .tree-item-label-status {
@@ -73,7 +73,7 @@
 }
 
 .tree-item-label-bubble {
-  background: var(--on-border-primary);
+  background: var(--color-border-default);
   border-radius: 4px;
   padding: 2px 4px;
   line-height: 16px;

package/src/components/Categories/MessageTreeItem/index.tsx

@@ -57,7 +57,7 @@ export const MessageTreeItem: FC<MessageTreeItemProps> = ({
 }) => {
   const { t } = useI18n("ui");
   const status = statusFromStatistic(node.statistic);
-  const sanitizedMessage = ansiToHTML(node.name ?? "", { fg: "var(--on-text-primary)", colors: {} });
+  const sanitizedMessage = ansiToHTML(node.name ?? "", { fg: "var(--color-text-primary)", colors: {} });
   const stickyStyle = createCategoriesStickyStyle(depth);
   const hasLongMessage = (node.name ?? "").length > 80;
   const [isMessageExpanded, setIsMessageExpanded] = useState(false);

package/src/components/Categories/MessageTreeItem/styles.scss

@@ -11,7 +11,7 @@
   gap: 8px;
   align-items: center;
   flex: 1 1 auto;
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
   min-height: var(--tree-section-min-height, auto);
   padding: 4px 0;
   position: var(--tree-section-position, relative);
@@ -24,7 +24,7 @@
   width: 100%;
   padding: 4px 8px 4px 16px;
   border-radius: 4px;
-  background-color: var(--bg-alpha-capella);
+  background-color: var(--color-status-failed-bg-subtle);
   position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -39,7 +39,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    background-color: var(--bg-support-capella);
+    background-color: var(--color-status-failed-chart);
   }
 }
 
@@ -123,56 +123,56 @@
 }
 
 .message-status-failed {
-  background-color: var(--bg-alpha-capella);
+  background-color: var(--color-status-failed-bg-subtle);
   &:before {
-    background-color: var(--bg-support-capella);
+    background-color: var(--color-status-failed-chart);
   }
 }
 
 .message-status-broken {
-  background-color: var(--bg-alpha-atlas);
+  background-color: var(--color-status-broken-bg-subtle);
   &:before {
-    background-color: var(--bg-support-atlas);
+    background-color: var(--color-status-broken-chart);
   }
 }
 
 .message-status-skipped {
-  background-color: var(--bg-alpha-rau);
+  background-color: var(--color-status-skipped-bg-subtle);
   &:before {
-    background-color: var(--bg-support-rau);
+    background-color: var(--color-status-skipped-chart);
   }
 }
 
 .message-status-unknown {
-  background-color: var(--bg-alpha-skat);
+  background-color: var(--color-status-unknown-bg-subtle);
   &:before {
-    background-color: var(--bg-support-skat);
+    background-color: var(--color-status-unknown-chart);
   }
 }
 
 .message-status-passed {
-  background-color: var(--bg-alpha-castor);
+  background-color: var(--color-status-passed-bg-subtle);
   &:before {
-    background-color: var(--bg-support-castor);
+    background-color: var(--color-status-passed-chart);
   }
 }
 
 .message-color-failed {
-  color: var(--on-support-capella);
+  color: var(--color-status-failed-text);
 }
 
 .message-color-broken {
-  color: var(--on-support-atlas);
+  color: var(--color-status-broken-text);
 }
 
 .message-color-skipped {
-  color: var(--on-support-rau);
+  color: var(--color-status-skipped-text);
 }
 
 .message-color-passed {
-  color: var(--on-support-castor);
+  color: var(--color-status-passed-text);
 }
 
 .message-color-unknown {
-  color: var(--on-support-skat);
+  color: var(--color-status-unknown-text);
 }

package/src/components/Categories/sticky.ts

@@ -6,7 +6,7 @@ export const createCategoriesStickyStyle = (depth: number, overrides: StickyOver
     "--tree-section-position": "sticky",
     "--tree-section-top": `calc(${depth} * var(--categories-sticky-step))`,
     "--tree-section-z": `${100 - depth}`,
-    "--tree-section-bg": "var(--bg-base-primary)",
+    "--tree-section-bg": "var(--color-bg-primary)",
     "--tree-section-min-height": "var(--categories-sticky-step)",
     ...overrides,
   }) as Record<string, string>;

package/src/components/Footer/FooterVersion.tsx

@@ -3,11 +3,13 @@ import { Text } from "@allurereport/web-components";
 import { useState } from "preact/hooks";
 import type { AwesomeReportOptions } from "types";
 
-import { currentLocaleIso } from "@/stores";
+import { useI18n } from "@/stores";
+import { timestampToDate } from "@/utils/time";
 
 import * as styles from "./styles.scss";
 
 export const FooterVersion = () => {
+  const { t } = useI18n("ui");
   const [createdAt] = useState(() => {
     const reportOptions = getReportOptions<AwesomeReportOptions>();
     if (reportOptions?.createdAt) {
@@ -27,18 +29,11 @@ export const FooterVersion = () => {
     return undefined;
   });
 
-  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
-    month: "numeric",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-  });
+  const formattedCreatedAt = timestampToDate(createdAt as number);
 
   return (
     <Text type="paragraph" size="m" className={styles.version}>
-      {formattedCreatedAt}
+      {t("generated")} {formattedCreatedAt}
       {currentVersion && <span> Ver: {currentVersion}</span>}
     </Text>
   );

package/src/components/Footer/index.tsx

@@ -1,10 +1,13 @@
+import { LanguagePicker } from "@allurereport/web-components";
 import type { ClassValue } from "clsx";
 import { clsx } from "clsx";
 
 import { FooterLogo } from "@/components/Footer/FooterLogo";
 import { FooterVersion } from "@/components/Footer/FooterVersion";
+import { currentLocale, setLocale } from "@/stores/locale";
 
 import * as styles from "@/components/BaseLayout/styles.scss";
+import * as footerStyles from "@/components/Footer/styles.scss";
 
 interface FooterProps {
   className?: ClassValue;
@@ -13,7 +16,10 @@ export const Footer = ({ className }: FooterProps) => {
   return (
     <div className={clsx(styles.below, className)}>
       <FooterLogo />
-      <FooterVersion />
+      <div className={footerStyles["footer-controls"]}>
+        <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
+        <FooterVersion />
+      </div>
     </div>
   );
 };

package/src/components/Footer/styles.scss

@@ -1,5 +1,5 @@
 .footer-logo {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   a {
     text-decoration: none;
   }
@@ -10,5 +10,11 @@
 }
 
 .version {
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
+}
+
+.footer-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }

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

@@ -13,7 +13,7 @@ interface CiInfoProps {
 }
 
 interface CiIconProps {
-  type: CiDescriptor["type"];
+  type?: CiDescriptor["type"];
 }
 
 export const CiIcon = ({ type }: CiIconProps) => {
@@ -47,24 +47,20 @@ export const CiIcon = ({ type }: CiIconProps) => {
 export const CiInfo = ({ className }: CiInfoProps) => {
   const { ci } = getReportOptions<AwesomeReportOptions>();
 
-  if (!ci) {
-    return null;
-  }
+  const ciLink = ci ? ci.pullRequestUrl || ci.jobRunUrl || ci.jobUrl : undefined;
+  const ciLabel = getCiLabel(ci, ciLink);
+  const safeLink = sanitizeExternalUrl(ciLink);
 
-  const link = ci.pullRequestUrl || ci.jobRunUrl || ci.jobUrl;
-  const safeLink = sanitizeExternalUrl(link);
-  const label = ci.pullRequestName || ci.jobRunName || ci.jobName || link;
-
-  if (!link) {
+  if (!ciLabel) {
     return null;
   }
 
   if (!safeLink) {
     return (
       <span className={clsx(styles["ci-info"], className)}>
-        <CiIcon type={ci.type} />
+        <CiIcon type={ci?.type} />
         <Text type="paragraph" size="m" bold>
-          {label}
+          {ciLabel}
         </Text>
       </span>
     );
@@ -72,10 +68,18 @@ export const CiInfo = ({ className }: CiInfoProps) => {
 
   return (
     <a className={clsx(styles["ci-info"], className)} href={safeLink} target="_blank" rel="noopener noreferrer">
-      <CiIcon type={ci.type} />
+      <CiIcon type={ci?.type} />
       <Text type="paragraph" size="m" bold>
-        {label}
+        {ciLabel}
       </Text>
     </a>
   );
 };
+
+const getCiLabel = (ci?: CiDescriptor, link?: string) => {
+  if (!ci) {
+    return undefined;
+  }
+
+  return ci.pullRequestName || ci.jobRunName || ci.jobName || link;
+};

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

@@ -2,6 +2,6 @@
   display: flex;
   align-items: center;
   gap: 0 6px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   text-decoration: none;
 }

package/src/components/Header/styles.scss

@@ -10,12 +10,12 @@
 
 .logoWrapper {
   margin-right: auto;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .logo {
   margin-right: 8px;
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
   top: -2px;
 }
 

package/src/components/HeaderControls/index.tsx

@@ -1,10 +1,9 @@
 import { themeStore, toggleUserTheme } from "@allurereport/web-commons";
-import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
+import { ThemeButton } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 
 import { EnvironmentPicker } from "@/components/EnvironmentPicker";
 import ToggleLayout from "@/components/ToggleLayout";
-import { currentLocale, setLocale } from "@/stores/locale";
 
 interface HeaderControlsProps {
   className?: string;
@@ -16,7 +15,6 @@ export const HeaderControls = ({ className }: HeaderControlsProps) => {
   return (
     <div className={className}>
       <EnvironmentPicker />
-      <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
       <ToggleLayout />
       <ThemeButton theme={selectedTheme.value} toggleTheme={toggleUserTheme} />
     </div>