feat: design system implementation

packages/web-awesome/.eslintrc.cjs

@@ -1,6 +1,9 @@
 module.exports = {
   env: { browser: true, es2020: true },
-  extends: ["eslint-config-preact", "../../.eslintrc.cjs"],
+  extends: [
+    "eslint-config-preact",
+    "../../.eslintrc.cjs",
+  ],
   ignorePatterns: ["dist/", ".eslintrc.cjs", "postcss.config.js", "webpack.config.js", "types.d.ts"],
   parser: "@typescript-eslint/parser",
   overrides: [

packages/web-awesome/.gitignore

@@ -1 +1,2 @@
-test-results/
+test-results/
+*storybook.log

packages/web-awesome/package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "@allurereport/core-api": "workspace:*",
     "@allurereport/web-commons": "workspace:*",
+    "@allurereport/web-components": "workspace:*",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -47,6 +48,7 @@
     "@babel/plugin-transform-react-jsx": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-typescript": "^7.24.7",
+    "@chromatic-com/storybook": "^3.2.3",
     "@eslint/js": "^9.10.0",
     "@floating-ui/dom": "^1.6.12",
     "@stylistic/eslint-plugin": "^2.6.1",
@@ -78,6 +80,7 @@
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.11.1",
     "filesize": "^10.1.6",
     "globals": "^15.9.0",
     "html-webpack-plugin": "^5.6.3",

packages/web-awesome/src/components/app/ArrowButton/index.tsx → packages/web-awesome/src/components/ArrowButton/index.tsx

@@ -1,7 +1,7 @@
+import { SvgIcon } from "@allurereport/web-components";
 import { clsx } from "clsx";
 import type { FunctionalComponent } from "preact";
 import lineChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
-import { SvgIcon } from "@/components/commons/SvgIcon";
 import * as styles from "./styles.scss";
 
 export interface ArrowButtonProps {

packages/web-awesome/src/components/app/BaseLayout/index.tsx → packages/web-awesome/src/components/BaseLayout/index.tsx

@@ -1,11 +1,10 @@
-import { ensureReportDataReady, getReportOptions } from "@allurereport/web-commons";
+import { ensureReportDataReady } from "@allurereport/web-commons";
+import { Loadable, PageLoader } from "@allurereport/web-components";
 import { useEffect } from "preact/compat";
-import { Footer } from "@/components/app/Footer";
-import MainReport from "@/components/app/MainReport";
-import Modal from "@/components/app/Modal";
-import TestResult from "@/components/app/TestResult";
-import { Loadable } from "@/components/commons/Loadable";
-import { PageLoader } from "@/components/commons/PageLoader";
+import { Footer } from "@/components/Footer";
+import MainReport from "@/components/MainReport";
+import Modal from "@/components/Modal";
+import TestResult from "@/components/TestResult";
 import { fetchStats, getLocale, getTheme } from "@/stores";
 import { fetchPieChartData } from "@/stores/chart";
 import { fetchEnvInfo } from "@/stores/envInfo";
@@ -24,13 +23,7 @@ export const BaseLayout = ({ testResultId }) => {
       fetchTestResult(testResultId);
       fetchTestResultNav();
     } else {
-      Promise.all([
-        ensureReportDataReady(),
-        fetchStats(),
-        fetchPieChartData(),
-        fetchTreeData(),
-        fetchEnvInfo(),
-      ]);
+      Promise.all([ensureReportDataReady(), fetchStats(), fetchPieChartData(), fetchTreeData(), fetchEnvInfo()]);
     }
   }, [testResultId]);
 

packages/web-awesome/src/components/app/Footer/FooterLogo.tsx → packages/web-awesome/src/components/Footer/FooterLogo.tsx

@@ -1,11 +1,11 @@
-import { Text } from "@/components/commons/Typography";
+import { Text } from "@allurereport/web-components";
 import { ReportLogoFull } from "../ReportLogoFull";
 import * as styles from "./styles.scss";
 
 export const FooterLogo = () => {
   return (
     <div className={styles["footer-logo"]}>
-      <a href="https://allurereport.org" target={"_blank"}>
+      <a href="https://allurereport.org" target={"_blank"} rel="noreferrer">
         <Text type="paragraph" size="m" className={styles["footer-logo"]}>
           Powered by
         </Text>

packages/web-awesome/src/components/app/Footer/FooterVersion.tsx → packages/web-awesome/src/components/Footer/FooterVersion.tsx

@@ -1,15 +1,15 @@
 import { getReportOptions } from "@allurereport/web-commons";
-import { Text } from "@/components/commons/Typography";
+import { Text } from "@allurereport/web-components";
+import type { AllureAwesomeReportOptions } from "types";
 import { currentLocale } from "@/stores";
-import { AllureAwesomeReportOptions } from "../../../../types";
 import * as styles from "./styles.scss";
 
-export function FooterVersion() {
+export const FooterVersion = () => {
   const currentLang = currentLocale.value;
   const { createdAt } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
   const locale = currentLang === "en" ? "en-US" : "ru-RU";
 
-  const formattedCreatedAt = new Date(createdAt).toLocaleDateString(locale, {
+  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(locale, {
     month: "numeric",
     day: "numeric",
     year: "numeric",
@@ -24,4 +24,4 @@ export function FooterVersion() {
       <span> Ver: 3.0.0</span>
     </Text>
   );
-}
+};

packages/web-awesome/src/components/Footer/index.tsx

@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { FooterLogo } from "@/components/Footer/FooterLogo";
+import { FooterVersion } from "@/components/Footer/FooterVersion";
+
+export const Footer = () => {
+  return (
+    <div className={clsx(styles.below)}>
+      <FooterLogo />
+      <FooterVersion />
+    </div>
+  );
+};

packages/web-awesome/src/components/Header/index.tsx

@@ -0,0 +1,14 @@
+import { LanguagePicker } from "@/components/LanguagePicker";
+import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
+import * as styles from "./styles.scss";
+
+export const Header = () => {
+  return (
+    <div className={styles.above}>
+      <div className={styles.right}>
+        <LanguagePicker />
+        <ThemeButton />
+      </div>
+    </div>
+  );
+};

packages/web-awesome/src/components/app/LanguagePicker/index.tsx → packages/web-awesome/src/components/LanguagePicker/index.tsx

@@ -1,4 +1,4 @@
-import { DropdownButton } from "@/components/commons/Button";
+import { DropdownButton } from "@allurereport/web-components";
 import { LANG_LOCALE, type LangLocale } from "@/i18n/constants";
 import { currentLocale } from "@/stores";
 import { setLocale } from "@/stores/locale";

packages/web-awesome/src/components/MainReport/index.tsx

@@ -0,0 +1,19 @@
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { Header } from "@/components/Header";
+import { ReportBody } from "@/components/ReportBody";
+import { ReportHeader } from "@/components/ReportHeader";
+import { ReportMetadata } from "@/components/ReportMetadata";
+
+const MainReport = () => {
+  return (
+    <>
+      <Header />
+      <div className={styles.content}>
+        <ReportHeader />
+        <ReportMetadata />
+        <ReportBody />
+      </div>
+    </>
+  );
+};
+export default MainReport;

packages/web-awesome/src/components/app/Metadata/index.tsx → packages/web-awesome/src/components/Metadata/index.tsx

@@ -1,13 +1,10 @@
+import { Button, Menu, Text } from "@allurereport/web-components";
 import clsx from "clsx";
-import i18n from "i18next";
-import { FunctionalComponent } from "preact";
+import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import LineGeneralCopy3 from "@/assets/svg/line-general-copy-3.svg";
-import { MetadataButton } from "@/components/app/MetadataButton";
-import { MetadataProps } from "@/components/app/ReportMetadata";
-import { Button } from "@/components/commons/Button";
-import { Menu } from "@/components/commons/Menu";
-import { Text } from "@/components/commons/Typography";
+import { MetadataButton } from "@/components/MetadataButton";
+import type { MetadataProps } from "@/components/ReportMetadata";
 import { useI18n } from "@/stores/locale";
 import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";

packages/web-awesome/src/components/app/Metadata/styles.scss → packages/web-awesome/src/components/Metadata/styles.scss

@@ -1,4 +1,4 @@
-@import "../../../assets/scss/mixins.scss";
+//@import "../../../assets/scss/mixins.scss";
 
 .report-metadata-wrapper {
   padding: 0 24px;

packages/web-awesome/src/components/app/MetadataButton/index.tsx → packages/web-awesome/src/components/MetadataButton/index.tsx

@@ -1,8 +1,7 @@
+import { Counter, Text } from "@allurereport/web-components";
 import clsx from "clsx";
-import { FunctionalComponent } from "preact";
-import { ArrowButton } from "@/components/app/ArrowButton";
-import { Counter } from "@/components/commons/Counter";
-import { Text } from "@/components/commons/Typography";
+import type { FunctionalComponent } from "preact";
+import { ArrowButton } from "@/components/ArrowButton";
 import * as styles from "./styles.scss";
 
 interface MetadataButtonProps {

packages/web-awesome/src/components/app/Modal/index.tsx → packages/web-awesome/src/components/Modal/index.tsx

@@ -1,19 +1,17 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { Button, Heading, IconButton, TooltipWrapper } from "@allurereport/web-components";
 import { signal } from "@preact/signals";
 import type { FunctionalComponent, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import Prism from "prismjs";
+import type { AllureAwesomeTestResult } from "types";
 import LineGeneralDownloadCloud from "@/assets/svg/line-general-download-cloud.svg";
 import LineGeneralCopy from "@/assets/svg/line-general-link-external.svg";
 import LineGeneralXClose from "@/assets/svg/line-general-x-close.svg";
 import ViewOffIcon from "@/assets/svg/view-off.svg";
 import ViewIcon from "@/assets/svg/view.svg";
-import { Attachment } from "@/components/app/TestResult/TestResultSteps/attachment";
-import { Button, IconButton } from "@/components/commons/Button";
-import { TooltipWrapper } from "@/components/commons/Tooltip";
-import { Heading } from "@/components/commons/Typography";
+import { Attachment } from "@/components/TestResult/TestResultSteps/attachment";
 import { attachmentType, downloadAttachment, openAttachmentInNewTab } from "@/utils/attachments";
-import type { AllureAwesomeTestResult } from "../../../../types.js";
 import * as styles from "./styles.scss";
 
 export const isModalOpen = signal(false);

packages/web-awesome/src/components/app/ReportBody/Filters.tsx → packages/web-awesome/src/components/ReportBody/Filters.tsx

@@ -1,10 +1,10 @@
+import { Button } from "@allurereport/web-components";
+import { Menu } from "@allurereport/web-components";
+import { Toggle } from "@allurereport/web-components";
 import notificationBoxIcon from "@/assets/svg/line-alerts-notification-box.svg";
 import refreshIcon from "@/assets/svg/line-arrows-refresh-ccw-1.svg";
 import settingsIcon from "@/assets/svg/line-general-settings-1.svg";
 import zapIcon from "@/assets/svg/line-general-zap.svg";
-import { Button } from "@/components/commons/Button";
-import { Menu } from "@/components/commons/Menu";
-import { Toggle } from "@/components/commons/Toggle";
 import { useI18n } from "@/stores/locale";
 import { setTreeFilter, treeFiltersStore } from "@/stores/tree";
 import * as styles from "./styles.scss";

packages/web-awesome/src/components/app/ReportBody/index.tsx → packages/web-awesome/src/components/ReportBody/index.tsx

@@ -1,5 +1,5 @@
 import { statusesList } from "@allurereport/core-api";
-import { Loadable } from "@/components/commons/Loadable";
+import { Loadable } from "@allurereport/web-components";
 import { statsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
 import { capitalize } from "@/utils/capitalize";

packages/web-awesome/src/components/app/ReportHeader/ReportHeaderLabelList.tsx → packages/web-awesome/src/components/ReportHeader/ReportHeaderLabelList.tsx

@@ -1,5 +1,5 @@
-import * as styles from "@/components/app/ReportHeader/styles.scss";
-import { Label } from "@/components/commons/Label";
+import { Label } from "@allurereport/web-components";
+import * as styles from "@/components/ReportHeader/styles.scss";
 
 export const ReportHeaderLabelList = () => {
   return (

packages/web-awesome/src/components/app/ReportHeader/ReportHeaderLogo.tsx → packages/web-awesome/src/components/ReportHeader/ReportHeaderLogo.tsx

@@ -1,5 +1,5 @@
-import * as styles from "@/components/app/ReportHeader/styles.scss";
-import { ReportLogo } from "@/components/app/ReportLogo";
+import * as styles from "@/components/ReportHeader/styles.scss";
+import { ReportLogo } from "@/components/ReportLogo";
 
 export const ReportHeaderLogo = () => {
   return (

packages/web-awesome/src/components/app/ReportHeader/ReportHeaderPie.tsx → packages/web-awesome/src/components/ReportHeader/ReportHeaderPie.tsx

@@ -1,5 +1,5 @@
-import { Loadable } from "@/components/commons/Loadable";
-import { SuccessRatePieChart } from "@/components/commons/SuccessRatePieChart";
+import { Loadable } from "@allurereport/web-components";
+import { SuccessRatePieChart } from "@allurereport/web-components";
 import { pieChartStore } from "@/stores/chart";
 import * as styles from "./styles.scss";
 

packages/web-awesome/src/components/app/ReportHeader/index.tsx → packages/web-awesome/src/components/ReportHeader/index.tsx

@@ -1,9 +1,9 @@
 import { getReportOptions } from "@allurereport/web-commons";
-import { ReportHeaderLogo } from "@/components/app/ReportHeader/ReportHeaderLogo";
-import { ReportHeaderPie } from "@/components/app/ReportHeader/ReportHeaderPie";
-import { Heading, Text } from "@/components/commons/Typography";
+import { Heading, Text } from "@allurereport/web-components";
+import type { AllureAwesomeReportOptions } from "types";
+import { ReportHeaderLogo } from "@/components/ReportHeader/ReportHeaderLogo";
+import { ReportHeaderPie } from "@/components/ReportHeader/ReportHeaderPie";
 import { currentLocaleIso } from "@/stores";
-import type { AllureAwesomeReportOptions } from "../../../../types.js";
 import * as styles from "./styles.scss";
 
 export const ReportHeader = () => {

packages/web-awesome/src/components/app/ReportLogo/index.tsx → packages/web-awesome/src/components/ReportLogo/index.tsx

@@ -1,8 +1,8 @@
 import { getReportOptions } from "@allurereport/web-commons";
+import { SvgIcon } from "@allurereport/web-components";
 import { clsx } from "clsx";
+import type { AllureAwesomeReportOptions } from "types";
 import reportLogoDefault from "@/assets/svg/report-logo.svg";
-import { AllureAwesomeReportOptions } from "../../../../types";
-import { SvgIcon } from "../../commons/SvgIcon";
 import * as styles from "./styles.scss";
 
 export const ReportLogo = (props: { className?: string; logo?: never }) => {

packages/web-awesome/src/components/app/ReportMetadata/MetadataItem.tsx → packages/web-awesome/src/components/ReportMetadata/MetadataItem.tsx

@@ -1,6 +1,6 @@
+import { Text } from "@allurereport/web-components";
 import { clsx } from "clsx";
-import { FunctionalComponent } from "preact";
-import { Text } from "@/components/commons/Typography";
+import type { FunctionalComponent } from "preact";
 import * as styles from "./styles.scss";
 
 export type MetadataProps = {

packages/web-awesome/src/components/app/ReportMetadata/MetadataSummary.tsx → packages/web-awesome/src/components/ReportMetadata/MetadataSummary.tsx

@@ -1,11 +1,12 @@
 import { statusesList } from "@allurereport/core-api";
+import { Loadable } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
-import { FunctionComponent } from "preact";
-import MetadataItem, { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
-import { MetadataTestType } from "@/components/app/ReportMetadata/MetadataTestType";
-import { MetadataWithIcon } from "@/components/app/ReportMetadata/MetadataWithIcon";
-import * as styles from "@/components/app/ReportMetadata/styles.scss";
-import { Loadable } from "@/components/commons/Loadable";
+import type { FunctionComponent } from "preact";
+import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+import MetadataItem from "@/components/ReportMetadata/MetadataItem";
+import { MetadataTestType } from "@/components/ReportMetadata/MetadataTestType";
+import { MetadataWithIcon } from "@/components/ReportMetadata/MetadataWithIcon";
+import * as styles from "@/components/ReportMetadata/styles.scss";
 import { statsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
 import { capitalize } from "@/utils/capitalize";
@@ -67,8 +68,8 @@ export const MetadataSummary: FunctionComponent = () => {
                 props={allTest.value}
                 renderComponent={MetadataWithIcon}
               />
-              {/*<div className={styles["report-metadata-separator"]}></div>*/}
-              {/*{metaDataTests}*/}
+              {/* <div className={styles["report-metadata-separator"]}></div>*/}
+              {/* {metaDataTests}*/}
             </div>
             <div className={styles["report-metadata-status"]}>{metadataStatuses}</div>
           </div>

packages/web-awesome/src/components/app/ReportMetadata/MetadataTestType.tsx → packages/web-awesome/src/components/ReportMetadata/MetadataTestType.tsx

@@ -1,13 +1,13 @@
+import { Text } from "@allurereport/web-components";
 import { clsx } from "clsx";
-import { FunctionComponent } from "preact";
-import { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
-import * as styles from "@/components/app/ReportMetadata/styles.scss";
-import { Text } from "@/components/commons/Typography";
+import type { FunctionComponent } from "preact";
+import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+import * as styles from "@/components/ReportMetadata/styles.scss";
 
 export const MetadataTestType: FunctionComponent<MetadataProps> = ({ status, count }) => {
   return (
     <div data-testid="metadata-value" className={styles["metadata-test-type"]}>
-      <div className={clsx(styles["metadata-color-badge"], styles?.[`status-${status}`])}></div>
+      <div className={clsx(styles["metadata-color-badge"], styles?.[`status-${status}`])} />
       <Text type={"ui"} size={"m"} bold>
         {count}
       </Text>

packages/web-awesome/src/components/app/ReportMetadata/MetadataWithIcon.tsx → packages/web-awesome/src/components/ReportMetadata/MetadataWithIcon.tsx

@@ -1,10 +1,11 @@
-import { FunctionComponent, h } from "preact";
+import { SvgIcon } from "@allurereport/web-components";
+import { Text } from "@allurereport/web-components";
+import type { FunctionComponent } from "preact";
+import { h } from "preact";
 import notifications from "@/assets/svg/line-alerts-notification-box.svg";
 import refresh from "@/assets/svg/line-arrows-refresh-ccw-1.svg";
 import lineGeneralZap from "@/assets/svg/line-general-zap.svg";
-import { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
-import { SvgIcon } from "@/components/commons/SvgIcon";
-import { Text } from "@/components/commons/Typography";
+import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
 import * as styles from "./styles.scss";
 
 const icons = {

packages/web-awesome/src/components/app/ReportMetadata/index.tsx → packages/web-awesome/src/components/ReportMetadata/index.tsx

@@ -1,10 +1,10 @@
 import type { EnvironmentItem } from "@allurereport/core-api";
-import { FunctionalComponent } from "preact";
+import { Loadable } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { MetadataList } from "@/components/app/Metadata";
-import { MetadataButton } from "@/components/app/MetadataButton";
-import { MetadataSummary } from "@/components/app/ReportMetadata/MetadataSummary";
-import { Loadable } from "@/components/commons/Loadable";
+import { MetadataList } from "@/components/Metadata";
+import { MetadataButton } from "@/components/MetadataButton";
+import { MetadataSummary } from "@/components/ReportMetadata/MetadataSummary";
 import { envInfoStore } from "@/stores/envInfo";
 import * as styles from "./styles.scss";