@reportportal/ui-kit 0.0.1-alpha.16 → 0.0.1-alpha.161

package/README.md

@@ -45,7 +45,7 @@ const MyComponent = () => (
 
 ### Theming
 
-All components are provided with the `light'` theme by default.
+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
@@ -234,4 +234,30 @@ The CSS custom properties that come from DS are prefixed with `rp-ui-base` to av
 
 ### Testing
 
-To be provided.
+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/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-97d9e587.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-1a874a8b.js";
+import "react/jsx-runtime";
+import "react";
+import "./bind-06a7ff84.js";
+import "./close-4d480ef7.js";
+import "./xls-995781cc.js";
+export {
+  a as AttachedFile
+};