From a0a22aca9bf5d3f138209c6a8399c6bfefbe2bb2 Mon Sep 17 00:00:00 2001 From: Todti Date: Wed, 8 Jan 2025 16:26:22 +0100 Subject: [PATCH] feat: design system implementation(works) --- .../src/components/LanguagePicker/index.tsx | 2 +- .../src/components/Metadata/index.tsx | 1 - .../src/components/Metadata/styles.scss | 2 +- .../components/ReportBody/HeaderActions.tsx | 2 +- .../src/components/ReportBody/SortBy.tsx | 10 +-- .../src/components/ReportBody/index.tsx | 2 +- .../src/components/ReportLogoFull/index.tsx | 4 +- .../src/components/ReportMetadata/styles.scss | 2 +- .../web-awesome/src/components/Tabs/index.tsx | 2 +- .../src/components/Tree/TreeItem.tsx | 2 +- packages/web-awesome/src/index.tsx | 1 + packages/web-components/package.json | 3 +- packages/web-components/rollup.config.js | 27 +++----- .../src/components/Spinner/index.tsx | 2 +- packages/web-components/src/index.ts | 28 ++++---- packages/web-components/tsconfig.node.json | 1 - packages/web-components/webpack.config.js | 67 ------------------- 17 files changed, 43 insertions(+), 115 deletions(-) delete mode 100644 packages/web-components/webpack.config.js diff --git a/packages/web-awesome/src/components/LanguagePicker/index.tsx b/packages/web-awesome/src/components/LanguagePicker/index.tsx index 5bbc1c59..998d39bb 100644 --- a/packages/web-awesome/src/components/LanguagePicker/index.tsx +++ b/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, diff --git a/packages/web-awesome/src/components/Metadata/index.tsx b/packages/web-awesome/src/components/Metadata/index.tsx index e7ebe5e5..b898891f 100644 --- a/packages/web-awesome/src/components/Metadata/index.tsx +++ b/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 = ({ envInfo, size = "m", diff --git a/packages/web-awesome/src/components/Metadata/styles.scss b/packages/web-awesome/src/components/Metadata/styles.scss index bfc2bccd..19f966fb 100644 --- a/packages/web-awesome/src/components/Metadata/styles.scss +++ b/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; diff --git a/packages/web-awesome/src/components/ReportBody/HeaderActions.tsx b/packages/web-awesome/src/components/ReportBody/HeaderActions.tsx index 3d56cc35..6186e675 100644 --- a/packages/web-awesome/src/components/ReportBody/HeaderActions.tsx +++ b/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"; diff --git a/packages/web-awesome/src/components/ReportBody/SortBy.tsx b/packages/web-awesome/src/components/ReportBody/SortBy.tsx index bb646032..aae3dc7f 100644 --- a/packages/web-awesome/src/components/ReportBody/SortBy.tsx +++ b/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 }) => { diff --git a/packages/web-awesome/src/components/ReportBody/index.tsx b/packages/web-awesome/src/components/ReportBody/index.tsx index 1d39ddb0..7890a0c5 100644 --- a/packages/web-awesome/src/components/ReportBody/index.tsx +++ b/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"; diff --git a/packages/web-awesome/src/components/ReportLogoFull/index.tsx b/packages/web-awesome/src/components/ReportLogoFull/index.tsx index 535c8cb0..ce13bb34 100644 --- a/packages/web-awesome/src/components/ReportLogoFull/index.tsx +++ b/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: { diff --git a/packages/web-awesome/src/components/ReportMetadata/styles.scss b/packages/web-awesome/src/components/ReportMetadata/styles.scss index 26e93f36..f3c7e91e 100644 --- a/packages/web-awesome/src/components/ReportMetadata/styles.scss +++ b/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; diff --git a/packages/web-awesome/src/components/Tabs/index.tsx b/packages/web-awesome/src/components/Tabs/index.tsx index 15ed22af..99862418 100644 --- a/packages/web-awesome/src/components/Tabs/index.tsx +++ b/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 = { diff --git a/packages/web-awesome/src/components/Tree/TreeItem.tsx b/packages/web-awesome/src/components/Tree/TreeItem.tsx index 2d0b6b70..93e41817 100644 --- a/packages/web-awesome/src/components/Tree/TreeItem.tsx +++ b/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"; diff --git a/packages/web-awesome/src/index.tsx b/packages/web-awesome/src/index.tsx index 42239fba..8697a307 100644 --- a/packages/web-awesome/src/index.tsx +++ b/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"; diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 9cc23e54..75a49db6 100644 --- a/packages/web-components/package.json +++ b/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" }, diff --git a/packages/web-components/rollup.config.js b/packages/web-components/rollup.config.js index d1b3eca8..d36faf1d 100644 --- a/packages/web-components/rollup.config.js +++ b/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" }], }), ], }); diff --git a/packages/web-components/src/components/Spinner/index.tsx b/packages/web-components/src/components/Spinner/index.tsx index 751c695f..ccdb2c9f 100644 --- a/packages/web-components/src/components/Spinner/index.tsx +++ b/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; diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index 15414153..1bbbc348 100644 --- a/packages/web-components/src/index.ts +++ b/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"; diff --git a/packages/web-components/tsconfig.node.json b/packages/web-components/tsconfig.node.json index af432822..2417b55b 100644 --- a/packages/web-components/tsconfig.node.json +++ b/packages/web-components/tsconfig.node.json @@ -7,6 +7,5 @@ ], "compilerOptions": { "composite": true, - "noEmit": true } } diff --git a/packages/web-components/webpack.config.js b/packages/web-components/webpack.config.js deleted file mode 100644 index b656987e..00000000 --- a/packages/web-components/webpack.config.js +++ /dev/null @@ -1,67 +0,0 @@ -import MiniCssExtractPlugin from "mini-css-extract-plugin"; -import { dirname, join } from "node:path"; -import { fileURLToPath } from "node:url"; - -const baseDir = dirname(fileURLToPath(import.meta.url)); -export default { - entry: "./src/index.ts", - output: { - path: join(baseDir, "dist"), - filename: "index.js", - library: { - name: "@allurereport/web-components", - type: "umd", - export: "default", - }, - - clean: true, - }, - plugins: [ - new MiniCssExtractPlugin({ - filename: "styles-[hash:8].css", - }), - ], - resolve: { - extensions: [".ts", ".tsx", ".js", ".scss"], - alias: { - "@": join(baseDir, "src"), - }, - }, - module: { - rules: [ - { - test: /\.tsx?$/, - use: "babel-loader", - exclude: /node_modules/, - }, - { - test: /\.css$/, - use: [MiniCssExtractPlugin.loader, "css-loader"], - }, - { - test: /\.scss$/, - use: [ - MiniCssExtractPlugin.loader, - { - loader: "css-loader", - options: { - modules: { - localIdentName: "[hash:base64:8]", - }, - }, - }, - "sass-loader", - ], - }, - { - test: /\.svg$/, - loader: "svg-sprite-loader", - }, - { - test: /\.(png|jpe?g|gif|woff2?|otf|ttf)$/i, - type: "asset/resource", - }, - ], - }, - mode: "development", -};