@allurereport/web-awesome 3.8.2 → 3.9.0

package/dist/single/manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.8.2",
+  "version": "3.9.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.9.0",
+    "@allurereport/core-api": "3.9.0",
+    "@allurereport/plugin-api": "3.9.0",
+    "@allurereport/web-commons": "3.9.0",
+    "@allurereport/web-components": "3.9.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"
   },
@@ -58,6 +62,7 @@
     "@types/prismjs": "^1.26.5",
     "@vitest/runner": "^3.2.4",
     "@vitest/snapshot": "^3.2.4",
+    "allure-js-commons": "^3.3.3",
     "allure-vitest": "^3.3.2",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",

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/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,5 @@
 }
 
 .version {
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
 }

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;
 }