@allurereport/web-dashboard 3.0.0-beta.12

package/src/stores/theme.ts

@@ -0,0 +1,32 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { DashboardReportOptions } from "../../types.js";
+
+type Theme = "light" | "dark";
+
+export const themeStore = signal<Theme>("light");
+
+export const setTheme = (newTheme: Theme): void => {
+  themeStore.value = newTheme;
+  document.documentElement.setAttribute("data-theme", newTheme);
+  window.localStorage.setItem("theme", newTheme);
+};
+
+export const toggleTheme = () => {
+  setTheme(themeStore.value === "light" ? "dark" : "light");
+};
+
+export const getTheme = () => {
+  const { theme } = getReportOptions<DashboardReportOptions>() ?? {};
+  const themeFromLS = (window.localStorage.getItem("theme") as Theme | null) || (theme as Theme);
+
+  if (themeFromLS) {
+    setTheme(themeFromLS);
+    return;
+  }
+
+  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const initialTheme = prefersDarkScheme ? "dark" : "light";
+
+  setTheme(initialTheme);
+};

package/src/stores/types.ts

@@ -0,0 +1,5 @@
+export interface StoreSignalState<T> {
+  error?: string;
+  loading: boolean;
+  data?: T;
+}

package/src/styles.scss

@@ -0,0 +1,45 @@
+.main {
+  position: relative;
+  max-width: 1920px;
+  margin: 0 auto;
+
+  &:hover {
+    .split {
+      opacity: 1;
+    }
+  }
+}
+
+.split {
+  opacity: 0;
+  position: absolute;
+  left: 128px;
+  top: 8px;
+}
+
+.loader {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-base-secondary);
+  background-blend-mode: saturation;
+  flex-direction: column;
+  gap: 16px;
+  transition:
+    opacity 100ms,
+    background-color 200ms;
+
+  visibility: hidden;
+  opacity: 0;
+
+  &.loading {
+    z-index: 10;
+    visibility: visible;
+    opacity: 1;
+  }
+}

package/src/types/globals.d.ts

@@ -0,0 +1,13 @@
+declare module "*.svg" {
+  const content: {
+    id: string;
+  };
+
+  export default content;
+}
+
+declare module "*.scss" {
+  const content: Record<string, string>;
+
+  export = content;
+}

package/src/types/window.d.ts

@@ -0,0 +1,8 @@
+declare global {
+  interface Window {
+    reportDataReady: boolean;
+    reportData: Record<string, any>;
+  }
+}
+
+export {};

package/src/utils/isMac.ts

@@ -0,0 +1,8 @@
+export const testPlatform = (re: RegExp) => {
+  // @ts-ignore
+  const platform: string = window?.navigator?.userAgentData?.platform ?? window?.navigator?.platform;
+
+  return platform ? re.test(platform) : false;
+};
+
+export const isMac = testPlatform(/^Mac/i);

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "jsxImportSource": "preact",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "useUnknownInCatchVariables": false,
+    "noEmit": true,
+    "noImplicitAny": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["ES2019", "dom"],
+    // node types should not be used in web-commons
+    "types": [],
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/types.d.ts

@@ -0,0 +1,21 @@
+import type {
+  AttachmentTestStepResult,
+  DefaultTreeGroup,
+  HistoryTestResult,
+  TestFixtureResult,
+  TestResult,
+  TestStatus,
+  TestStepResult,
+  TreeData,
+  WithChildren,
+} from "@allurereport/core-api";
+
+export type DashboardReportOptions = {
+  allureVersion: string;
+  reportName?: string;
+  logo?: string;
+  theme?: "light" | "dark";
+  reportLanguage?: "en" | "ru";
+  createdAt: number;
+  reportUuid: string;
+};

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { createRequire } from "node:module";
+import { defineConfig } from "vitest/config";
+
+const require = createRequire(import.meta.url);
+
+export default defineConfig({
+  test: {
+    passWithNoTests: true,
+    include: ["./test/**/*.test.ts"],
+    setupFiles: [require.resolve("allure-vitest/setup")],
+    reporters: [
+      "default",
+      [
+        "allure-vitest/reporter",
+        { resultsDir: "./out/allure-results", globalLabels: [{ name: "module", value: "web-dashboard" }] },
+      ],
+    ],
+  },
+});

package/webpack.config.js

@@ -0,0 +1,112 @@
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import { dirname, join } from "node:path";
+import { env } from "node:process";
+import { fileURLToPath } from "node:url";
+import SpriteLoaderPlugin from "svg-sprite-loader/plugin.js";
+import webpack from "webpack";
+import { WebpackManifestPlugin } from "webpack-manifest-plugin";
+import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
+
+const { SINGLE_FILE_MODE } = env;
+const baseDir = dirname(fileURLToPath(import.meta.url));
+
+export default (env, argv) => {
+  const devMode = argv?.mode === "development";
+  const config = {
+    entry: "./src/index.tsx",
+    output: {
+      path: join(baseDir, SINGLE_FILE_MODE ? "dist/single" : "dist/multi"),
+      filename: devMode ? "app.js" : "app-[hash:8].js",
+      assetModuleFilename: devMode ? `[name].[ext]` : `[name]-[hash:8].[ext]`,
+    },
+    devtool: devMode ? "inline-source-map" : false,
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: "babel-loader",
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.css$/,
+          use: [SINGLE_FILE_MODE ? "style-loader" : MiniCssExtractPlugin.loader, "css-loader"],
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            SINGLE_FILE_MODE ? "style-loader" : MiniCssExtractPlugin.loader,
+            {
+              loader: "css-loader",
+              options: {
+                modules: {
+                  localIdentName: devMode ? "[path][name]__[local]" : "[hash:base64:8]",
+                },
+              },
+            },
+            "sass-loader",
+          ],
+        },
+        {
+          test: /\.svg$/,
+          loader: "svg-sprite-loader",
+        },
+        {
+          test: /\.(png|jpe?g|gif|woff2?|otf|ttf)$/i,
+          type: SINGLE_FILE_MODE ? "asset/inline" : "asset/resource",
+        },
+      ],
+    },
+    devServer: {
+      hot: true,
+      static: "./out/dev",
+      historyApiFallback: true,
+      watchFiles: ["./src"],
+      devMiddleware: {
+        index: true,
+        mimeTypes: { phtml: "text/html" },
+        serverSideRender: false,
+      },
+    },
+    plugins: [
+      new ForkTsCheckerPlugin(),
+      new webpack.DefinePlugin({
+        DEVELOPMENT: devMode,
+      }),
+      new MiniCssExtractPlugin({
+        filename: devMode ? "styles.css" : "styles-[hash:8].css",
+      }),
+      new SpriteLoaderPlugin(),
+      new WebpackManifestPlugin({
+        publicPath: "",
+      }),
+    ],
+    resolve: {
+      modules: ["node_modules"],
+      extensions: [".js", ".ts", ".tsx"],
+      alias: {
+        "@": join(baseDir, "src"),
+        "react": "@preact/compat",
+        "react-dom": "@preact/compat",
+      },
+    },
+  };
+
+  if (SINGLE_FILE_MODE) {
+    config.plugins.push(
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    );
+  }
+
+  if (devMode) {
+    config.plugins.push(
+      new HtmlWebpackPlugin({
+        template: "src/index.html",
+      }),
+    );
+  }
+
+  return config;
+};