@reportportal/ui-kit 0.0.1-alpha.2 → 0.0.1-alpha.200

package/README.md

@@ -1,11 +1,263 @@
 # ReportPortal UI kit
 
-To be updated
+This library is designed to reflect [ReportPortal Design System](https://www.figma.com/file/gjYQPbeyf4YsH3wZiVKoaj/RP-DS-6) components as React components.
+
+**alpha versions available**
 
 ## Installation
 
-## Development
+Install the package into your project using your favourite package manager:
+
+Using `npm`
+```console
+npm install @reportportal/ui-kit
+```
 
-## Build process
+or using `yarn`
+```console
+yarn add @reportportal/ui-kit
+```
+
+or using `pnpm`
+```console
+pnpm add @reportportal/ui-kit
+```
 
 ## Usage
+
+1. Import the library styles at the top-level of your application:
+
+```jsx
+import '@reportportal/ui-kit/dist/style.css';
+```
+
+2. To use the components in your project, import them from the package:
+
+```jsx
+import { Button } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <Button>Button</Button>
+);
+```
+
+**Note:** In the future we plan to calibrate the build process to prebuild styles individually for each component and enable tree-shaking.
+
+### Theming
+
+All components are provided with the `light` theme by default.
+To use the `dark` theme, you need to wrap your application with the `ThemeProvider` component and pass the `dark` theme as a prop:
+
+```jsx
+import { ThemeProvider, Button } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <ThemeProvider theme="dark">
+        <Button>Dark theme button</Button>
+    </ThemeProvider>
+);
+```
+
+`ThemeProvider` can be nested to provide different themes for different parts of the application if needed.
+
+```jsx
+import { ThemeProvider, Button } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <ThemeProvider theme="light">
+        <Button>Light theme button</Button>
+        <ThemeProvider theme="dark">
+            <Button>Dark theme button override</Button>
+        </ThemeProvider>
+    </ThemeProvider>
+);
+```
+
+### Custom themes
+
+The `ThemeProvider` component provides the ability to pass custom themes to the application.
+
+To use a custom theme, you need to pass an object with the custom theme name as a key and the custom theme class name as a value to the `customThemes` prop of the `ThemeProvider` component:
+
+```jsx
+import { ThemeProvider, Button } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <ThemeProvider customThemes={{ 'my-theme': 'my-custom-theme' }} theme="my-theme">
+        <Button>Custom theme button</Button>
+        <ThemeProvider theme="dark">
+            <Button>Dark theme button override</Button>
+        </ThemeProvider>
+    </ThemeProvider>
+);
+```
+
+Then just override the ui-kit CSS custom properties in your custom theme class:
+
+```scss
+.my-custom-theme {
+  --rp-ui-base-font-family: OpenSans, Segoe UI, Tahoma, sans-serif;
+  --rp-ui-color-primary: green;
+  --rp-ui-color-primary-hover: #69e569;
+  --rp-ui-color-primary-focused: var(--rp-ui-color-primary-hover);
+  --rp-ui-color-primary-pressed: var(--rp-ui-color-primary-hover);
+}
+```
+
+CSS custom properties and their default values can be found in the [themes](./src/assets/styles/themes).
+
+The number of custom themes is not limited and actual theme can be easily switched by changing the `theme` prop.
+
+## Components
+
+To see a published showcase of the latest components released with its API and use cases, follow the [link](https://developers.reportportal.io/ui-kit/).
+
+### Icons
+
+The library provides a set of SVG icons and the `BaseIconButton` component to apply basic styles for hover, disabled and other states to them.
+
+The list of available icons can be found in the [icons](./src/components/icons/svg) folder.
+
+The icons exported as React components:
+
+```jsx
+import { PlusIcon } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <PlusIcon />
+);
+```
+
+To use the `BaseIconButton` component, you need to pass the icon component as a child:
+
+```jsx
+import { BaseIconButton, PlusIcon } from '@reportportal/ui-kit';
+
+const MyComponent = () => {
+    const handleIconClick = () => {
+        console.log('Icon clicked');
+    };
+    
+    return (
+        <BaseIconButton
+            className={cx('my-icon')}
+            disabled={false}
+            onClick={handleIconClick}
+        >
+            <PlusIcon />
+        </BaseIconButton>
+    );
+}
+```
+
+`BaseIconButton` supports all the props of the `button` HTML element.
+
+**Note:** To support styling via `BaseIconButton`, it is recommended to use *path-based*, *single-color* SVG icons.
+
+## Development
+
+The library is developed using [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/).
+
+The [Storybook](https://storybook.js.org/) used as a main development environment and a showcase for components.
+
+To run it locally use
+```console
+npm run start
+```
+
+To create a ready-to-deploy version of the Storybook, run
+```console
+npm run build:storybook
+```
+
+### Build process
+
+We use [vite](https://vitejs.dev/) as a build tool.
+
+To build the library run
+```console
+npm run build
+```
+
+### Storybook showcase deploy
+
+While the library is in alpha, the showcase hosted on [GitHub Pages](https://reportportal.io/ui-kit/) should be updated based on changes from the `develop` branch.
+
+#### Deployment steps
+
+1. Navigate to the "Actions" page within the [repository](https://github.com/reportportal/ui-kit/actions).
+2. Choose the "Deploy dev storybook showcase" action from list of available workflows.
+3. Click "Run workflow" button on the right and select the `develop` branch.
+4. Wait for the deployment process to complete. The progress can be tracked on the "Actions" page.
+5. Once the deployment is finished, verify that the changes have been deployed correctly, visiting [GitHub Pages](https://reportportal.io/ui-kit/).
+
+That's it! If you encounter any issues during the deployment process, please consult the documentation or reach out to the project maintainers for assistance.
+
+### Release
+
+While the library is in alpha, the [NPM package](https://www.npmjs.com/package/@reportportal/ui-kit) should be built and published from the `develop` branch with `alpha` tag.
+
+#### Release steps
+
+1. Navigate to the "Actions" page within the [repository](https://github.com/reportportal/ui-kit/actions).
+2. Choose the "Publish dev package version" action from list of available workflows.
+3. Click "Run workflow" button on the right and select the `develop` branch.
+4. Wait for the publishing process to complete. The progress can be tracked on the "Actions" page.
+5. Once the publishing is finished, verify that the changes have been published correctly, visiting [NPM registry](https://www.npmjs.com/package/@reportportal/ui-kit?activeTab=versions).
+
+That's it! If you encounter any issues during the release process, please consult the documentation or reach out to the project maintainers for assistance.
+
+### Code style
+
+We follow the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) and use [ESLint](https://eslint.org/) to enforce it.
+
+### CSS
+
+We use [SCSS](https://sass-lang.com/) as a CSS preprocessor.
+
+#### Theming
+
+The project uses [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to provide colors/fonts/etc. values for different themes via theme-specific CSS classes.
+All components get the appropriate theme values at runtime based on the cascading nature of CSS.
+
+This approach was chosen because it is easy to implement and maintain, and CSS Custom Properties are part of [WEB standards](https://www.w3.org/TR/css-variables-1/) and supported by [all major browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/--*#browser_compatibility).
+
+The CSS custom properties that come from DS are prefixed with `rp-ui-base` to avoid conflicts with other CSS properties and can be found in the [base.scss](./src/assets/styles/themes/base.scss).
+
+### External libs
+
+- [classnames](https://www.npmjs.com/package/classnames) - used for conditionally joining class names together.
+- [downshift](https://www.npmjs.com/package/downshift) - used to build simple, flexible, WAI-ARIA compliant React autocomplete/dropdown/select/combobox components.
+- [framer-motion](https://www.npmjs.com/package/framer-motion) - used for animations.
+- [rc-scrollbars](https://www.npmjs.com/package/rc-scrollbars) - used for custom scrollbars.
+- [@floating-ui/react-dom](https://www.npmjs.com/package/@floating-ui/react-dom) - used for positioning menus, dropdown elements, autocompletes, etc.
+
+### Testing
+
+Each new component/hook/utility **must be** covered by unit/component tests.
+All existing uncovered stuff will be tested gradually in the scope of tech-debt elimination activities.
+
+#### Testing Tools
+
+The project uses the following testing tools:
+- **Vitest**: Fast testing framework, compatible with Vite
+- **React Testing Library**: For testing React components with a focus on user interactions
+- **@testing-library/user-event**: For simulating user events in tests
+- **JSDOM**: For simulating a DOM environment in Node.js
+- **@vitest/coverage-v8**: For code coverage reporting
+
+#### Test Scripts
+
+Available npm scripts for testing:
+- `npm run test` - Run tests in watch mode
+- `npm run test:coverage` - Run tests with coverage report
+- `npm run test:ci` - Run tests once (for CI environments)
+- `npm run test:ui` - Run tests with UI interface
+
+#### Test Coverage
+
+The project maintains a minimum of 80% test coverage threshold for:
+- Statements
+- Branches
+- Functions
+- Lines

package/dist/actionMenu-e78f9615.js

@@ -0,0 +1,155 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useState as P, useRef as w, useCallback as V, useEffect as C, isValidElement as F, Fragment as K } from "react";
+import { S as R } from "./details-dbb1530b.js";
+import { B as U } from "./baseIconButton-251479f7.js";
+import { Popover as z } from "./popover.js";
+import { c as G } from "./bind-06a7ff84.js";
+const H = "_disabled_gfti4_69", J = "_divider_gfti4_76", m = {
+  "action-menu": "_action-menu_gfti4_16",
+  "actions-popover": "_actions-popover_gfti4_20",
+  "action-dropdown": "_action-dropdown_gfti4_24",
+  "action-menu-button": "_action-menu-button_gfti4_29",
+  "action-item": "_action-item_gfti4_42",
+  disabled: H,
+  divider: J
+}, l = G.bind(m), ee = ({
+  className: p,
+  children: b,
+  ...h
+}) => /* @__PURE__ */ i("div", { className: l("action-item", p), tabIndex: -1, ...h, children: b }), ne = ({
+  placement: p = "bottom-end",
+  items: b = [],
+  cleanupDividers: h = !0,
+  className: A,
+  contentClassName: N,
+  buttonClassName: g,
+  popoverClassName: E,
+  menuClassName: M,
+  ariaLabel: S,
+  trigger: v,
+  disabled: a = !1
+}) => {
+  const [u, f] = P(!1), c = w(null), _ = w(/* @__PURE__ */ new Map()), O = V(
+    (e) => {
+      a || f(e);
+    },
+    [a]
+  );
+  C(() => {
+    u && c.current && requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        var n;
+        const e = (n = c.current) == null ? void 0 : n.querySelector(
+          `button[role="menuitem"]:not([disabled]), .${m["action-item"]}`
+        );
+        e && e.focus();
+      });
+    });
+  }, [u]);
+  const s = (e) => !!(e && typeof e == "object" && "type" in e && e.type === "divider"), q = (e) => s(e) ? !0 : typeof e == "object" && e !== null && "hasPermission" in e ? e.hasPermission !== !1 : !0, $ = (e) => {
+    var r, I, d, k, x, D;
+    const n = Array.from(
+      ((r = c.current) == null ? void 0 : r.querySelectorAll(
+        `button[role="menuitem"]:not([disabled]), .${m["action-item"]}`
+      )) || []
+    ), t = n.indexOf(document.activeElement);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const o = t === -1 ? 0 : (t + 1) % n.length;
+      (I = n[o]) == null || I.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const o = t === -1 ? n.length - 1 : (t - 1 + n.length) % n.length;
+      (d = n[o]) == null || d.focus();
+    } else if (e.key === "Tab")
+      if (e.preventDefault(), e.shiftKey) {
+        const o = t === -1 ? n.length - 1 : (t - 1 + n.length) % n.length;
+        (k = n[o]) == null || k.focus();
+      } else {
+        const o = t === -1 ? 0 : (t + 1) % n.length;
+        (x = n[o]) == null || x.focus();
+      }
+    else if (e.key === "Enter") {
+      e.preventDefault();
+      const o = document.activeElement;
+      o && ((D = c.current) != null && D.contains(o)) && (o.click(), f(!1));
+    } else
+      e.key === "Escape" && (e.preventDefault(), f(!1));
+  }, j = (e) => {
+    const n = e.target, t = n.closest(`[role="menuitem"], .${m["action-item"]}`);
+    if (t && !t.hasAttribute("disabled")) {
+      if (n === t) {
+        const r = t.querySelector(
+          'a, button, [role="button"], [onclick]'
+        );
+        r && r.click();
+      }
+      f(!1);
+    }
+  }, B = (e, n) => s(e) ? /* @__PURE__ */ i("div", { className: l("divider") }, `divider-${n}`) : F(e) ? /* @__PURE__ */ i(K, { children: e }, n) : typeof e == "object" && e !== null && "label" in e ? e.hasPermission === !1 ? null : /* @__PURE__ */ i(
+    "button",
+    {
+      ref: (t) => {
+        t ? _.current.set(n, t) : _.current.delete(n);
+      },
+      type: "button",
+      role: "menuitem",
+      tabIndex: -1,
+      className: l("action-item", { disabled: e.disabled }, e.className),
+      disabled: e.disabled,
+      onClick: (t) => {
+        var r;
+        (r = e.onClick) == null || r.call(e, t);
+      },
+      children: e.label
+    },
+    e.id || `action-${n}`
+  ) : null, y = ((e) => {
+    if (!h)
+      return e;
+    let n = e.filter((t) => t != null);
+    if (n.length === 0)
+      return n;
+    for (; n.length > 0 && s(n[0]); )
+      n.shift();
+    for (; n.length > 0 && s(n[n.length - 1]); )
+      n.pop();
+    return n = n.filter((t, r) => !s(t) || r === 0 ? !0 : !s(n[r - 1])), n = n.filter((t, r) => s(t) ? n.slice(r + 1).some((d) => q(d)) : !0), n;
+  })(b).map(B).filter(Boolean);
+  return y.length === 0 ? null : /* @__PURE__ */ i("div", { className: l("action-menu", A), children: /* @__PURE__ */ i(
+    z,
+    {
+      placement: p,
+      isOpened: a ? !1 : u,
+      setIsOpened: O,
+      content: /* @__PURE__ */ i(
+        "div",
+        {
+          ref: c,
+          role: "menu",
+          tabIndex: -1,
+          onKeyDown: $,
+          onClick: j,
+          className: l("action-dropdown", M, N),
+          children: y
+        }
+      ),
+      className: l("actions-popover", E),
+      children: v ? /* @__PURE__ */ i("div", { className: g, children: v }) : /* @__PURE__ */ i(
+        U,
+        {
+          className: l("action-menu-button", g),
+          disabled: a,
+          "aria-label": S || "Actions menu",
+          "aria-expanded": u,
+          "aria-haspopup": "menu",
+          children: /* @__PURE__ */ i(R, {})
+        }
+      )
+    }
+  ) });
+};
+export {
+  ne as A,
+  ee as a
+};

package/dist/actionMenu.js

@@ -0,0 +1,30 @@
+import { A as c, a as s } from "./actionMenu-e78f9615.js";
+import "react/jsx-runtime";
+import "react";
+import "./details-dbb1530b.js";
+import "./baseIconButton-251479f7.js";
+import "./bind-06a7ff84.js";
+import "./popover.js";
+import "@floating-ui/react";
+import "./floatingUi-41f8c7b5.js";
+/*!
+ * Copyright 2026 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const A = { type: "divider" };
+export {
+  A as ACTION_MENU_DIVIDER,
+  c as ActionMenu,
+  s as ActionMenuItem
+};

package/dist/adaptiveTagList.js

@@ -0,0 +1,189 @@
+import { jsx as l, jsxs as g, Fragment as W } from "react/jsx-runtime";
+import { useRef as Z, useState as N, useCallback as m, useMemo as h, useEffect as S } from "react";
+import { c as A } from "./bind-06a7ff84.js";
+import { B as M } from "./button-7ab874f3.js";
+import { S as V } from "./close-4d480ef7.js";
+import { i as tt } from "./isEmpty-ccacb5ff.js";
+const et = 3, st = 22, nt = 8, it = 0, at = 100, ot = 20, lt = {
+  "tag-list-wrapper": "_tag-list-wrapper_fcsvj_16",
+  "tag-list-wrapper--show-all-view": "_tag-list-wrapper--show-all-view_fcsvj_19",
+  "tag-list": "_tag-list_fcsvj_16",
+  "tag-list--full-width": "_tag-list--full-width_fcsvj_31",
+  "tag-list--show-all-view": "_tag-list--show-all-view_fcsvj_34",
+  "tag-list--expanded": "_tag-list--expanded_fcsvj_40",
+  "tag-list--no-tags": "_tag-list--no-tags_fcsvj_45",
+  "tag-list__item": "_tag-list__item_fcsvj_49",
+  "tag-list__item-title": "_tag-list__item-title_fcsvj_78",
+  "tag-list__item--is-editable": "_tag-list__item--is-editable_fcsvj_93",
+  "tag-list__item-remove": "_tag-list__item-remove_fcsvj_99",
+  "tag-list__item--count": "_tag-list__item--count_fcsvj_126",
+  "tag-list__item--button-show-all-view": "_tag-list__item--button-show-all-view_fcsvj_140",
+  "tag-list__item--button-wrapper": "_tag-list__item--button-wrapper_fcsvj_144",
+  "no-tags-message": "_no-tags-message_fcsvj_161"
+}, a = A.bind(lt), ft = ({
+  tags: C,
+  isShowAllView: e = !1,
+  defaultVisibleLines: s = et,
+  onRemoveTag: r,
+  noTagsMessage: P = "No tags added",
+  showAllText: I = "Show all",
+  hideAllText: H = "Hide all",
+  showLessText: O = "Show less"
+}) => {
+  const d = Z(null), [v, b] = N(0), [o, R] = N(!1), [$, w] = N(/* @__PURE__ */ new Set()), [B, Y] = N(!1), U = m(
+    (t, n) => {
+      t.stopPropagation(), r == null || r(n);
+    },
+    [r]
+  ), y = m(() => {
+    const t = d.current, n = /* @__PURE__ */ new Set();
+    if (!t)
+      return;
+    const i = [...t.children].filter(
+      (c) => !c.classList.contains("tag-list__item--button")
+    );
+    if (i.length === 0)
+      return;
+    const f = i[0].offsetTop, T = t.getBoundingClientRect().right;
+    let p = 0;
+    i.forEach((c, u) => {
+      const j = c.getBoundingClientRect(), Q = c.offsetTop !== f, X = j.right > T;
+      (Q || X) && (n.add(u), p += 1);
+    }), w(n), b(p);
+  }, []), k = m(() => {
+    const t = d.current, n = /* @__PURE__ */ new Set();
+    if (!t || !s)
+      return;
+    const i = [...t.children].filter(
+      (u) => !u.classList.contains("tag-list__item--button")
+    );
+    if (i.length === 0)
+      return;
+    const f = i[0].offsetTop, _ = i[0].offsetHeight, T = f + _ * (s - 1);
+    let p = 0, c = !1;
+    i.forEach((u, j) => {
+      u.offsetTop > T + ot && (n.add(j), p += 1, c = !0);
+    }), w(n), b(p), Y(c);
+  }, [s]), q = h(() => e && s && !o ? {
+    maxHeight: `${st * s + nt * (s - 1)}px`,
+    overflow: "hidden"
+  } : {}, [e, s, o]);
+  S(() => {
+    if (!d.current)
+      return;
+    const i = setTimeout(() => {
+      e && s ? k() : y();
+    }, e && s ? it : at);
+    return () => clearTimeout(i);
+  }, [
+    d,
+    e,
+    s,
+    y,
+    k,
+    v
+  ]);
+  const x = m(() => {
+    R((t) => !t);
+  }, []), z = (t) => {
+    t.stopPropagation(), x();
+  }, E = m(
+    (t) => {
+      t.stopPropagation(), x();
+    },
+    [x]
+  ), J = h(() => v > 0 && !o, [v, o]), D = h(
+    () => e && s && B && !o,
+    [e, s, B, o]
+  ), F = h(() => /* @__PURE__ */ l("div", { className: a("tag-list__item--button-wrapper"), children: /* @__PURE__ */ l(
+    M,
+    {
+      className: a("tag-list__item--button", "tag-list__item--button-show-all-view"),
+      onClick: E,
+      variant: "text",
+      children: I
+    }
+  ) }), [E, I]), G = h(() => /* @__PURE__ */ l("div", { className: a({ "tag-list__item--button-wrapper": e }), children: /* @__PURE__ */ l(
+    M,
+    {
+      className: a("tag-list__item--button", {
+        "tag-list__item--button-show-all-view": e && s
+      }),
+      onClick: E,
+      variant: "text",
+      children: e && s ? H : O
+    }
+  ) }), [E, e, s, H, O]), K = m((t, n) => {
+    t && (t.scrollWidth > t.clientWidth ? t.setAttribute("title", n) : t.removeAttribute("title"));
+  }, []);
+  return tt(C) ? /* @__PURE__ */ l("div", { className: a("tag-list-wrapper"), children: /* @__PURE__ */ l("div", { className: a("tag-list", "tag-list--no-tags", "tag-list--full-width"), children: /* @__PURE__ */ l("div", { className: a("no-tags-message"), children: P }) }) }) : /* @__PURE__ */ g("div", { className: a("tag-list-wrapper", { "tag-list-wrapper--show-all-view": e }), children: [
+    /* @__PURE__ */ g(
+      "div",
+      {
+        className: a("tag-list", "tag-list--full-width", {
+          "tag-list--expanded": o,
+          "tag-list--show-all-view": e && !o
+        }),
+        style: q,
+        ref: d,
+        children: [
+          C.map((t, n) => {
+            const i = !o && $.has(n), f = !e && i;
+            return /* @__PURE__ */ g(
+              "div",
+              {
+                className: a("tag-list__item", { "tag-list__item--is-editable": !!r }),
+                style: {
+                  display: f ? "none" : "flex"
+                },
+                children: [
+                  /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: a("tag-list__item-title"),
+                      ref: (_) => K(_, t),
+                      children: t
+                    }
+                  ),
+                  r && /* @__PURE__ */ l(
+                    "button",
+                    {
+                      type: "button",
+                      className: a("tag-list__item-remove"),
+                      onClick: (_) => U(_, t),
+                      children: /* @__PURE__ */ l(V, {})
+                    }
+                  )
+                ]
+              },
+              `${n}-${t}`
+            );
+          }),
+          !e && /* @__PURE__ */ g(W, { children: [
+            o && G,
+            D && F
+          ] })
+        ]
+      }
+    ),
+    e && /* @__PURE__ */ g(W, { children: [
+      o && G,
+      D && F
+    ] }),
+    J && !e ? /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        className: a("tag-list__item", "tag-list__item--count"),
+        onClick: z,
+        children: [
+          "+",
+          v
+        ]
+      }
+    ) : null
+  ] });
+};
+export {
+  ft as AdaptiveTagList
+};

package/dist/attachedFile.js

@@ -0,0 +1,9 @@
+import { A as a } from "./index-d6e02727.js";
+import "react/jsx-runtime";
+import "react";
+import "./bind-06a7ff84.js";
+import "./close-4d480ef7.js";
+import "./xls-995781cc.js";
+export {
+  a as AttachedFile
+};