feat: design system implementation and storybook

packages/web-components/.storybook/main.ts

@@ -9,19 +9,20 @@ import { dirname, join, resolve } from "path";
 function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, "package.json")));
 }
-const baseDir = dirname(fileURLToPath(import.meta.url));
 
-// @ts-ignore
-const devMode = process?.mode === "development";
+const baseDir = dirname(fileURLToPath(import.meta.url));
 
 const config: StorybookConfig = {
-  // stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  staticDirs: ["../src/assets"],
   addons: [
     getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
     getAbsolutePath("@storybook/addon-interactions"),
+    // getAbsolutePath("@storybook/addon-links"),
+    // getAbsolutePath("@storybook/addon-essentials"),
+    // getAbsolutePath("@storybook/addon-interactions"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/preact-webpack5"),
@@ -34,24 +35,11 @@ const config: StorybookConfig = {
     );
     config!.resolve!.alias = {
       ...config.resolve!.alias,
-      "@": join(baseDir, "../src"),
+      "@": join(baseDir, "./src"),
     };
-    // Add SCSS support
     config.module!.rules.push({
       test: /\.scss$/,
-      use: [
-        "style-loader",
-        {
-          loader: "css-loader",
-          options: {
-            modules: {
-              localIdentName: devMode ? "[path][name]__[local]" : "[hash:base64:8]",
-            },
-          },
-        },
-        "sass-loader",
-      ],
-      include: resolve(__dirname, "../"),
+      use: ["style-loader", "css-loader", "sass-loader"],
     });
 
     return config;

packages/web-components/README.md

@@ -1,4 +1,4 @@
-# Allure Web Commons
+# Allure Web Components
 
 [<img src="https://allurereport.org/public/img/allure-report.svg" height="85px" alt="Allure Report logo" align="right" />](https://allurereport.org "Allure Report")
 
@@ -12,14 +12,19 @@
 
 ## Overview
 
-The package includes utilities which are used in web-implementations of Allure reports.
+The package includes Design System Components which are used in web-implementations of Allure reports and Storybook.
 
 ## Install
 
 Use your favorite package manager to install the package:
 
 ```shell
-npm add @allurereport/web-commons
-yarn add @allurereport/web-commons
-pnpm add @allurereport/web-commons
+npm add @allurereport/web-components
+yarn add @allurereport/web-components
+pnpm add @allurereport/web-components
+```
+
+Add styles to App.ts
+```shell
+import "@allurereport/web-components/index.css";
 ```

packages/web-components/package.json

@@ -36,7 +36,6 @@
     "@allurereport/core-api": "workspace:*",
     "@allurereport/web-commons": "workspace:*",
     "@preact/signals": "^1.3.0",
-    "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "i18next": "^24.0.2",
     "md5": "^2.3.0",
@@ -61,11 +60,14 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-styling-webpack": "^1.0.1",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
     "@storybook/blocks": "^8.4.7",
     "@storybook/manager-api": "^8.4.7",
     "@storybook/preact": "^8.4.7",
     "@storybook/preact-webpack5": "^8.4.7",
+    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@storybook/theming": "^8.4.7",
@@ -120,19 +122,15 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg-sprites": "^1.2.5",
-    "sass": "^1.79.1",
-    "sass-loader": "^16.0.1",
+    "sass": "^1.83.1",
+    "sass-loader": "^16.0.4",
     "storybook": "^8.4.7",
     "style-loader": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
     "ts-node": "^10.9.2",
     "tslib": "^2.7.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.6.0",
-    "vitest": "^2.1.8",
-    "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0",
-    "webpack-manifest-plugin": "^5.0.0"
+    "vitest": "^2.1.8"
   }
 }

packages/web-components/rollup.config.js

@@ -17,20 +17,20 @@ const BASE_PATH = path.dirname(fileURLToPath(import.meta.url));
 const SRC_PATH = path.resolve(BASE_PATH, "./src");
 
 export default defineConfig({
-  input: "src/index.ts", // Entry point of your design system
+  input: "src/index.ts",
   output: [
     {
       dir: "dist",
       format: "esm",
-      sourcemap: true, // Generate sourcemaps
+      sourcemap: true,
     },
     {
       dir: "dist",
       format: "cjs",
       sourcemap: true,
     },
   ],
-  external: ["preact", "preact/hooks"], // Mark Preact as external (users will provide it)
+  external: ["preact", "preact/hooks"],
   plugins: [
     alias({
       entries: [

packages/web-components/src/index.ts

@@ -1,3 +1,5 @@
+import "@/assets/scss/index.scss";
+
 export { icons } from "@/components/SvgIcon";
 
 export { DropdownButton, Button, IconButton } from "@/components/Button";

packages/web-components/stories/Button.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
 import { Button, DropdownButton, IconButton, icons } from "@allurereport/web-components";
+import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Button> = {
   title: "Commons/Button",

packages/web-components/stories/SuccessRatePieChart.stories.tsx

@@ -1,9 +1,17 @@
 import type { TestStatus } from "@allurereport/core-api";
-import type { Meta, StoryObj } from "@storybook/react";
 import { SuccessRatePieChart } from "@allurereport/web-components";
+import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof SuccessRatePieChart> = {
   title: "Commons/SuccessRatePieChart",
+
+  decorators: [
+    (Story) => (
+      <div style={{ width: "95px", height: "95px" }}>
+        <Story />
+      </div>
+    ),
+  ],
   component: SuccessRatePieChart,
   argTypes: {
     percentage: {
@@ -21,13 +29,27 @@ export default meta;
 type Story = StoryObj<typeof SuccessRatePieChart>;
 
 const mockSlices = [
-  { status: "passed" as TestStatus, count: 60, d: "M 50 0 A 50 50 0 0 1 87 50 L 50 50 Z" },
-  { status: "failed" as TestStatus, count: 30, d: "M 87 50 A 50 50 0 0 1 50 0 L 50 50 Z" },
-  { status: "skipped" as TestStatus, count: 10, d: "M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z" },
+  {
+    d: "M0.96,-47.909A2,2,0,0,1,3.084,-49.905A50,50,0,0,1,44.761,22.282A2,2,0,0,1,41.97,23.123L36.763,20.116A2,2,0,0,1,35.965,17.509A40,40,0,0,0,2.819,-39.901A2,2,0,0,1,0.96,-41.896Z",
+    status: "failed",
+    count: 2,
+  },
+  {
+    d: "M41.01,24.786A2,2,0,0,1,41.677,27.623A50,50,0,0,1,-41.677,27.623A2,2,0,0,1,-41.01,24.786L-35.802,21.78A2,2,0,0,1,-33.145,22.392A40,40,0,0,0,33.145,22.392A2,2,0,0,1,35.802,21.78Z",
+    status: "broken",
+    count: 2,
+  },
+  {
+    d: "M-41.97,23.123A2,2,0,0,1,-44.761,22.282A50,50,0,0,1,-3.084,-49.905A2,2,0,0,1,-0.96,-47.909L-0.96,-41.896A2,2,0,0,1,-2.819,-39.901A40,40,0,0,0,-35.965,17.509A2,2,0,0,1,-36.763,20.116Z",
+    status: "passed",
+    count: 2,
+  },
 ];
 
 export const Default: Story = {
   args: {
+    styles: { width: "75px" },
+
     slices: mockSlices,
     percentage: 75,
   },
@@ -42,11 +64,7 @@ export const WithoutPercentage: Story = {
 
 export const CustomSlices: Story = {
   args: {
-    slices: [
-      { status: "passed" as TestStatus, count: 50, d: "M 50 0 A 50 50 0 0 1 70 70 L 50 50 Z" },
-      { status: "broken" as TestStatus, count: 25, d: "M 70 70 A 50 50 0 0 1 50 0 L 50 50 Z" },
-      { status: "unknown" as TestStatus, count: 25, d: "M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z" },
-    ],
+    slices: mockSlices,
     percentage: 50,
   },
 };

packages/web-components/stories/SvgIcon.stories.tsx

@@ -1,8 +1,8 @@
+import { SvgIcon, icons } from "@allurereport/web-components";
 import type { Meta, StoryObj } from "@storybook/react";
-import { SvgIcon } from "@allurereport/web-components";
 
 // Mock icons
-const mockIconId = "mock-icon-id";
+const mockIconId = icons.lineAlertsNotificationBox;
 
 const meta: Meta<typeof SvgIcon> = {
   title: "Commons/SvgIcon",