@allurereport/web-dashboard 3.0.0 → 3.1.0

package/src/components/Dashboard/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { ChartType } from "@allurereport/charts-api";
-import { type UIChartData } from "@allurereport/web-commons";
+import { type UIChartData, themeStore } from "@allurereport/web-commons";
 import {
   CurrentStatusChartWidget,
   DurationDynamicsChartWidget,
@@ -20,13 +20,15 @@ import {
   TrSeveritiesChartWidget,
   TreeMapChartWidget,
 } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 import { useEffect } from "preact/hooks";
 import { dashboardStore, fetchDashboardData } from "@/stores/dashboard";
 import { currentEnvironment, fetchEnvironments } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
-import { themeStore } from "@/stores/theme";
 import * as styles from "./styles.scss";
 
+const currentTheme = computed(() => themeStore.value.current);
+
 const getChartWidgetByType = (
   chartData: UIChartData,
   { t, empty }: Record<string, (key: string, options?: any) => string>,
@@ -211,7 +213,7 @@ export const Dashboard = () => {
   }, []);
 
   return (
-    <ThemeProvider theme={themeStore.value}>
+    <ThemeProvider theme={currentTheme.value}>
       <Loadable
         source={dashboardStore}
         renderLoader={() => <PageLoader />}

package/src/components/Header/index.tsx

@@ -1,8 +1,9 @@
+import { themeStore, toggleUserTheme } from "@allurereport/web-commons";
 import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import { currentLocale, setLocale } from "@/stores/locale";
-import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
 import { EnvironmentPicker } from "../EnvironmentPicker";
 import * as styles from "./styles.scss";
 
@@ -10,13 +11,15 @@ interface HeaderProps {
   className?: ClassValue;
 }
 
+const selectedTheme = computed(() => themeStore.value.selected);
+
 export const Header = ({ className }: HeaderProps) => {
   return (
     <div className={clsx(styles.above, className)}>
       <div className={styles.right}>
         <EnvironmentPicker />
         <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
-        <ThemeButton theme={themeStore.value} toggleTheme={toggleTheme} getTheme={getTheme} />
+        <ThemeButton theme={selectedTheme.value} toggleTheme={toggleUserTheme} />
       </div>
     </div>
   );

package/src/index.html

@@ -4,6 +4,18 @@
     <title>Allure Dashboard</title>
     <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" />
     <base href="http://localhost:8080" />
+    <script>
+      window.allureReportOptions = {
+        "reportName": "Allure Report",
+        "logo": "",
+        "theme": "light",
+        "reportLanguage": "en",
+        "createdAt": 1739819870336,
+        "reportUuid": "51b36daf-614b-409c-b6a2-e8e401b2c145",
+        "layout": [],
+        "allureVersion": "3.0.0-beta.8"
+      };
+    </script>
   </head>
   <body>
     <div id="app"></div>
@@ -20,18 +32,6 @@
 
       window.document.head.appendChild(baseEl);
     </script>
-    <script>
-      window.allureReportOptions = {
-        "reportName": "Allure Report",
-        "logo": "",
-        "theme": "light",
-        "reportLanguage": "en",
-        "createdAt": 1739819870336,
-        "reportUuid": "51b36daf-614b-409c-b6a2-e8e401b2c145",
-        "layout": [],
-        "allureVersion": "3.0.0-beta.8"
-      };
-    </script>
     <script async>
       window.allureReportDataReady = true;
     </script>

package/src/index.tsx

@@ -4,7 +4,6 @@ import { render } from "preact";
 import "@/assets/scss/index.scss";
 import { BaseLayout } from "@/components/BaseLayout";
 import { getLocale, waitForI18next } from "@/stores/locale";
-import { getTheme } from "@/stores/theme";
 import { isMac } from "@/utils/isMac";
 import * as styles from "./styles.scss";
 
@@ -26,7 +25,6 @@ document.addEventListener("DOMContentLoaded", () => {
   await waitForI18next;
   if (globalThis) {
     await getLocale();
-    getTheme();
   }
   await ensureReportDataReady();
 

package/src/locales/ua.json

@@ -231,4 +231,3 @@
     "malfunctioned": "Зламані"
   }
 }
-