@reportportal/ui-kit 0.0.1-alpha.7 → 0.0.1-alpha.70

package/dist/tooltip.js

@@ -0,0 +1,101 @@
+import { jsxs as p, Fragment as D, jsx as o } from "react/jsx-runtime";
+import { useState as H, useRef as d } from "react";
+import { createPortal as R } from "react-dom";
+import { c as G } from "./bind-06a7ff84.js";
+import { useFloating as P, offset as j, flip as k, arrow as $, autoUpdate as C, FloatingArrow as U } from "@floating-ui/react";
+const Y = {
+  "tooltip-wrapper": "_tooltip-wrapper_lwpn2_16",
+  "tooltip-content": "_tooltip-content_lwpn2_23"
+}, n = G.bind(Y), Z = 300, q = 100, z = 16, f = 8, B = ["top", "right", "bottom", "left"], tt = ({
+  content: u,
+  wrapperClassName: h,
+  tooltipClassName: w,
+  contentClassName: x,
+  dynamicWidth: T,
+  width: _,
+  minWidth: g = 120,
+  safeZone: E = 4,
+  zIndex: A = 9,
+  placement: N = "bottom",
+  arrowColor: b = "rgba(34, 34, 34, 0.91)",
+  dataAutomationId: I,
+  mainAxis: S = !0,
+  children: W,
+  portalRoot: s,
+  isFloating: y = !0
+}) => {
+  const [i, l] = H(!1), r = d(null), t = d(), { refs: c, floatingStyles: F, context: L } = P({
+    open: i,
+    placement: N,
+    middleware: [
+      j({
+        mainAxis: E + f
+      }),
+      y && k({
+        mainAxis: S,
+        fallbackAxisSideDirection: "start",
+        fallbackPlacements: B
+      }),
+      $({
+        element: r
+      })
+    ],
+    whileElementsMounted: C
+  }), e = T ? null : { width: `${_}px` }, M = document.documentElement.clientWidth, O = e || M - q, a = () => {
+    t.current && clearTimeout(t.current), l(!1);
+  }, v = () => {
+    t.current = setTimeout(() => l(!0), Z);
+  }, m = () => /* @__PURE__ */ p(
+    "div",
+    {
+      ref: c.setFloating,
+      style: {
+        ...F,
+        ...e,
+        minWidth: g,
+        zIndex: A
+      },
+      "data-automation-id": I,
+      className: n(w),
+      children: [
+        /* @__PURE__ */ o(
+          U,
+          {
+            ref: r,
+            context: L,
+            width: z,
+            height: f,
+            fill: b
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: n("tooltip-content", x),
+            style: {
+              maxWidth: `${O}px`
+            },
+            children: u
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ p(D, { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        ref: c.setReference,
+        className: n("tooltip-wrapper", h),
+        onMouseDown: a,
+        onMouseEnter: v,
+        onMouseLeave: a,
+        children: W
+      }
+    ),
+    i && (s ? R(m(), s) : m())
+  ] });
+};
+export {
+  tt as Tooltip
+};

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.70",
+  "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {
-    "dev": "storybook dev -p 6006",
+    "start": "storybook dev -p 6006",
     "build": "tsc && vite build",
     "build:storybook": "storybook build",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "format": "npm run lint -- --fix",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ci": "vitest run",
+    "test:ui": "vitest --ui",
     "prepare": "husky install"
   },
   "files": [
@@ -21,28 +26,36 @@
     "react-dom": "17.x-18.x"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8",
+    "@floating-ui/react": "^0.26.16",
+    "@floating-ui/react-dom": "^2.0.1",
     "classnames": "^2.3.2",
     "downshift": "^6.1.12",
     "framer-motion": "^10.15.2",
     "rc-scrollbars": "^1.1.6",
-    "react-popper": "^2.3.0"
+    "react-datepicker": "^7.6.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.2.0",
-    "@storybook/addon-interactions": "^7.2.0",
-    "@storybook/addon-links": "^7.2.0",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.2.0",
-    "@storybook/react": "^7.2.0",
-    "@storybook/react-vite": "^7.2.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-onboarding": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.4.5",
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.3.3",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.0.3",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
+    "date-fns": "^3.6.0",
     "eslint": "^8.46.0",
     "eslint-config-airbnb-typescript": "^15.0.0",
     "eslint-config-prettier": "^8.10.0",
@@ -52,18 +65,41 @@
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^8.0.3",
+    "jsdom": "^25.0.1",
     "lint-staged": "^13.2.3",
     "prettier": "^3.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.64.1",
-    "storybook": "^7.2.2",
+    "storybook": "^8.6.14",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5",
+    "vite": "^4.5.14",
     "vite-plugin-dts": "^3.4.0",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^2.1.8"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reportportal/ui-kit.git"
+  },
+  "author": "ReportPortal.io",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/reportportal/ui-kit/issues"
+  },
+  "homepage": "https://github.com/reportportal/ui-kit#readme",
+  "keywords": [
+    "react",
+    "react-components",
+    "design-systems",
+    "ui-kit",
+    "reportportal",
+    "epam"
+  ],
+  "engines": {
+    "node": ">=16.x"
   }
 }

