@reportportal/ui-kit 0.0.1-alpha.0 → 0.0.1-alpha.10

package/dist/table-d949a4ae.js

@@ -0,0 +1,132 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import * as n from "react";
+import { useState as w, useMemo as V } from "react";
+import { c as q } from "./bind-06a7ff84.js";
+import "./baseIconButton-7bc53dec.js";
+import { C } from "./checkbox-4143390f.js";
+const D = (t) => /* @__PURE__ */ n.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.85355 12.8536C7.65829 13.0488 7.34171 13.0488 7.14645 12.8536L4.14645 9.85355C3.95118 9.65829 3.95118 9.34171 4.14645 9.14645C4.34171 8.95118 4.65829 8.95118 4.85355 9.14645L7 11.2929L7 3.5C7 3.22386 7.22386 3 7.5 3C7.77614 3 8 3.22386 8 3.5L8 11.2929L10.1464 9.14645C10.3417 8.95119 10.6583 8.95118 10.8536 9.14645C11.0488 9.34171 11.0488 9.65829 10.8536 9.85355L7.85355 12.8536Z", fill: "#A2AAB5" })), g = (t) => /* @__PURE__ */ n.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.14645 3.14645C7.34171 2.95118 7.65829 2.95118 7.85355 3.14645L10.8536 6.14645C11.0488 6.34171 11.0488 6.65829 10.8536 6.85355C10.6583 7.04882 10.3417 7.04882 10.1464 6.85355L8 4.70711V12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 4.70711L4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355C3.95118 6.65829 3.95118 6.34171 4.14645 6.14645L7.14645 3.14645Z", fill: "#A2AAB5" })), F = "_table_fmu4u_5", G = {
+  table: F,
+  "table-header": "_table-header_fmu4u_10",
+  "table-row": "_table-row_fmu4u_17",
+  "table-row-content": "_table-row-content_fmu4u_22",
+  "size-small": "_size-small_fmu4u_31",
+  "size-large": "_size-large_fmu4u_34",
+  "table-body": "_table-body_fmu4u_41",
+  "table-header-cell": "_table-header-cell_fmu4u_48",
+  "table-cell": "_table-cell_fmu4u_48",
+  "action-menu-cell": "_action-menu-cell_fmu4u_53",
+  "checkbox-cell": "_checkbox-cell_fmu4u_63",
+  "primary-cell": "_primary-cell_fmu4u_71",
+  "align-right": "_align-right_fmu4u_88",
+  "align-center": "_align-center_fmu4u_94"
+};
+var b = /* @__PURE__ */ ((t) => (t.ASC = "asc", t.DESC = "desc", t))(b || {});
+const l = q.bind(G), W = ({
+  data: t,
+  primaryColumn: i,
+  fixedColumns: u,
+  rowActionMenu: d,
+  className: L = "",
+  selectable: v = !1,
+  selectedRowIds: o = [],
+  sortingDirection: m = b.ASC,
+  sortingColumn: s = i,
+  onChangeSorting: N = () => {
+  },
+  onToggleRowSelection: x = () => {
+  },
+  onToggleAllRowsSelection: A = () => {
+  }
+}) => {
+  const [S, y] = w(null), [z, f] = w(null), p = V(() => [{ ...i, primary: !0 }, ...u], [i, u]), E = (e) => {
+    N({ key: e, direction: m });
+  }, k = (e) => ({
+    width: e.width,
+    textAlign: e.align
+  }), M = (e) => {
+    y(e);
+  }, R = () => {
+    y(null);
+  }, B = (e) => {
+    f(e);
+  }, j = () => {
+    f(null);
+  }, H = (e) => {
+    x(e);
+  }, T = () => {
+    A();
+  }, Z = t.every((e) => o.includes(e.id)), h = t.some((e) => o.includes(e.id)), $ = (e) => {
+    var c;
+    return `size-${((c = e.rowConfigs) == null ? void 0 : c.size) ?? "default"}`;
+  }, U = (e) => (s == null ? void 0 : s.key) === e ? m === b.ASC ? /* @__PURE__ */ a(g, {}) : /* @__PURE__ */ a(D, {}) : /* @__PURE__ */ a(g, {});
+  return /* @__PURE__ */ r("div", { className: l("table", L), children: [
+    /* @__PURE__ */ r("div", { className: l("table-header"), children: [
+      v && /* @__PURE__ */ a("div", { className: l("table-header-cell", "checkbox-cell"), children: h && /* @__PURE__ */ a(
+        C,
+        {
+          value: Z,
+          partiallyChecked: h,
+          onChange: T,
+          className: l("checkbox-cell")
+        }
+      ) }),
+      p.map((e) => /* @__PURE__ */ r(
+        "button",
+        {
+          className: l("table-header-cell", {
+            [`align-${e.align}`]: "align" in e,
+            "primary-cell": "primary" in e && e.primary
+          }),
+          style: k(e),
+          onClick: () => E(e.key),
+          onMouseEnter: () => M(e.key),
+          onMouseLeave: R,
+          children: [
+            /* @__PURE__ */ a("span", { children: e.header }),
+            (S === e.key || (s == null ? void 0 : s.key) === e.key) && U(e.key)
+          ]
+        },
+        e.key
+      )),
+      d && /* @__PURE__ */ a("div", { className: l("table-header-cell", "action-menu-cell") })
+    ] }),
+    /* @__PURE__ */ a("div", { className: l("table-body"), children: t.map((e, _) => /* @__PURE__ */ r(
+      "div",
+      {
+        className: l("table-row", $(e)),
+        onMouseEnter: () => B(_),
+        onMouseLeave: j,
+        children: [
+          v && /* @__PURE__ */ a("div", { className: l("table-cell", "checkbox-cell"), children: (h || z === _) && /* @__PURE__ */ a(
+            C,
+            {
+              value: o.includes(e.id),
+              onChange: () => H(e.id),
+              className: l("checkbox-cell")
+            }
+          ) }),
+          /* @__PURE__ */ r("div", { className: l("table-row-content"), children: [
+            p.map((c) => /* @__PURE__ */ a(
+              "div",
+              {
+                className: l("table-cell", "table-cell", {
+                  "primary-cell": "primary" in c && c.primary
+                }),
+                style: k(c),
+                children: e[c.key].component || e[c.key].content || e[c.key]
+              },
+              c.key
+            )),
+            d && /* @__PURE__ */ a("div", { className: l("table-cell", "action-menu-cell"), children: d })
+          ] })
+        ]
+      },
+      e.id
+    )) })
+  ] });
+};
+export {
+  D as S,
+  W as T,
+  g as a
+};

