@reportportal/ui-kit 0.0.1-alpha.5 → 0.0.1-alpha.50

package/dist/themeProvider-46c2be7b.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as h } from "./bind-06a7ff84.js";
+const n = {
+  "theme-provider": "_theme-provider_xipmx_1"
+}, c = h.bind(n), e = {
+  light: "rp-ui-kit-theme-light",
+  dark: "rp-ui-kit-theme-dark"
+};
+function p({
+  children: t,
+  theme: i = "light",
+  customThemes: r = {},
+  className: s
+}) {
+  const m = {
+    ...e,
+    ...r
+  }[i] || e.light;
+  return /* @__PURE__ */ o("div", { className: c("theme-provider", s, m), children: t });
+}
+export {
+  p as T
+};

package/dist/themeProvider.js

@@ -1,6 +1,7 @@
-import { T as e } from "./themeProvider-5800417e.js";
+import { T as o } from "./themeProvider-46c2be7b.js";
 import "react/jsx-runtime";
+import "./bind-06a7ff84.js";
 export {
-  e as ThemeProvider,
-  e as default
+  o as ThemeProvider,
+  o as default
 };

package/dist/toggle-1a3aacb5.js

@@ -0,0 +1,59 @@
+import { jsxs as g, jsx as s } from "react/jsx-runtime";
+import { c as h } from "./bind-06a7ff84.js";
+import { useRef as k, useId as x } from "react";
+import { K as _ } from "./keyCodes-f63c0e11.js";
+const y = "_toggle_1bvir_1", E = "_slider_1bvir_27", v = "_round_1bvir_47", D = "_input_1bvir_51", K = "_disabled_1bvir_92", N = {
+  toggle: y,
+  "children-container": "_children-container_1bvir_14",
+  slider: E,
+  round: v,
+  input: D,
+  disabled: K
+}, e = h.bind(N), j = ({
+  children: t,
+  value: c,
+  onChange: u,
+  className: b,
+  disabled: n = !1,
+  title: p,
+  ...m
+}) => {
+  const r = k(null), i = x(), f = (o) => {
+    var a, d;
+    const { keyCode: l } = o;
+    if (l === _.SPACE_KEY_CODE) {
+      o.preventDefault(), (a = r.current) == null || a.click();
+      return;
+    }
+    l === _.ENTER_KEY_CODE && (o.preventDefault(), (d = r.current) == null || d.click());
+  };
+  return /* @__PURE__ */ g("label", { id: i, title: p, className: e("toggle", b, { disabled: n }), children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        ref: r,
+        tabIndex: n ? -1 : 0,
+        onChange: u,
+        checked: c,
+        disabled: n,
+        onKeyDown: f,
+        className: e("input"),
+        type: "checkbox",
+        ...m
+      }
+    ),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        "aria-labelledby": i,
+        role: "checkbox",
+        "aria-checked": c,
+        className: e("slider", "round")
+      }
+    ),
+    t && /* @__PURE__ */ s("span", { className: e("children-container"), children: t })
+  ] });
+};
+export {
+  j as T
+};

package/dist/toggle.js

@@ -0,0 +1,9 @@
+import { T as r } from "./toggle-1a3aacb5.js";
+import "react/jsx-runtime";
+import "./bind-06a7ff84.js";
+import "react";
+import "./keyCodes-f63c0e11.js";
+export {
+  r as Toggle,
+  r as default
+};

package/dist/tooltip.js

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

package/dist/useOnClickOutside-c332f7d3.js