package/dist/bubblesLoader-9bec3797.js

@@ -1,17 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as r } from "./bind-06a7ff84.js";
-const a = "_bubble_1wrm9_1", c = "_bubbles_1wrm9_1", _ = {
-  "bubbles-loader": "_bubbles-loader_1wrm9_1",
-  "color-topaz": "_color-topaz_1wrm9_4",
-  bubble: a,
-  bubbles: c
-}, l = r.bind(_), t = 7, i = ({
-  color: b = "topaz",
-  className: o
-}) => /* @__PURE__ */ s("div", { className: l("bubbles-loader", o, { [`color-${b}`]: b }), children: Array(t).fill(void 0).map((m, e) => (
-  // eslint-disable-next-line react/no-array-index-key
-  /* @__PURE__ */ s("div", { className: l("bubble") }, e)
-)) });
-export {
-  i as B
-};

package/dist/button-d4944dbc.js

@@ -1,64 +0,0 @@
-import { jsxs as h, jsx as l } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { c as f } from "./bind-06a7ff84.js";
-const g = "_button_wutm5_1", y = "_primary_wutm5_19", N = "_disabled_wutm5_24", B = "_ghost_wutm5_36", $ = "_danger_wutm5_51", j = "_text_wutm5_67", I = "_icon_wutm5_113", R = {
-  button: g,
-  primary: y,
-  disabled: N,
-  ghost: B,
-  danger: $,
-  text: j,
-  "width-wide-content": "_width-wide-content_wutm5_103",
-  "width-parent": "_width-parent_wutm5_108",
-  icon: I,
-  "icon-start": "_icon-start_wutm5_119",
-  "icon-end": "_icon-end_wutm5_123"
-}, c = f.bind(R), A = x(
-  ({
-    variant: t = "primary",
-    icon: e,
-    iconPlace: n = "start",
-    adjustWidthOn: o = "content",
-    type: i = "button",
-    children: r,
-    disabled: s = !1,
-    onClick: a,
-    title: m,
-    className: d,
-    dataAutomationId: u,
-    ...w
-  }, b) => {
-    const p = c("button", t, d, {
-      disabled: s,
-      [`width-${o}`]: o
-    }), _ = t === "text" && e;
-    return /* @__PURE__ */ h(
-      "button",
-      {
-        ref: b,
-        type: i,
-        disabled: s,
-        className: p,
-        onClick: a,
-        title: m,
-        "data-automation-id": u,
-        ...w,
-        children: [
-          _ && /* @__PURE__ */ l(
-            "i",
-            {
-              className: c("icon", {
-                [`icon-${n}`]: n
-              }),
-              children: _
-            }
-          ),
-          r
-        ]
-      }
-    );
-  }
-);
-export {
-  A as B
-};

