@allurereport/web-classic 3.0.1 → 3.2.0

package/dist/single/{app-997b57d6b8885a4f88c7.js.LICENSE.txt → app-5b0e25f6b516905c3adc.js.LICENSE.txt}

@@ -23,3 +23,10 @@
  * @license BSD-3-Clause
  * @version 10.1.6
  */
+
+/**!
+ * Sortable 1.15.6
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @author	owenm    <owen23355@gmail.com>
+ * @license MIT
+ */

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-997b57d6b8885a4f88c7.js"
+  "main.js": "app-5b0e25f6b516905c3adc.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-classic",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "The static files for Allure Classic Report",
   "keywords": [
     "allure",
@@ -31,18 +31,17 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/charts-api": "3.0.1",
-    "@allurereport/core-api": "3.0.1",
-    "@allurereport/web-commons": "3.0.1",
-    "@allurereport/web-components": "3.0.1",
-    "@preact/signals": "^1.3.0",
+    "@allurereport/charts-api": "3.2.0",
+    "@allurereport/core-api": "3.2.0",
+    "@allurereport/web-commons": "3.2.0",
+    "@allurereport/web-components": "3.2.0",
+    "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "i18next": "^24.0.2",
     "md5": "^2.3.0",
     "preact": "^10.28.2",
     "prismjs": "^1.30.0",
-    "reset.css": "^2.0.2",
     "split.js": "^1.6.5"
   },
   "devDependencies": {

package/src/components/BaseLayout/styles.scss

@@ -1,6 +1,5 @@
 .layout {
   margin: auto;
-  //padding: 12px 32px;
   background: var(--bg-base-primary);
   color: var(--on-text-primary);
   font-size: 14px;
@@ -11,10 +10,8 @@
 }
 
 .wrapper {
-  //max-width: 920px;
   width: 100%;
   flex-direction: column;
-  //margin: auto;
 }
 
 .content {

package/src/components/Overview/index.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { ChartType } from "@allurereport/charts-api";
 import type { UIChartData } from "@allurereport/web-commons";
+import { themeStore } from "@allurereport/web-commons";
 import {
   Grid,
   GridItem,
@@ -12,14 +13,15 @@ import {
   ThemeProvider,
   TreeMapChartWidget,
 } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 import { useEffect } from "preact/hooks";
-import { themeStore, useI18n } from "@/stores";
+import { useI18n } from "@/stores";
 import { chartsStore, fetchChartsData } from "@/stores/charts";
 import * as styles from "./Overview.module.scss";
 
 const getChartWidgetByType = (
   chartData: UIChartData,
-  { t, empty }: Record<string, (key: string, options?: any) => string>,
+  { empty }: Record<string, (key: string, options?: any) => string>,
 ) => {
   switch (chartData.type) {
     case ChartType.CoverageDiff: {
@@ -65,6 +67,8 @@ const getChartWidgetByType = (
   }
 };
 
+const currentTheme = computed(() => themeStore.value.current);
+
 const Overview = () => {
   const { t } = useI18n("charts");
   const { t: empty } = useI18n("empty");
@@ -74,7 +78,7 @@ const Overview = () => {
   }, []);
 
   return (
-    <ThemeProvider theme={themeStore.value}>
+    <ThemeProvider theme={currentTheme.value}>
       <Loadable
         source={chartsStore}
         renderLoader={() => <PageLoader />}

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

@@ -1,25 +1,75 @@
-import { Text } from "@allurereport/web-components";
+import { proseStyles, resolveCssVarDeclarations, sanitizeIframeHtml, themeStore } from "@allurereport/web-commons";
 import type { FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import type { ClassicTestResult } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import * as styles from "./styles.scss";
 
 export type TestResultDescriptionProps = {
-  description: ClassicTestResult["description"];
+  descriptionHtml: ClassicTestResult["descriptionHtml"];
 };
 
-export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ description }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
+const MIN_HEIGHT = 120;
+
+export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ descriptionHtml }) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [blobUrl, setBlobUrl] = useState("");
+  const [height, setHeight] = useState(MIN_HEIGHT);
+  const currentTheme = themeStore.value.current;
+
+  const sanitized = useMemo(() => (descriptionHtml ? sanitizeIframeHtml(descriptionHtml) : ""), [descriptionHtml]);
+
+  useEffect(() => {
+    if (!sanitized) {
+      setBlobUrl("");
+      return;
+    }
+
+    const iframeThemeVars = resolveCssVarDeclarations(proseStyles);
+
+    const html = `<!DOCTYPE html>
+    <html data-theme="${currentTheme}">
+      <head>
+        <meta charset="utf-8">
+        <style>:root {${iframeThemeVars}}</style>
+        <style>${proseStyles}</style>
+      </head>
+      <body>${sanitized}</body>
+    </html>`;
+
+    const blob = new Blob([html], { type: "text/html" });
+    const url = URL.createObjectURL(blob);
+    setBlobUrl(url);
+
+    return () => URL.revokeObjectURL(url);
+  }, [currentTheme, sanitized]);
+
+  const handleLoad = (e: Event) => {
+    const iframe = e.currentTarget as HTMLIFrameElement;
+    const documentElement = iframe.contentDocument?.documentElement;
+    const body = iframe.contentDocument?.body;
+    const scrollHeight = Math.max(documentElement?.scrollHeight ?? 0, body?.scrollHeight ?? 0);
+    setHeight(Math.max(scrollHeight, MIN_HEIGHT));
+  };
 
   return (
-    <div className={styles["test-result-description"]}>
+    <div className={styles["test-result-description"]} data-testid="test-result-description">
       <div className={styles["test-result-description-wrapper"]}>
-        <MetadataButton title={"Description"} setIsOpen={setIsOpen} isOpened={isOpen} />
+        <MetadataButton title="Description" setIsOpen={setIsOpen} isOpened={isOpen} />
         {isOpen && (
-          <Text tag={"p"} className={styles["test-result-description-text"]}>
-            {description || "Description mock"}
-          </Text>
+          <div className={styles["test-result-description-text"]}>
+            {blobUrl && (
+              <iframe
+                data-testid="test-result-description-frame"
+                src={blobUrl}
+                width="100%"
+                height={String(height)}
+                style={{ border: 0 }}
+                sandbox="allow-same-origin"
+                onLoad={handleLoad}
+              />
+            )}
+          </div>
         )}
       </div>
     </div>

package/src/components/TestResult/TestResultDescription/styles.scss

@@ -9,4 +9,8 @@
 
 .test-result-description-text {
   padding-top: 10px;
+
+  iframe {
+    display: block;
+  }
 }

package/src/components/TestResult/TestResultOverview.tsx

@@ -15,7 +15,7 @@ export type TestResultOverviewProps = {
 };
 
 export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> = ({ testResult }) => {
-  const { error, parameters, groupedLabels, links, description, setup, steps, teardown } = testResult || {};
+  const { error, parameters, groupedLabels, links, descriptionHtml, setup, steps, teardown } = testResult || {};
 
   return (
     <>
@@ -29,7 +29,7 @@ export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> =
         <TestResultMetadata testResult={testResult} />
       )}
       {Boolean(links?.length) && <TestResultLinks links={links} />}
-      {Boolean(description) && <TestResultDescription description={description} />}
+      {Boolean(descriptionHtml) && <TestResultDescription descriptionHtml={descriptionHtml} />}
       <div className={styles["test-results"]}>
         {Boolean(setup?.length) && <TestResultSetup setup={setup} />}
         {Boolean(steps?.length) && <TestResultSteps steps={steps} />}

package/src/components/ThemeButton/ThemeButton.tsx

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

package/src/index.html

@@ -1,40 +1,43 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <!-- Inline favicon for single single-file build -->
-    <link rel="icon" href="data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.09.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.981-4.61-2.587-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23a)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.392 3.6a3.6 3.6 0 0 1 3.6-3.6c4.41 0 8.401 1.807 11.296 4.662a3.6 3.6 0 1 1-5.056 5.126C20.602 8.18 18.398 7.2 15.992 7.2a3.6 3.6 0 0 1-3.6-3.6Z' fill='url(%23b)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 15.992C0 7.157 7.157 0 15.992 0a3.6 3.6 0 0 1 0 7.2A8.789 8.789 0 0 0 7.2 15.992c0 2.406.981 4.61 2.588 6.24a3.6 3.6 0 0 1-5.126 5.056C1.807 24.393 0 20.402 0 15.992Z' fill='url(%23c)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.661 22.232a3.6 3.6 0 0 1 5.091-.035c1.63 1.606 3.834 2.587 6.24 2.587a3.6 3.6 0 0 1 0 7.2c-4.41 0-8.401-1.807-11.295-4.661a3.6 3.6 0 0 1-.036-5.091Z' fill='url(%23d)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.384 12.392a3.6 3.6 0 0 1 3.6 3.6c0 8.835-7.157 15.992-15.992 15.992a3.6 3.6 0 0 1 0-7.2 8.789 8.789 0 0 0 8.792-8.792 3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23e)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.385 12.392a3.6 3.6 0 0 1 3.6 3.6v12.392a3.6 3.6 0 0 1-7.2 0V15.992a3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23f)'/%3E%3Cg clip-path='url(%23g)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.091.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.982-4.61-2.588-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.8' y1='9.4' x2='17.8' y2='3.6' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EF4444'/%3E%3Cstop offset='1' stop-color='%23DC2626'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='3.6' y1='14' x2='5.4' y2='24.8' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2322C55E'/%3E%3Cstop offset='1' stop-color='%2315803D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='4.8' y1='22.2' x2='14.4' y2='29.2' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2394A3B8'/%3E%3Cstop offset='.958' stop-color='%2364748B'/%3E%3Cstop offset='1' stop-color='%2364748B'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='28.4' y1='22.173' x2='22.188' y2='28.384' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D97706'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='29.2' y1='54.4' x2='30.626' y2='54.256' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FBBF24'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3CclipPath id='g'%3E%3Cpath fill='%23fff' transform='translate(24.8 12)' d='M0 0h7.2v8H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Allure Report</title>
-</head>
-<body>
-<div id="app"></div>
-<script>
-</script>
-<script>
-  window.allure = window.allure || {};
-</script>
-<script>
-  const { origin, pathname } = window.location;
-  const url = new URL(pathname, origin);
-  const baseEl = document.createElement("base");
+  <head>
+    <meta charset="UTF-8" />
+    <!-- Inline favicon for single single-file build -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.09.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.981-4.61-2.587-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23a)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.392 3.6a3.6 3.6 0 0 1 3.6-3.6c4.41 0 8.401 1.807 11.296 4.662a3.6 3.6 0 1 1-5.056 5.126C20.602 8.18 18.398 7.2 15.992 7.2a3.6 3.6 0 0 1-3.6-3.6Z' fill='url(%23b)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 15.992C0 7.157 7.157 0 15.992 0a3.6 3.6 0 0 1 0 7.2A8.789 8.789 0 0 0 7.2 15.992c0 2.406.981 4.61 2.588 6.24a3.6 3.6 0 0 1-5.126 5.056C1.807 24.393 0 20.402 0 15.992Z' fill='url(%23c)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.661 22.232a3.6 3.6 0 0 1 5.091-.035c1.63 1.606 3.834 2.587 6.24 2.587a3.6 3.6 0 0 1 0 7.2c-4.41 0-8.401-1.807-11.295-4.661a3.6 3.6 0 0 1-.036-5.091Z' fill='url(%23d)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.384 12.392a3.6 3.6 0 0 1 3.6 3.6c0 8.835-7.157 15.992-15.992 15.992a3.6 3.6 0 0 1 0-7.2 8.789 8.789 0 0 0 8.792-8.792 3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23e)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.385 12.392a3.6 3.6 0 0 1 3.6 3.6v12.392a3.6 3.6 0 0 1-7.2 0V15.992a3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23f)'/%3E%3Cg clip-path='url(%23g)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.091.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.982-4.61-2.588-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.8' y1='9.4' x2='17.8' y2='3.6' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EF4444'/%3E%3Cstop offset='1' stop-color='%23DC2626'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='3.6' y1='14' x2='5.4' y2='24.8' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2322C55E'/%3E%3Cstop offset='1' stop-color='%2315803D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='4.8' y1='22.2' x2='14.4' y2='29.2' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2394A3B8'/%3E%3Cstop offset='.958' stop-color='%2364748B'/%3E%3Cstop offset='1' stop-color='%2364748B'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='28.4' y1='22.173' x2='22.188' y2='28.384' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D97706'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='29.2' y1='54.4' x2='30.626' y2='54.256' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FBBF24'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3CclipPath id='g'%3E%3Cpath fill='%23fff' transform='translate(24.8 12)' d='M0 0h7.2v8H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Allure Report</title>
+    <script>
+      window.allureReportOptions = {
+        reportName: "Allure Classic Report (Dev)",
+        logo: "/data/logo.jpg",
+        theme: "light",
+        reportLanguage: "ru",
+        createdAt: 1731513697651,
+        groupBy: "suite",
+      };
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script></script>
+    <script>
+      window.allure = window.allure || {};
+    </script>
+    <script>
+      const { origin, pathname } = window.location;
+      const url = new URL(pathname, origin);
+      const baseEl = document.createElement("base");
 
-  baseEl.href = url.toString();
+      baseEl.href = url.toString();
 
-  window.document.head.appendChild(baseEl);
-</script>
-<script>
-  window.allureReportOptions = {
-    reportName: "Allure Classic Report (Dev)",
-    logo: "/data/logo.jpg",
-    theme: "light",
-    reportLanguage: "ru",
-    createdAt: 1731513697651,
-    groupBy: "suite",
-  };
-</script>
-<script async>
-  window.allureReportDataReady = true;
-</script>
-</body>
+      window.document.head.appendChild(baseEl);
+    </script>
+
+    <script async>
+      window.allureReportDataReady = true;
+    </script>
+  </body>
 </html>

package/src/index.tsx

@@ -12,7 +12,7 @@ import Packages from "@/components/Packages";
 import Suites from "@/components/Suites";
 import { TestResultView } from "@/components/TestResultView";
 import Timeline from "@/components/Timeline";
-import { currentLocale, getLocale, getTheme } from "@/stores";
+import { currentLocale, getLocale } from "@/stores";
 import { handleHashChange, route } from "@/stores/router";
 
 const tabComponents = {
@@ -28,7 +28,6 @@ const tabComponents = {
 
 const App = () => {
   useEffect(() => {
-    getTheme();
     getLocale();
     handleHashChange();
   }, []);

package/src/stores/index.ts

@@ -1,4 +1,3 @@
-export * from "./theme";
 export type * from "./types";
 export * from "./stats";
 export * from "./locale";

package/src/stores/locale.ts

@@ -52,7 +52,8 @@ i18next
       callback: (errorValue: unknown, translations: Record<string, string> | null) => void,
     ) => {
       try {
-        const resources = await import(`@/translations/${language}.json`);
+        const loadLocale = language === "en-iso" ? "en" : language;
+        const resources = await import(`@/translations/${loadLocale}.json`);
         callback(null, (resources[namespace] as Record<string, string>) || null);
       } catch (error) {
         callback(error, null);

package/src/translations/constants.ts

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

package/src/utils/time.ts

@@ -1,4 +1,5 @@
-import { useI18n } from "@/stores/locale";
+import { getLocaleDateTimeOverride } from "@allurereport/web-commons";
+import { currentLocale, currentLocaleIso, useI18n } from "@/stores/locale";
 
 const defaultOptions: Intl.DateTimeFormatOptions = {
   month: "numeric",
@@ -12,6 +13,19 @@ const defaultOptions: Intl.DateTimeFormatOptions = {
 
 export const timestampToDate = (timestamp: number, options = defaultOptions) => {
   const date = new Date(timestamp);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = useI18n("ui");
-  return new Intl.DateTimeFormat("en-US", options).format(date).replace(",", ` ${t("at")}`);
+  const kind = options.second ? "dateTime" : options.hour || options.minute ? "dateTimeNoSeconds" : "date";
+  const override = getLocaleDateTimeOverride(currentLocale.value, kind);
+  const formatter = new Intl.DateTimeFormat(override?.locale ?? (currentLocaleIso.value as string), {
+    ...options,
+    ...(override?.options ?? {}),
+  });
+  const formatted = formatter.format(date);
+
+  if (override?.includeAtSeparator === false || override?.stripComma) {
+    return formatted.replace(",", "");
+  }
+
+  return formatted.replace(",", ` ${t("at")}`);
 };

package/src/utils/treeFilters.ts

@@ -110,6 +110,7 @@ export const createRecursiveTree = (payload: {
   trees.forEach((rt: ClassicRecursiveTree) => {
     if (rt.statistic) {
       const additional: Statistic = rt.statistic;
+
       mergeStatistic(statistic, additional);
     }
   });

package/types.d.ts

@@ -21,7 +21,7 @@ export type ClassicReportOptions = {
   logo?: string;
   theme?: "light" | "dark" | "auto";
   groupBy?: string[];
-  reportLanguage?: "en";
+  reportLanguage?: string;
   createdAt: number;
   reportUuid: string;
   allureVersion?: string;