@@ -0,0 +1,16 @@
+import { useEffect as i } from "react";
+function u(t, n) {
+  i(() => {
+    if (!n)
+      return;
+    const e = (o) => {
+      t && t.current && !t.current.contains(o.target) && n(o);
+    };
+    return document.addEventListener("pointerdown", e), () => {
+      document.removeEventListener("pointerdown", e);
+    };
+  }, [t, n]);
+}
+export {
+  u
+};

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.5",
+  "version": "0.0.1-alpha.50",
+  "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,25 +26,36 @@
     "react-dom": "17.x-18.x"
   },
   "dependencies": {
+    "@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"
+    "rc-scrollbars": "^1.1.6",
+    "react-datepicker": "^7.3.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.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@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",
@@ -49,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.2.9",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "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/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-7736509c.js

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

package/dist/common/constants/key-codes.d.ts

@@ -1,5 +0,0 @@
-export declare enum KeyCodes {
-    SPACE_KEY_CODE = 32,
-    ENTER_KEY_CODE = 13,
-    ESCAPE_KEY_CODE = 27
-}

package/dist/fieldText-9621b0b7.js

@@ -1,99 +0,0 @@
-import { jsx as e, jsxs as t, Fragment as f } from "react/jsx-runtime";
-import * as o from "react";
-import { forwardRef as A } from "react";
-import { c as F } from "./bind-06a7ff84.js";
-const R = (c) => /* @__PURE__ */ o.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...c }, /* @__PURE__ */ o.createElement("rect", { width: 16.2089, height: 16.1568, rx: 8.07842, fill: "#A2AAB5" }), /* @__PURE__ */ o.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" })), j = "_label_11rxn_18", y = "_asterisk_11rxn_27", B = "_disabled_11rxn_33", M = "_field_11rxn_37", S = "_error_11rxn_51", Z = "_touched_11rxn_51", z = "_input_11rxn_65", D = "_placeholder_11rxn_88", G = "_icon_11rxn_1", H = "_text_11rxn_151", J = {
-  "icon-container": "_icon-container_11rxn_1",
-  "icon-container-end": "_icon-container-end_11rxn_1",
-  "icon-container-start": "_icon-container-start_11rxn_1",
-  label: j,
-  asterisk: y,
-  disabled: B,
-  field: M,
-  error: S,
-  touched: Z,
-  "default-width": "_default-width_11rxn_61",
-  "input-container": "_input-container_11rxn_65",
-  input: z,
-  placeholder: D,
-  icon: G,
-  "clear-icon": "_clear-icon_11rxn_108",
-  "additional-content": "_additional-content_11rxn_144",
-  text: H,
-  "error-text": "_error-text_11rxn_159",
-  "help-text": "_help-text_11rxn_163"
-}, n = F.bind(J), Q = A(
-  ({
-    value: c,
-    className: N,
-    error: r,
-    placeholder: _,
-    disabled: a = !1,
-    onChange: u,
-    touched: i = !1,
-    title: w,
-    label: s,
-    helpText: l,
-    defaultWidth: C = !0,
-    startIcon: d,
-    endIcon: x,
-    clearable: L = !1,
-    onClear: p,
-    isRequired: h = !1,
-    hasDoubleMessage: g = !1,
-    type: k = "text",
-    ...v
-  }, b) => {
-    const E = () => {
-      p && p(c);
-    }, m = /* @__PURE__ */ e("span", { className: n("text", "help-text"), children: l });
-    return /* @__PURE__ */ t(f, { children: [
-      s && /* @__PURE__ */ t("span", { className: n("label", { disabled: a }), children: [
-        s,
-        h && /* @__PURE__ */ e("span", { className: n("asterisk"), children: "*" })
-      ] }),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          className: n("field", N, {
-            error: r,
-            touched: i,
-            disabled: a,
-            "default-width": C
-          }),
-          title: w,
-          children: [
-            d && /* @__PURE__ */ e("span", { className: n("icon-container-start"), children: /* @__PURE__ */ e("span", { className: n("icon"), children: d }) }),
-            /* @__PURE__ */ t("span", { className: n("input-container"), children: [
-              /* @__PURE__ */ e(
-                "input",
-                {
-                  ref: b,
-                  type: k,
-                  className: n("input"),
-                  value: c,
-                  disabled: a,
-                  onChange: u,
-                  ...v
-                }
-              ),
-              _ && !c && /* @__PURE__ */ t("span", { className: n("placeholder"), children: [
-                _,
-                h && !s && /* @__PURE__ */ e("span", { className: n("asterisk") })
-              ] })
-            ] }),
-            x && /* @__PURE__ */ e("span", { className: n("icon-container-end"), children: /* @__PURE__ */ e("span", { className: n("icon"), children: x }) }),
-            L && /* @__PURE__ */ e("span", { className: n("icon-container-end"), children: /* @__PURE__ */ e("button", { type: "button", className: n("clear-icon", { disabled: a }), onClick: E, children: /* @__PURE__ */ e(R, {}) }) })
-          ]
-        }
-      ),
-      (r && i || l) && /* @__PURE__ */ e("div", { className: n("additional-content", { disabled: a }), children: r && i ? /* @__PURE__ */ t(f, { children: [
-        /* @__PURE__ */ e("span", { className: n("text", "error-text"), children: r }),
-        g && m
-      ] }) : l && m })
-    ] });
-  }
-);
-export {
-  Q as F
-};

package/dist/key-codes-abbe7725.js

@@ -1,4 +0,0 @@
-var _ = /* @__PURE__ */ ((E) => (E[E.SPACE_KEY_CODE = 32] = "SPACE_KEY_CODE", E[E.ENTER_KEY_CODE = 13] = "ENTER_KEY_CODE", E[E.ESCAPE_KEY_CODE = 27] = "ESCAPE_KEY_CODE", E))(_ || {});
-export {
-  _ as K
-};

package/dist/systemMessage-62c3133d.js

@@ -1,30 +0,0 @@
-import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { c as _ } from "./bind-06a7ff84.js";
-const c = "_children_19dbq_54", m = {
-  "system-message": "_system-message_19dbq_1",
-  "stripes-info": "_stripes-info_19dbq_12",
-  "stripes-warning": "_stripes-warning_19dbq_17",
-  "stripes-error": "_stripes-error_19dbq_22",
-  "text-container": "_text-container_19dbq_27",
-  "message-header-info": "_message-header-info_19dbq_30",
-  "message-header-warning": "_message-header-warning_19dbq_38",
-  "message-header-error": "_message-header-error_19dbq_46",
-  children: c,
-  "content-width": "_content-width_19dbq_70"
-}, e = _.bind(m), l = ({
-  header: r,
-  caption: a,
-  children: i,
-  mode: n = "info",
-  widthByContent: d = !1
-}) => /* @__PURE__ */ t("div", { className: e("system-message", { "content-width": d }), children: [
-  /* @__PURE__ */ s("div", { className: e(`stripes-${n}`) }),
-  /* @__PURE__ */ t("div", { className: e("text-container"), children: [
-    r && /* @__PURE__ */ s("h1", { className: e(`message-header-${n}`), children: r }),
-    /* @__PURE__ */ s("div", { className: e("children"), children: i }),
-    a && /* @__PURE__ */ s("p", { children: a })
-  ] })
-] });
-export {
-  l as S
-};

package/dist/themeProvider-5800417e.js

@@ -1,19 +0,0 @@
-import { jsx as h } from "react/jsx-runtime";
-const e = {
-  light: "rp-ui-kit-theme-light",
-  dark: "rp-ui-kit-theme-dark"
-};
-function o({
-  children: t,
-  theme: i = "light",
-  customThemes: r = {}
-}) {
-  const s = {
-    ...e,
-    ...r
-  }[i] || e.light;
-  return /* @__PURE__ */ h("div", { className: s, children: t });
-}
-export {
-  o as T
-};