package/dist/checkbox-fdc44740.js

@@ -1,68 +0,0 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { c as x } from "./bind-06a7ff84.js";
-import { useRef as d } from "react";
-import { K as p } from "./keyCodes-f63c0e11.js";
-const m = "_checkbox_1ggpr_1", f = "_disabled_1ggpr_12", g = "_input_1ggpr_17", y = "_control_1ggpr_24", C = "_children_1ggpr_78", E = {
-  checkbox: m,
-  disabled: f,
-  input: g,
-  control: y,
-  children: C
-}, e = x.bind(E), j = ({
-  children: t,
-  disabled: c = !1,
-  onChange: _,
-  className: b,
-  value: s,
-  ...h
-}) => {
-  const o = d(null), k = (n) => {
-    var a, i;
-    const { keyCode: l } = n;
-    if (l === p.SPACE_KEY_CODE) {
-      n.preventDefault(), (a = o.current) == null || a.click();
-      return;
-    }
-    l === p.ENTER_KEY_CODE && (n.preventDefault(), (i = o.current) == null || i.click());
-  };
-  return /* @__PURE__ */ u(
-    "label",
-    {
-      id: "rp-ui-kit-checkbox-label",
-      className: e("checkbox", b, {
-        disabled: c
-      }),
-      children: [
-        /* @__PURE__ */ r(
-          "input",
-          {
-            ref: o,
-            tabIndex: 0,
-            type: "checkbox",
-            onKeyDown: k,
-            className: e("input"),
-            disabled: c,
-            onChange: _,
-            checked: s,
-            ...h
-          }
-        ),
-        /* @__PURE__ */ r(
-          "span",
-          {
-            "aria-labelledby": "rp-ui-kit-checkbox-label",
-            role: "checkbox",
-            "aria-checked": s,
-            className: e("control", {
-              disabled: c
-            })
-          }
-        ),
-        t && /* @__PURE__ */ r("span", { className: e("children", { disabled: c }), children: t })
-      ]
-    }
-  );
-};
-export {
-  j as C
-};

package/dist/clear-4963efcd.js

@@ -1,5 +0,0 @@
-import * as e from "react";
-const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { width: 16.2089, height: 16.1568, rx: 8.07842, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.14768 5.14645C4.95077 5.34171 4.95077 5.65829 5.14768 5.85355L7.49578 8.18198L5.35655 10.3033C5.15963 10.4986 5.15963 10.8151 5.35655 11.0104C5.55346 11.2057 5.87271 11.2057 6.06962 11.0104L8.20886 8.88909L10.1392 10.8033C10.3361 10.9986 10.6554 10.9986 10.8523 10.8033C11.0492 10.608 11.0492 10.2915 10.8523 10.0962L8.92193 8.18198L11.0612 6.06065C11.2581 5.86539 11.2581 5.54881 11.0612 5.35355C10.8643 5.15828 10.545 5.15828 10.3481 5.35355L8.20886 7.47487L5.86076 5.14645C5.66385 4.95118 5.34459 4.95118 5.14768 5.14645Z", fill: "white" }));
-export {
-  l as S
-};

package/dist/components/icon/icon.d.ts

@@ -1,11 +0,0 @@
-import { FC, MouseEventHandler } from 'react';
-import { icons } from './icons';
-type IconName = keyof typeof icons;
-interface IconProps {
-    icon: IconName;
-    className?: string;
-    disabled?: boolean;
-    onClick?: MouseEventHandler<HTMLSpanElement>;
-}
-export declare const Icon: FC<IconProps>;
-export {};

package/dist/components/icon/icons.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-export declare const icons: {
-    clear: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
-    }>;
-    close: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
-    }>;
-    dropdown: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
-    }>;
-    delete: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
-    }>;
-    plus: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
-    }>;
-    minus: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
-    }>;
-};

package/dist/components/icon/index.d.ts

@@ -1,3 +0,0 @@
-import { Icon } from './icon';
-export { Icon };
-export default Icon;

