feat: design system implementation(works)

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

@@ -1,8 +1,8 @@
 import { DropdownButton } from "@allurereport/web-components";
+import { Menu } from "@allurereport/web-components";
 import { LANG_LOCALE, type LangLocale } from "@/i18n/constants";
 import { currentLocale } from "@/stores";
 import { setLocale } from "@/stores/locale";
-import { Menu } from "../../commons/Menu";
 
 const langPickerOptions = Object.entries(LANG_LOCALE).map(([key, { full }]) => ({
   key: key as LangLocale,

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

@@ -10,7 +10,6 @@ import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
 const { t } = useI18n("ui");
-
 export const MetadataList: FunctionalComponent<MetadataProps & { columns?: number }> = ({
   envInfo,
   size = "m",

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/ReportBody/HeaderActions.tsx

@@ -1,6 +1,6 @@
+import { SearchBox } from "@allurereport/web-components";
 import { useI18n } from "@/stores/locale";
 import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
-import { SearchBox } from "../../commons/SearchBox";
 import { Filters } from "./Filters";
 import * as styles from "./styles.scss";
 

packages/web-awesome/src/components/ReportBody/SortBy.tsx

@@ -1,3 +1,8 @@
+import { DropdownButton } from "@allurereport/web-components";
+import { Link } from "@allurereport/web-components";
+import { Menu } from "@allurereport/web-components";
+import { SvgIcon } from "@allurereport/web-components";
+import { Text } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { ComponentChildren } from "preact";
 import lineChevronDownIcon from "@/assets/svg/line-arrows-chevron-down.svg";
@@ -6,11 +11,6 @@ import sortDescIcon from "@/assets/svg/line-arrows-sort-line-desc.svg";
 import switchVerticalIcon from "@/assets/svg/line-arrows-switch-vertical-1.svg";
 import { useI18n } from "@/stores/locale";
 import { setTreeDirection, setTreeSortBy, treeFiltersStore } from "@/stores/tree";
-import { DropdownButton } from "../../commons/Button";
-import { Link } from "../../commons/Link";
-import { Menu } from "../../commons/Menu";
-import { SvgIcon } from "../../commons/SvgIcon";
-import { Text } from "../../commons/Typography";
 import * as styles from "./styles.scss";
 
 const BtnWrapper = ({ children }: { children: ComponentChildren }) => {

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

@@ -1,9 +1,9 @@
 import { statusesList } from "@allurereport/core-api";
 import { Loadable } from "@allurereport/web-components";
+import { Counter } from "@allurereport/web-components";
 import { statsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
 import { capitalize } from "@/utils/capitalize";
-import { Counter } from "../../commons/Counter";
 import { Tab, Tabs, TabsList } from "../Tabs";
 import { TreeList } from "../Tree";
 import { HeaderActions } from "./HeaderActions";

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

@@ -1,7 +1,7 @@
+import { SvgIcon } from "@allurereport/web-components";
+import { Text } from "@allurereport/web-components";
 import { clsx } from "clsx";
 import reportLogo from "@/assets/svg/report-logo.svg";
-import { SvgIcon } from "../../commons/SvgIcon";
-import { Text } from "../../commons/Typography";
 import * as styles from "./styles.scss";
 
 export const ReportLogoFull = (props: {

packages/web-awesome/src/components/ReportMetadata/styles.scss

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

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

@@ -1,6 +1,6 @@
+import { Text } from "@allurereport/web-components";
 import { type ComponentChildren, createContext } from "preact";
 import { useContext, useState } from "preact/hooks";
-import { Text } from "../../commons/Typography";
 import * as styles from "./styles.scss";
 
 type TabsContextT = {

packages/web-awesome/src/components/Tree/TreeItem.tsx

@@ -1,7 +1,7 @@
 import { type TestStatus, formatDuration } from "@allurereport/core-api";
 import { Text } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
-import TreeItemIcon from "@/Tree/TreeItemIcon";
+import TreeItemIcon from "@/components/Tree/TreeItemIcon";
 import { navigateTo } from "@/index";
 import * as styles from "./styles.scss";
 

packages/web-awesome/src/index.tsx

@@ -1,3 +1,4 @@
+import "@allurereport/web-components/index.css";
 import { render } from "preact";
 import "preact/debug";
 import { useEffect, useState } from "preact/hooks";

packages/web-components/package.json

@@ -15,7 +15,8 @@
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "style": "./dist/index.css"
     },
     "./index.css": "./dist/index.css"
   },

packages/web-components/rollup.config.js

@@ -1,17 +1,17 @@
+import alias from "@rollup/plugin-alias";
 import { babel } from "@rollup/plugin-babel";
 import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
 import typescript from "@rollup/plugin-typescript";
-import svg from "rollup-plugin-svg-sprites"
+import autoprefixer from "autoprefixer";
+import * as path from "node:path";
+import { fileURLToPath } from "node:url";
+import postcssImport from "postcss-import";
 import { defineConfig } from "rollup";
 import copy from "rollup-plugin-copy";
 import postcss from "rollup-plugin-postcss";
-import terser from "@rollup/plugin-terser";
-import alias from "@rollup/plugin-alias";
-import * as path from "node:path";
-import {fileURLToPath} from "node:url";
-import postcssImport from "postcss-import"
-import autoprefixer from "autoprefixer"
+import svg from "rollup-plugin-svg-sprites";
 
 const BASE_PATH = path.dirname(fileURLToPath(import.meta.url));
 const SRC_PATH = path.resolve(BASE_PATH, "./src");
@@ -37,8 +37,8 @@ export default defineConfig({
         {
           find: "@",
           replacement: SRC_PATH,
-        }
-      ]
+        },
+      ],
     }),
     resolve(),
     commonjs(),
@@ -57,16 +57,11 @@ export default defineConfig({
       extract: true,
       minimize: true,
       extensions: [".scss", ".css"],
-      plugins:[
-        postcssImport(),
-        autoprefixer()
-      ]
+      plugins: [postcssImport(), autoprefixer()],
     }),
     terser(),
     copy({
-      targets: [
-        { src: "src/assets/fonts/**/*", dest: "dist/fonts" },
-      ],
+      targets: [{ src: "src/assets/fonts/**/*", dest: "dist/fonts" }],
     }),
   ],
 });

packages/web-components/src/components/Spinner/index.tsx

@@ -1,5 +1,5 @@
 import spinnerIcon from "@/assets/svg/spinner.svg";
-import { SvgIcon } from "../SvgIcon";
+import { SvgIcon } from "@/components/SvgIcon";
 
 export const Spinner = (props: { size?: "s" | "m" }) => {
   const { size } = props;

packages/web-components/src/index.ts

@@ -1,16 +1,16 @@
-import "@/assets/scss/index.scss";
+export { icons } from "@/components/SvgIcon";
 
-export { Button, IconButton, DropdownButton } from "@/components/Button";
+export { DropdownButton, Button, IconButton } from "@/components/Button";
 export { Spinner } from "@/components/Spinner";
-export { SvgIcon, icons } from "@/components/SvgIcon";
-export * from "@/components/Typography";
-export * from "@/components/Tooltip";
-export * from "@/components/Loadable";
-export * from "@/components/PageLoader";
-export * from "@/components/SearchBox";
-export * from "@/components/Menu";
-export * from "@/components/Counter";
-export * from "@/components/Toggle";
-export * from "@/components/Link";
-export * from "@/components/SuccessRatePieChart";
-export * from "@/components/Label";
+export { SvgIcon } from "@/components/SvgIcon";
+export { Text, Code, Heading } from "@/components/Typography";
+export { TooltipWrapper } from "@/components/Tooltip";
+export { Loadable } from "@/components/Loadable";
+export { PageLoader } from "@/components/PageLoader";
+export { SearchBox } from "@/components/SearchBox";
+export { Menu } from "@/components/Menu";
+export { Counter } from "@/components/Counter";
+export { Toggle } from "@/components/Toggle";
+export { Link } from "@/components/Link";
+export { SuccessRatePieChart } from "@/components/SuccessRatePieChart";
+export { Label } from "@/components/Label";

packages/web-components/tsconfig.node.json

@@ -7,6 +7,5 @@
   ],
   "compilerOptions": {
     "composite": true,
-    "noEmit": true
   }
 }