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

package/README.md

@@ -2,6 +2,8 @@
 
 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
 
 Install the package into your project using your favourite package manager:
@@ -112,7 +114,7 @@ To see a published showcase of the latest components released with its API and u
 
 ### Icons
 
-The library provides a set of SVG icons and the `BaseIconButton` component to apply basic styles for hover, disabled and others to them.
+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.
 
@@ -150,14 +152,7 @@ const MyComponent = () => {
 
 `BaseIconButton` supports all the props of the `button` HTML element.
 
-## Build process
-
-We use [vite](https://vitejs.dev/) as a build tool.
-
-To build the library run
-```console
-npm run build
-```
+**Note:** To support styling via `BaseIconButton`, it is recommended to use *path-based*, *single-color* SVG icons.
 
 ## Development
 
@@ -170,11 +165,48 @@ To run it locally use
 npm run start
 ```
 
-To create a ready-to-deploy version of the Storybook run
+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.

package/dist/checkbox-6777be17.js

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

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-import { C as r } from "./checkbox-4143390f.js";
+import { C as r } from "./checkbox-6777be17.js";
 import "react/jsx-runtime";
 import "./bind-06a7ff84.js";
 import "react";

package/dist/components/checkbox/checkbox.d.ts

@@ -6,6 +6,7 @@ interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
     className?: string;
     onChange?: ChangeEventHandler<HTMLInputElement>;
     partiallyChecked?: boolean;
+    title?: string;
 }
 export declare const Checkbox: FC<CheckboxProps>;
 export {};

package/dist/components/pagination/pageControls/pageNavigator/bar/bar.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ChangePage } from '../../../types';
+export interface BarProps {
+    totalPages: number;
+    activePage: number;
+    changePage: ChangePage;
+    captions: {
+        goTo: string;
+    };
+}
+export declare const Bar: FC<BarProps>;

package/dist/components/pagination/pageControls/pageNavigator/bar/index.d.ts

@@ -0,0 +1 @@
+export { Bar } from './bar';

package/dist/components/pagination/pageControls/pageNavigator/pageNavigator.d.ts

@@ -4,5 +4,8 @@ export interface PageNavigatorProps {
     activePage: number;
     totalPages: number;
     changePage: ChangePage;
+    captions: {
+        goTo: string;
+    };
 }
 export declare const PageNavigator: FC<PageNavigatorProps>;

package/dist/components/table/types.d.ts

@@ -37,9 +37,12 @@ export interface TableComponentProps {
     rowActionMenu?: ReactNode;
     selectable?: boolean;
     className?: string;
+    headerClassName?: string;
+    rowClassName?: string;
     selectedRowIds?: (string | number)[];
     sortingDirection?: SortDirection;
     sortingColumn?: Column;
+    sortableColumns?: string[];
     onChangeSorting?: (sortConfig?: SortConfig) => void;
     onToggleRowSelection?: (id: string | number) => void;
     onToggleAllRowsSelection?: () => void;

package/dist/components/table/utils.d.ts

@@ -1,2 +1,3 @@
-import { RowData, SortConfig } from './types';
+import { Column, RowData, SortConfig } from './types';
 export declare const sortTableData: (tableData: RowData[], sortConfig?: SortConfig) => RowData[];
+export declare const getColumnsKeys: (columns: Column[]) => string[];

package/dist/index.js

@@ -1,5 +1,5 @@
 import { B as d } from "./button-7fb84fde.js";
-import { C as L } from "./checkbox-4143390f.js";
+import { C as L } from "./checkbox-6777be17.js";
 import { S as g } from "./systemMessage-1ced6079.js";
 import { S as h, F as u } from "./fieldText-d80b29ba.js";
 import { T as I } from "./themeProvider-46c2be7b.js";
@@ -12,8 +12,8 @@ import { F as U } from "./fieldTextFlex-5bddf46a.js";
 import { R as q } from "./radio-fd49a09c.js";
 import { Tooltip as G } from "./tooltip.js";
 import { Popover as K } from "./popover.js";
-import { P as Q, a as W, S as X } from "./pagination-a36bc786.js";
-import { S as _, a as $, T as e1 } from "./table-d949a4ae.js";
+import { P as Q, a as W, S as X } from "./pagination-5449cd03.js";
+import { S as _, a as $, T as e1 } from "./table-231fd19c.js";
 import { B as r1 } from "./baseIconButton-7bc53dec.js";
 import * as e from "react";
 import "react/jsx-runtime";

package/dist/pagination-5449cd03.js

@@ -0,0 +1,346 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { c as m } from "./bind-06a7ff84.js";
+import * as b from "react";
+import { useState as x } from "react";
+import { Popover as B } from "./popover.js";
+import { B as $ } from "./button-7fb84fde.js";
+import { F as I } from "./fieldText-d80b29ba.js";
+import { B as f } from "./baseIconButton-7bc53dec.js";
+import { Tooltip as k } from "./tooltip.js";
+const w = (e) => /* @__PURE__ */ b.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "#A2AAB5", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ b.createElement("path", { d: "M12 13L4 8L12 3L12 13Z" })), T = (e) => /* @__PURE__ */ b.createElement("svg", { width: 13, height: 12, viewBox: "0 0 13 12", fill: "#A2AAB5", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ b.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 12L2 12L2 2.38498e-08L1.90798e-07 0L0 12ZM13 1L5 6L13 11L13 1Z" })), E = {
+  "item-counter": "_item-counter_4g6do_1"
+}, M = m.bind(E), P = ({
+  activePage: e,
+  pageSize: n,
+  totalItems: s,
+  ofText: r,
+  itemsText: c
+}) => {
+  const a = e * n, i = a - n;
+  return /* @__PURE__ */ d("div", { className: M("item-counter"), children: [
+    `${i + 1} - ${a < s ? a : s}`,
+    ` ${r} ${s} ${c}`
+  ] });
+}, j = "_selected_183l8_32", R = {
+  "size-selector": "_size-selector_183l8_1",
+  "size-option": "_size-option_183l8_6",
+  selected: j
+}, C = m.bind(R), V = ({
+  currentSize: e,
+  options: n,
+  onClickOption: s
+}) => /* @__PURE__ */ t("div", { className: C("size-selector"), children: n.map((r) => /* @__PURE__ */ t(
+  "button",
+  {
+    className: C("size-option", { selected: r === e }),
+    onClick: () => {
+      s(r);
+    },
+    children: r
+  },
+  r
+)) }), W = {
+  "page-size-control": "_page-size-control_gnurh_1",
+  "size-selector-button": "_size-selector-button_gnurh_10"
+}, S = m.bind(W), D = ({
+  size: e,
+  sizeOptions: n,
+  perPageText: s,
+  changeSize: r
+}) => {
+  const [c, a] = x(!1), i = (o) => {
+    r(o), a(!1);
+  };
+  return /* @__PURE__ */ d("div", { className: S("page-size-control"), children: [
+    /* @__PURE__ */ t(
+      B,
+      {
+        content: /* @__PURE__ */ t(V, { options: n, onClickOption: i, currentSize: e }),
+        placement: "top",
+        isOpened: c,
+        setIsOpened: a,
+        children: /* @__PURE__ */ t($, { className: S("size-selector-button"), variant: "text", children: e })
+      }
+    ),
+    ` ${s}`
+  ] });
+}, F = {
+  "page-selector": "_page-selector_rtho4_1",
+  "field-wrapper": "_field-wrapper_rtho4_6",
+  "apply-button": "_apply-button_rtho4_10"
+}, N = m.bind(F), Z = ({
+  totalPages: e,
+  pageText: n,
+  goActionText: s,
+  selectPage: r
+}) => {
+  const [c, a] = x(""), [i, o] = x(!0), p = (h) => {
+    const u = h.target.value.replace(/\D/g, ""), y = Number(u), O = y > 0 && y <= e;
+    o(O), a(u);
+  }, l = () => {
+    r(Number(c));
+  };
+  return /* @__PURE__ */ d("div", { className: N("page-selector"), children: [
+    /* @__PURE__ */ t("div", { className: N("field-wrapper"), children: /* @__PURE__ */ t(
+      I,
+      {
+        onChange: p,
+        value: c,
+        placeholder: n,
+        error: i ? "" : "Error",
+        touched: !0,
+        defaultWidth: !1,
+        displayError: !1
+      }
+    ) }),
+    /* @__PURE__ */ t($, { onClick: l, disabled: !c || !i, className: N("apply-button"), children: s })
+  ] });
+}, G = {
+  "active-page": "_active-page_14j0y_1",
+  "page-selector": "_page-selector_14j0y_10",
+  "page-selector-button": "_page-selector-button_14j0y_14"
+}, v = m.bind(G), H = ({
+  activePage: e,
+  totalPages: n,
+  pageText: s,
+  goToText: r,
+  goActionText: c,
+  changePage: a
+}) => {
+  const [i, o] = x(!1), p = (l) => {
+    a(l), o(!1);
+  };
+  return /* @__PURE__ */ d("div", { className: v("active-page"), children: [
+    `${s} `,
+    /* @__PURE__ */ t(
+      B,
+      {
+        content: /* @__PURE__ */ t(
+          Z,
+          {
+            pageText: s,
+            goActionText: c,
+            selectPage: p,
+            totalPages: n
+          }
+        ),
+        title: r,
+        placement: "top",
+        isOpened: i,
+        setIsOpened: o,
+        className: v("page-selector"),
+        children: /* @__PURE__ */ t($, { className: v("page-selector-button"), variant: "text", children: e })
+      }
+    )
+  ] });
+}, q = "_bar_dfnmf_1", J = "_section_dfnmf_9", K = "_selected_dfnmf_33", Q = "_tooltip_dfnmf_37", U = {
+  bar: q,
+  "section-with-tooltip": "_section-with-tooltip_dfnmf_9",
+  section: J,
+  selected: K,
+  "tooltip-wrapper": "_tooltip-wrapper_dfnmf_37",
+  tooltip: Q,
+  "tooltip-text": "_tooltip-text_dfnmf_48",
+  "page-number": "_page-number_dfnmf_52"
+}, g = m.bind(U), z = 13, A = 260, X = ({
+  totalPages: e,
+  activePage: n,
+  changePage: s,
+  captions: r
+}) => {
+  const c = A / e, a = Math.min(Math.ceil(A / z), e), i = Math.max(z, c), o = [];
+  for (let l = 1; l <= e; l++)
+    o.push({
+      end: l * c,
+      pageNumber: l
+    });
+  const p = Array.from({ length: a }, () => ({ pages: { from: void 0, to: void 0 } }));
+  return o.forEach((l) => {
+    const h = Math.ceil(l.end / i) - 1, u = p[h].pages;
+    u.from || (u.from = l.pageNumber), u.to = l.pageNumber;
+  }), /* @__PURE__ */ t("div", { className: g("bar"), children: p.map((l, h) => /* @__PURE__ */ t(
+    "div",
+    {
+      className: g("section-with-tooltip"),
+      style: { width: i },
+      onClick: () => l.pages.from && s(l.pages.from),
+      children: /* @__PURE__ */ t(
+        k,
+        {
+          content: /* @__PURE__ */ d("div", { className: g("tooltip"), children: [
+            /* @__PURE__ */ t("div", { className: g("tooltip-text"), children: r.goTo }),
+            /* @__PURE__ */ t("div", { className: g("page-number"), children: l.pages.from })
+          ] }),
+          className: g("tooltip-wrapper"),
+          placement: "top",
+          children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: g("section", {
+                selected: l.pages.from && l.pages.to && l.pages.from <= n && n <= l.pages.to
+              })
+            }
+          )
+        }
+      )
+    },
+    h
+  )) });
+}, Y = "_next_1p2t5_18", ee = {
+  "page-navigator": "_page-navigator_1p2t5_1",
+  "page-buttons": "_page-buttons_1p2t5_6",
+  "page-button": "_page-button_1p2t5_6",
+  next: Y
+}, _ = m.bind(ee), te = ({
+  activePage: e,
+  changePage: n,
+  totalPages: s,
+  captions: r
+}) => {
+  const c = () => {
+    n(1);
+  }, a = () => {
+    n(e - 1);
+  }, i = () => {
+    n(e + 1);
+  }, o = () => {
+    n(s);
+  };
+  return /* @__PURE__ */ d("div", { className: _("page-navigator"), children: [
+    /* @__PURE__ */ d("div", { className: _("page-buttons"), children: [
+      /* @__PURE__ */ t(
+        f,
+        {
+          className: _("page-button"),
+          onClick: c,
+          disabled: e === 1,
+          children: /* @__PURE__ */ t(T, {})
+        }
+      ),
+      /* @__PURE__ */ t(
+        f,
+        {
+          className: _("page-button"),
+          onClick: a,
+          disabled: e === 1,
+          children: /* @__PURE__ */ t(w, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      X,
+      {
+        totalPages: s,
+        activePage: e,
+        changePage: n,
+        captions: r
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: _("page-buttons"), children: [
+      /* @__PURE__ */ t(
+        f,
+        {
+          className: _("page-button", "next"),
+          onClick: i,
+          disabled: e === s,
+          children: /* @__PURE__ */ t(w, {})
+        }
+      ),
+      /* @__PURE__ */ t(
+        f,
+        {
+          className: _("page-button", "next"),
+          onClick: o,
+          disabled: e === s,
+          children: /* @__PURE__ */ t(T, {})
+        }
+      )
+    ] })
+  ] });
+}, oe = {
+  "page-controls": "_page-controls_thyf8_1",
+  "total-pages": "_total-pages_thyf8_8"
+}, L = m.bind(oe), se = ({
+  activePage: e,
+  changePage: n,
+  captions: s,
+  totalPages: r
+}) => /* @__PURE__ */ d("div", { className: L("page-controls"), children: [
+  /* @__PURE__ */ t(
+    H,
+    {
+      activePage: e,
+      totalPages: r,
+      changePage: n,
+      pageText: s.page,
+      goToText: s.goTo,
+      goActionText: s.goAction
+    }
+  ),
+  /* @__PURE__ */ t(
+    te,
+    {
+      changePage: n,
+      activePage: e,
+      totalPages: r,
+      captions: { goTo: s.goTo }
+    }
+  ),
+  /* @__PURE__ */ d("span", { className: L("total-pages"), children: [
+    `${s.of} `,
+    r
+  ] })
+] }), ne = "_pagination_uykxy_1", re = {
+  pagination: ne
+}, le = m.bind(re), ue = ({
+  activePage: e,
+  totalPages: n,
+  pageSize: s,
+  totalItems: r,
+  pageSizeOptions: c,
+  changePage: a,
+  changePageSize: i,
+  captions: o
+}) => {
+  const p = (o == null ? void 0 : o.of) || "of", l = (o == null ? void 0 : o.page) || "Page";
+  return /* @__PURE__ */ d("div", { className: le("pagination"), children: [
+    /* @__PURE__ */ t(
+      P,
+      {
+        activePage: e,
+        pageSize: s,
+        totalItems: r,
+        ofText: p,
+        itemsText: (o == null ? void 0 : o.items) || "items"
+      }
+    ),
+    n > 1 && /* @__PURE__ */ t(
+      se,
+      {
+        activePage: e,
+        totalPages: n,
+        changePage: a,
+        captions: {
+          page: l,
+          of: p,
+          goTo: (o == null ? void 0 : o.goTo) || "Go to page",
+          goAction: (o == null ? void 0 : o.goAction) || "Go"
+        }
+      }
+    ),
+    /* @__PURE__ */ t(
+      D,
+      {
+        size: s,
+        sizeOptions: c,
+        changeSize: i,
+        perPageText: (o == null ? void 0 : o.perPage) || "per page"
+      }
+    )
+  ] });
+};
+export {
+  ue as P,
+  w as S,
+  T as a
+};

package/dist/pagination.js

@@ -1,4 +1,4 @@
-import { P as t } from "./pagination-a36bc786.js";
+import { P as t } from "./pagination-5449cd03.js";
 import "react/jsx-runtime";
 import "./bind-06a7ff84.js";
 import "react";
@@ -7,6 +7,8 @@ import "@floating-ui/react";
 import "./button-7fb84fde.js";
 import "./fieldText-d80b29ba.js";
 import "./baseIconButton-7bc53dec.js";
+import "./tooltip.js";
+import "@floating-ui/react-dom";
 export {
   t as Pagination,
   t as default