package/dist/dropdown-45e7bc7d.js

@@ -1,204 +0,0 @@
-import { jsx as d, jsxs as R } from "react/jsx-runtime";
-import { forwardRef as Q, useState as X, useRef as S } from "react";
-import { c as H } from "./bind-06a7ff84.js";
-import { Manager as Z, Reference as U, Popper as F } from "react-popper";
-import { useSelect as N } from "downshift";
-import { Scrollbars as B } from "rc-scrollbars";
-import { u as ee } from "./useOnClickOutside-c332f7d3.js";
-import { K as u } from "./keyCodes-f63c0e11.js";
-import { I as ne } from "./icon-71262f5c.js";
-const te = "_disabled_ev7l2_13", oe = "_hidden_ev7l2_17", de = "_selected_ev7l2_23", re = "_hover_ev7l2_26", le = {
-  "dropdown-option": "_dropdown-option_ev7l2_1",
-  disabled: te,
-  hidden: oe,
-  selected: de,
-  hover: re,
-  "single-option": "_single-option_ev7l2_39",
-  "sub-option": "_sub-option_ev7l2_45"
-}, T = H.bind(le), se = Q(
-  (t, n) => {
-    const {
-      option: { value: l, disabled: a, hidden: m, label: i, title: r, groupRef: b },
-      selected: w,
-      onChange: g,
-      render: f,
-      highlightHovered: E,
-      onMouseEnter: p
-    } = t, C = () => {
-      g && g(l);
-    };
-    return /* @__PURE__ */ d(
-      "div",
-      {
-        className: T("dropdown-option", {
-          selected: w,
-          disabled: a,
-          hidden: m,
-          hover: E
-        }),
-        title: a && r || void 0,
-        onClick: C,
-        ref: n,
-        onMouseEnter: p,
-        children: /* @__PURE__ */ d("div", { className: T("single-option", { "sub-option": !!b }), children: f ? f(t) : i })
-      }
-    );
-  }
-), ae = [
-  u.ENTER_KEY_CODE,
-  u.SPACE_KEY_CODE,
-  u.ARROW_DOWN_KEY_CODE
-], ie = [u.ESCAPE_KEY_CODE, u.TAB_KEY_CODE], ce = (t, n) => t.map(({ value: l }) => l).indexOf(n), _e = (t, n) => (t % n + n) % n, x = (t, n = 0, l = 1) => {
-  if (!t[n].disabled)
-    return n;
-  const a = t.length;
-  return x(t, _e(n + l, a));
-}, he = (t, n) => x(t, n), ue = (t, n) => x(t, n, -1), fe = "_container_1d54v_1", ge = "_icon_1d54v_10", pe = "_arrow_1d54v_16", ve = "_dropdown_1d54v_22", me = "_disabled_1d54v_39", be = "_error_1d54v_43", we = "_touched_1d54v_43", Ee = "_opened_1d54v_47", Ce = "_placeholder_1d54v_72", De = "_value_1d54v_75", Oe = "_ghost_1d54v_113", Ne = {
-  container: fe,
-  "default-width": "_default-width_1d54v_6",
-  icon: ge,
-  arrow: pe,
-  dropdown: ve,
-  "transparent-background": "_transparent-background_1d54v_36",
-  disabled: me,
-  error: be,
-  touched: we,
-  opened: Ee,
-  placeholder: Ce,
-  value: De,
-  "mobile-disabled": "_mobile-disabled_1d54v_87",
-  "select-list": "_select-list_1d54v_92",
-  ghost: Oe
-}, h = H.bind(Ne), Pe = ({
-  value: t = "",
-  options: n = [],
-  disabled: l = !1,
-  error: a,
-  onChange: m,
-  onFocus: i,
-  onBlur: r,
-  mobileDisabled: b,
-  title: w,
-  touched: g = !1,
-  icon: f,
-  variant: E,
-  placeholder: p = "",
-  defaultWidth: C = !0,
-  renderOption: M,
-  transparentBackground: P = !1,
-  className: Y,
-  toggleButtonClassName: A
-}) => {
-  const [c, _] = X(!1), y = S(null), s = S(null);
-  ee(y, () => {
-    c && (_(!1), r && r());
-  });
-  const I = (e) => {
-    e.disabled || (m(e.value), _((o) => !o));
-  }, W = () => n.find(({ value: e }) => e === t), K = ce(n, t), {
-    getToggleButtonProps: $,
-    getMenuProps: j,
-    getItemProps: V,
-    setHighlightedIndex: v,
-    highlightedIndex: k,
-    selectedItem: D
-  } = N({
-    items: n,
-    itemToString: (e) => (e != null && e.label ? String(e.label) : p) || "",
-    selectedItem: W(),
-    isOpen: c,
-    circularNavigation: !0,
-    defaultHighlightedIndex: K,
-    onHighlightedIndexChange: (e) => {
-      switch (e.type) {
-        case N.stateChangeTypes.MenuKeyDownArrowUp:
-          return v(ue(n, e.highlightedIndex)), e;
-        case N.stateChangeTypes.MenuKeyDownArrowDown:
-          return v(he(n, e.highlightedIndex)), e;
-        default:
-          return e;
-      }
-    }
-  }), L = () => {
-    l || (s != null && s.current && s.current(), _((e) => !e), c ? r && r() : i && i());
-  }, q = () => {
-    if (!t && t !== !1)
-      return p;
-    let e = t;
-    return n.forEach((o) => {
-      o.value === t && (e = o.label);
-    }), e;
-  }, z = (e) => {
-    const { keyCode: o } = e;
-    ae.includes(o) && !c && (e.preventDefault(), v(K), s != null && s.current && s.current(), _(!0), i && i());
-  }, G = (e) => {
-    const { keyCode: o } = e;
-    if (o === u.ENTER_KEY_CODE) {
-      const O = n[k];
-      I(O), _(!1), r && r();
-      return;
-    }
-    ie.includes(o) && (e.stopPropagation(), _(!1), r && r());
-  }, J = () => n.map((e, o) => /* @__PURE__ */ d(
-    se,
-    {
-      ...V({
-        item: e,
-        index: o
-      }),
-      selected: e.value === (D == null ? void 0 : D.value),
-      option: e,
-      highlightHovered: k === o,
-      render: M,
-      onChange: e.disabled ? null : () => I(e),
-      onMouseEnter: () => v(o)
-    },
-    e.value
-  ));
-  return /* @__PURE__ */ d(Z, { children: /* @__PURE__ */ R(
-    "div",
-    {
-      ref: y,
-      className: h("container", { "default-width": C }, Y),
-      title: w,
-      children: [
-        /* @__PURE__ */ d(U, { children: ({ ref: e }) => /* @__PURE__ */ R(
-          "button",
-          {
-            ...$({
-              ref: e,
-              tabIndex: l ? -1 : 0,
-              className: h("dropdown", E, A, {
-                "transparent-background": P,
-                opened: c,
-                disabled: l,
-                error: a,
-                touched: g,
-                "mobile-disabled": b
-              }),
-              onClick: L,
-              onKeyDown: z
-            }),
-            children: [
-              f && /* @__PURE__ */ d("span", { className: h("icon"), children: f }),
-              /* @__PURE__ */ d("span", { className: h("value", { placeholder: !t }), children: q() }),
-              /* @__PURE__ */ d(ne, { icon: "dropdown", className: h("arrow") })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ d(F, { placement: "bottom-start", children: ({ ref: e, style: o, update: O }) => (s.current = O, /* @__PURE__ */ d(
-          "div",
-          {
-            className: h("select-list", { opened: c }),
-            style: o,
-            ...j({ ref: e, onKeyDown: G }),
-            children: /* @__PURE__ */ d(B, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: J() })
-          }
-        )) })
-      ]
-    }
-  ) });
-};
-export {
-  Pe as D
-};