package/dist/table.js

@@ -0,0 +1,11 @@
+import { T as r } from "./table-d949a4ae.js";
+import "react/jsx-runtime";
+import "react";
+import "./bind-06a7ff84.js";
+import "./baseIconButton-7bc53dec.js";
+import "./checkbox-4143390f.js";
+import "./keyCodes-f63c0e11.js";
+export {
+  r as Table,
+  r as default
+};

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

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

package/dist/toggle-707ecb74.js

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

package/dist/toggle.js

@@ -0,0 +1,9 @@
+import { T as r } from "./toggle-707ecb74.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,70 @@
+import { jsxs as T, Fragment as g, jsx as l } from "react/jsx-runtime";
+import { useState as y, useRef as E } from "react";
+import { c as N } from "./bind-06a7ff84.js";
+import { useFloating as O, flip as S } from "@floating-ui/react-dom";
+const W = "_tooltip_7bl3z_1", v = {
+  "tooltip-wrapper": "_tooltip-wrapper_7bl3z_1",
+  tooltip: W,
+  "tooltip-content": "_tooltip-content_7bl3z_26",
+  "tooltip-arrow": "_tooltip-arrow_7bl3z_39"
+}, n = N.bind(v), z = 2e3, F = 100, D = ({
+  content: c,
+  className: a,
+  dynamicWidth: p,
+  width: d,
+  placement: m = "bottom",
+  dataAutomationId: u,
+  children: f
+}) => {
+  const [_, i] = y(!1), t = E(), { refs: s, floatingStyles: h } = O({
+    placement: m,
+    strategy: "fixed",
+    middleware: [
+      S({
+        fallbackPlacements: ["bottom", "top", "right", "left"]
+      })
+    ]
+  }), o = p ? null : { width: `${d}px` }, w = document.documentElement.clientWidth, x = o || w - F, r = () => {
+    t.current && clearTimeout(t.current), i(!1);
+  }, b = () => {
+    t.current = setTimeout(() => i(!0), z);
+  };
+  return /* @__PURE__ */ T(g, { children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        ref: (e) => s.setReference(e),
+        className: n("tooltip-wrapper", a),
+        onMouseDown: r,
+        onMouseEnter: b,
+        onMouseLeave: r,
+        children: f
+      }
+    ),
+    _ && /* @__PURE__ */ l(
+      "div",
+      {
+        className: n("tooltip"),
+        ref: (e) => s.setFloating(e),
+        style: {
+          ...h,
+          ...o
+        },
+        "data-automation-id": u,
+        children: /* @__PURE__ */ l(
+          "div",
+          {
+            className: n("tooltip-content"),
+            style: {
+              maxWidth: `${x}px`
+            },
+            children: c
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  D 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,64 +1,93 @@
-{
-  "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.0",
-  "type": "module",
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "tsc && vite build",
-    "build:storybook": "storybook build",
-    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
-    "format": "npm run lint -- --fix",
-    "prepare": "husky install"
-  },
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/components/index.d.ts",
-  "peerDependencies": {
-    "react": "17.x-18.x",
-    "react-dom": "17.x-18.x"
-  },
-  "dependencies": {
-    "classnames": "^2.3.2",
-    "html-react-parser": "^4.2.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",
-    "@types/node": "^20.4.5",
-    "@types/react": "^18.2.15",
-    "@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",
-    "eslint": "^8.46.0",
-    "eslint-config-airbnb-typescript": "^15.0.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "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",
-    "husky": "^8.0.3",
-    "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",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
-    "vite-plugin-dts": "^3.4.0",
-    "vite-plugin-linter": "^2.0.2",
-    "vite-tsconfig-paths": "^4.2.0"
-  }
-}
+{
+  "name": "@reportportal/ui-kit",
+  "version": "0.0.1-alpha.10",
+  "description": "The UI-kit library for ReportPortal Design System.",
+  "type": "module",
+  "scripts": {
+    "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": "exit 0",
+    "test:coverage": "exit 0",
+    "prepare": "husky install"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/components/index.d.ts",
+  "peerDependencies": {
+    "react": "17.x-18.x",
+    "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"
+  },
+  "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",
+    "@types/node": "^20.4.5",
+    "@types/react": "^18.3.3",
+    "@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",
+    "eslint": "^8.46.0",
+    "eslint-config-airbnb-typescript": "^15.0.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "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",
+    "husky": "^8.0.3",
+    "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",
+    "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"
+  },
+  "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"
+  }
+}