@allurereport/web-summary 3.0.0-beta.11

package/src/index.tsx

@@ -0,0 +1,59 @@
+import "@allurereport/web-components/index.css";
+import { render } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import "@/assets/scss/index.scss";
+import { EmptyPlaceholder } from "@/components/EmptyPlaceholder";
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import { ReportCard } from "@/components/ReportCard";
+import { getLocale, getTheme, useI18n, waitForI18next } from "@/stores";
+import * as styles from "./styles.scss";
+
+const App = () => {
+  const [loaded, setLoaded] = useState(false);
+  const summaries = window.reportSummaries;
+  const { t } = useI18n("empty");
+
+  useEffect(() => {
+    getLocale();
+    getTheme();
+    waitForI18next.then(() => {
+      setLoaded(true);
+    });
+  }, []);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <Header />
+      <main>
+        {!summaries.length && <EmptyPlaceholder label={t("no-reports")} />}
+        {!!summaries.length && (
+          <ul className={styles["summary-showcase"]}>
+            {summaries.map((summary: any) => {
+              return (
+                <li key={summary.output}>
+                  <ReportCard
+                    href={summary.href}
+                    name={summary.name}
+                    status={summary.status}
+                    stats={summary.stats}
+                    duration={summary.duration}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </main>
+      <Footer className={styles.footer} />
+    </div>
+  );
+};
+
+const rootElement = document.getElementById("app");
+
+render(<App />, rootElement);

package/src/stores/index.ts

@@ -0,0 +1,2 @@
+export * from "./theme";
+export * from "./locale";

package/src/stores/locale.ts

@@ -0,0 +1,54 @@
+import { computed, signal } from "@preact/signals";
+import i18next, { type TOptions } from "i18next";
+import { DEFAULT_LOCALE, LANG_LOCALE, type LangLocale } from "@/i18n/constants";
+
+const namespaces = ["empty", "summary"];
+
+export const currentLocale = signal<LangLocale>("en" as LangLocale);
+export const currentLocaleIso = computed(() => LANG_LOCALE[currentLocale.value]?.iso ?? LANG_LOCALE.en.iso);
+export const currentLocaleIsRTL = computed(() => ["ar", "he", "fa"].includes(currentLocale.value));
+
+export const getLocale = async () => {
+  const locale = localStorage.getItem("currentLocale") || DEFAULT_LOCALE;
+
+  await setLocale(locale as LangLocale);
+};
+
+export const waitForI18next = i18next
+  .use({
+    type: "backend",
+    read: async (
+      language: LangLocale,
+      namespace: string,
+      callback: (errorValue: unknown, translations: null) => void,
+    ) => {
+      await import(`@/i18n/locales/${language}.json`)
+        .then((resources: Record<string, null>) => {
+          callback(null, resources[namespace]);
+        })
+        .catch((error) => {
+          callback(error, null);
+        });
+    },
+  })
+  .init({
+    lng: currentLocale.value,
+    fallbackLng: "en",
+    ns: namespaces,
+    interpolation: { escapeValue: false },
+  });
+
+export const useI18n = (namespace?: string) => {
+  const t = computed(() => (key: string, options?: TOptions) => i18next.t(key, { ns: namespace, ...options }));
+
+  return {
+    t: t.value,
+    currentLocale: currentLocale.value,
+  };
+};
+
+export const setLocale = async (locale: LangLocale) => {
+  await i18next.changeLanguage(locale as string);
+  localStorage.setItem("currentLocale", locale as string);
+  currentLocale.value = locale;
+};

package/src/stores/theme.ts

@@ -0,0 +1,29 @@
+import { signal } from "@preact/signals";
+
+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 themeFromLS = window.localStorage.getItem("theme") as Theme | null;
+
+  if (themeFromLS) {
+    setTheme(themeFromLS);
+    return;
+  }
+
+  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const initialTheme = prefersDarkScheme ? "dark" : "light";
+
+  setTheme(initialTheme);
+};

package/src/styles.scss

@@ -0,0 +1,50 @@
+:root {
+  --showcase-width: 940px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 0 24px 0;
+  max-width: var(--showcase-width);
+  margin: 0 auto;
+  min-height: 100vh;
+}
+
+.summary-showcase {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin-bottom: 40px;
+  //max-width: var(--showcase-width);
+  //margin: 0 auto;
+  //padding: 40px;
+}
+
+.summary-card {
+  display: block;
+  padding: 16px;
+  height: 100%;
+  text-decoration: none;
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+
+  &:hover {
+    box-shadow: none;
+    transition: box-shadow 0.2s;
+  }
+}
+
+.summary-card-title {
+  display: flex;
+  align-items: flex-start;
+  gap: 0 4px;
+  color: var(--on-text-secondary);
+  margin-top: 12px;
+}
+
+.footer {
+  margin-top: auto;
+}

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,10 @@
+declare global {
+  interface Window {
+    reportDataReady: boolean;
+    reportData: Record<string, any>;
+    // TODO: add the summary type here
+    reportSummaries: any;
+  }
+}
+
+export {};

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,99 @@
+import type {
+  AttachmentTestStepResult,
+  DefaultTreeGroup,
+  HistoryTestResult,
+  TestFixtureResult,
+  TestResult,
+  TestStatus,
+  TestStepResult,
+  TreeData,
+  WithChildren,
+} from "@allurereport/core-api";
+
+export type Layout = "base" | "split";
+
+export type AwesomeReportOptions = {
+  allureVersion: string;
+  reportName?: string;
+  logo?: string;
+  theme?: "light" | "dark";
+  groupBy?: string[];
+  reportLanguage?: "en" | "ru";
+  createdAt: number;
+  reportUuid: string;
+  layout?: Layout;
+};
+
+export type AwesomeFixtureResult = Omit<
+  TestFixtureResult,
+  "testResultIds" | "start" | "stop" | "sourceMetadata" | "steps"
+> & {
+  steps: AwesomeTestStepResult[];
+};
+
+export type AwesomeStatus = TestStatus | "total";
+
+export type AwesomeTestStepResult = TestStepResult;
+
+type AwesomeBreadcrumbItem = string[] | string[][];
+
+export interface AwesomeCategory {
+  name: string;
+  description?: string;
+  descriptionHtml?: string;
+  messageRegex?: string;
+  traceRegex?: string;
+  matchedStatuses?: TestStatus[];
+  flaky?: boolean;
+}
+
+export type AwesomeTestResult = Omit<
+  TestResult,
+  | "runSelector"
+  | "sourceMetadata"
+  | "expectedResult"
+  | "expectedResultHtml"
+  | "precondition"
+  | "preconditionHtml"
+  | "steps"
+  | "environment"
+> & {
+  setup: AwesomeFixtureResult[];
+  teardown: AwesomeFixtureResult[];
+  steps: AwesomeTestStepResult[];
+  history: HistoryTestResult[];
+  retries?: TestResult[];
+  groupedLabels: Record<string, string[]>;
+  attachments?: AttachmentTestStepResult[];
+  breadcrumbs: AwesomeBreadcrumbItem[];
+  order?: number;
+  groupOrder?: number;
+  retry: boolean;
+  categories?: AwesomeCategory[];
+  environment?: string | "default";
+};
+
+export type AwesomeTreeLeaf = Pick<
+  AwesomeTestResult,
+  "duration" | "name" | "start" | "status" | "groupOrder" | "flaky" | "retry"
+> & {
+  nodeId: string;
+};
+
+export type AwesomeTreeGroup = WithChildren & DefaultTreeGroup & { nodeId: string };
+
+export type AwesomeTree = TreeData<AwesomeTreeLeaf, AwesomeTreeGroup>;
+/**
+ * Tree which contains tree leaves instead of their IDs and recursive trees structure instead of groups
+ */
+export type AwesomeRecursiveTree = DefaultTreeGroup & {
+  nodeId: string;
+  leaves: AwesomeTreeLeaf[];
+  trees: AwesomeRecursiveTree[];
+};
+
+// TODO: maybe it should call `TestCase` instead of Group
+// TODO: add worst status
+export type AwesomeTestResultGroup = Pick<AwesomeTestResult, "name" | "fullName" | "groupOrder"> & {
+  testResults: AwesomeTestResult[];
+}

package/webpack.config.js

@@ -0,0 +1,109 @@
+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 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, "dist"),
+      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: ["style-loader", "css-loader"],
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            "style-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: "asset/inline",
+        },
+      ],
+    },
+    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",
+      },
+    },
+  };
+
+  config.plugins.push(
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  );
+
+  if (devMode) {
+    config.plugins.push(
+      new HtmlWebpackPlugin({
+        template: "src/index.html",
+      }),
+    );
+  }
+
+  return config;
+};