triafly-ui-kit 1.0.23 → 1.0.24

package/dist/components/Ui/SearchInput/SearchInput.js

@@ -0,0 +1,109 @@
+import { jsxs as I, Fragment as T, jsx as l } from "react/jsx-runtime";
+import { useState as o, useRef as H, useEffect as w } from "react";
+import { TextInput as U } from "../TextInput/TextInput.js";
+import { IconCaretUpDown as q } from "../Icons/Icons.js";
+import '../../../assets/SearchInput.css';const z = ({
+  name: k = "SearchInput",
+  label: x,
+  placeholder: y = "",
+  type: N = "text",
+  id: $,
+  isDisabled: h = !1,
+  errorMessage: F = "",
+  hasError: V = !1,
+  className: D = "",
+  isClearable: E,
+  isLoading: L,
+  value: c = "",
+  onChange: s,
+  options: n = []
+}) => {
+  const [m, v] = o(c), [j, i] = o(""), [u, p] = o([]), [d, r] = o(!1), [g, A] = o(!1), [B, C] = o(!1), f = H(null);
+  w(() => {
+    if (c) {
+      const e = n.find((t) => t.value === c);
+      i(e ? e.label : c);
+    } else
+      i("");
+  }, [c, n]), w(() => {
+    if (m.trim() === "" && g) {
+      p(n);
+      return;
+    }
+    const e = n.filter(
+      (t) => t.label.toLowerCase().includes(m.toLowerCase())
+    );
+    p(e);
+  }, [m, n, g]), w(() => {
+    const e = (t) => {
+      f.current && !f.current.contains(t.target) && r(!1);
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, []);
+  const K = (e) => {
+    const t = e.target.value;
+    v(t), i(t), s == null || s(t), r(!0);
+  }, b = (e) => {
+    v(e.value), i(e.label), s == null || s(e.value), r(!1);
+  }, O = () => {
+    A(!0), r(!0), p(n);
+  }, P = (e) => {
+    e.key === "Enter" && u.length > 0 && d && b(u[0]);
+  }, S = (e) => {
+    var t;
+    if (e.stopPropagation(), !d) {
+      const a = (t = f.current) == null ? void 0 : t.getBoundingClientRect(), R = window.innerHeight - ((a == null ? void 0 : a.bottom) || 0);
+      C(R < 304);
+    }
+    r((a) => !a);
+  };
+  return /* @__PURE__ */ I(T, { children: [
+    /* @__PURE__ */ l(
+      U,
+      {
+        name: k,
+        label: x,
+        type: N,
+        className: `${D}`,
+        value: j,
+        onChange: K,
+        placeholder: y,
+        id: $,
+        isDisabled: h,
+        isClearable: E,
+        hasError: V,
+        errorMessage: F,
+        isLoading: L,
+        onFocus: O,
+        onKeyDown: P
+      }
+    ),
+    /* @__PURE__ */ I("div", { className: "dropdown-input-test", children: [
+      /* @__PURE__ */ l("div", { className: "caret", onClick: S, children: /* @__PURE__ */ l(q, {}) }),
+      d && g && u.length > 0 && /* @__PURE__ */ l(
+        "div",
+        {
+          className: `input-box
+        ${d ? "opened" : ""} 
+        ${h ? "disabled" : ""}`,
+          ref: f,
+          onClick: S,
+          children: /* @__PURE__ */ l("ul", { className: `options ${B ? "above" : ""}`, children: u.map((e, t) => /* @__PURE__ */ l(
+            "li",
+            {
+              onClick: () => b(e),
+              children: e.label
+            },
+            `${e.value}-${t}`
+          )) })
+        }
+      )
+    ] })
+  ] });
+};
+z.displayName = "SearchInput";
+export {
+  z as SearchInput
+};

package/dist/components/Ui/Skeleton/Skeleton.js

@@ -0,0 +1,28 @@
+import { jsx as i } from "react/jsx-runtime";
+import { c as r } from "../../../index-2QXL0WYc.js";
+import '../../../assets/Skeleton.css';const c = "_skeleton_yatxz_1", d = "_animated_yatxz_6", e = {
+  skeleton: c,
+  animated: d
+}, x = ({
+  width: t = "100%",
+  height: s = "100%",
+  borderRadius: a = "4px",
+  circle: o = !1,
+  animated: n = !0,
+  className: l,
+  style: m
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: r(e.skeleton, { [e.animated]: n }, l),
+    style: {
+      width: t,
+      height: s,
+      borderRadius: o ? "50%" : a,
+      ...m
+    }
+  }
+);
+export {
+  x as Skeleton
+};

package/dist/components/Ui/Skeleton/index.js

@@ -0,0 +1,4 @@
+import { Skeleton as r } from "./Skeleton.js";
+export {
+  r as Skeleton
+};

package/dist/components/Ui/Switch/Switch.js

@@ -0,0 +1,25 @@
+import { jsx as c, jsxs as t } from "react/jsx-runtime";
+import '../../../assets/Switch.css';const d = ({
+  label: s,
+  isDisabled: e,
+  isChecked: a = !1,
+  onChange: i,
+  name: l = "Switch"
+}) => /* @__PURE__ */ c("div", { className: "switch-container", children: /* @__PURE__ */ t("label", { className: `switch ${e ? "disabled" : ""}`, children: [
+  /* @__PURE__ */ c(
+    "input",
+    {
+      name: l,
+      type: "checkbox",
+      checked: a,
+      onChange: i,
+      disabled: e
+    }
+  ),
+  s,
+  /* @__PURE__ */ c("span", { className: "slider" })
+] }) });
+d.displayName = "Switch";
+export {
+  d as Switch
+};

package/dist/components/Ui/Switch/index.js

@@ -0,0 +1,4 @@
+import { Switch as t } from "./Switch.js";
+export {
+  t as Switch
+};

package/dist/components/Ui/Table/MemoizedRow/MemoizedRow.js

@@ -0,0 +1,79 @@
+import { jsx as l } from "react/jsx-runtime";
+import b from "react";
+import { g } from "../../../../_commonjsHelpers-C6fGbg64.js";
+import { c as s } from "../../../../index-2QXL0WYc.js";
+var p, c;
+function y() {
+  return c || (c = 1, p = function r(t, e) {
+    if (t === e) return !0;
+    if (t && e && typeof t == "object" && typeof e == "object") {
+      if (t.constructor !== e.constructor) return !1;
+      var o, n, u;
+      if (Array.isArray(t)) {
+        if (o = t.length, o != e.length) return !1;
+        for (n = o; n-- !== 0; )
+          if (!r(t[n], e[n])) return !1;
+        return !0;
+      }
+      if (t.constructor === RegExp) return t.source === e.source && t.flags === e.flags;
+      if (t.valueOf !== Object.prototype.valueOf) return t.valueOf() === e.valueOf();
+      if (t.toString !== Object.prototype.toString) return t.toString() === e.toString();
+      if (u = Object.keys(t), o = u.length, o !== Object.keys(e).length) return !1;
+      for (n = o; n-- !== 0; )
+        if (!Object.prototype.hasOwnProperty.call(e, u[n])) return !1;
+      for (n = o; n-- !== 0; ) {
+        var f = u[n];
+        if (!r(t[f], e[f])) return !1;
+      }
+      return !0;
+    }
+    return t !== t && e !== e;
+  }), p;
+}
+var O = y();
+const i = /* @__PURE__ */ g(O), S = b.memo(
+  ({
+    record: r,
+    columns: t,
+    rowKey: e,
+    rowClassName: o,
+    index: n,
+    stickyLeft: u,
+    onClickTr: f,
+    bordered: m
+  }) => {
+    const d = (a) => {
+      !a.target.closest("[data-no-bubble]") && f && f(r);
+    };
+    return /* @__PURE__ */ l(
+      "tr",
+      {
+        className: s(
+          "table-component__wrapper__table__tbody__tr",
+          o == null ? void 0 : o(r, n),
+          {
+            "table-component__wrapper__table__tbody__tr--hoverable": !!f
+          }
+        ),
+        onClick: d,
+        children: t.map((a, _) => /* @__PURE__ */ l(
+          "td",
+          {
+            className: s("table-component__wrapper__table__tbody__td", a.className, {
+              "table-component__wrapper__table__tbody__td--bordered": m,
+              "table-component__wrapper__table__tbody__td--sticky-left": u && _ === 0
+            }),
+            align: a.align,
+            children: a.render ? a.render(r[a.dataIndex], r) : String(r[a.dataIndex] ?? "")
+          },
+          `${a.key}-${_}`
+        ))
+      },
+      typeof e == "function" ? e(r) : String(r[e])
+    );
+  },
+  (r, t) => i(r.columns, t.columns) && i(r.record, t.record)
+);
+export {
+  S as MemoizedRow
+};

package/dist/components/Ui/Table/Table.js

@@ -0,0 +1,160 @@
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import U, { useState as N, useEffect as q, useCallback as d } from "react";
+import { c as o } from "../../../index-2QXL0WYc.js";
+import { IconCaretDown as w, IconCaretUp as F } from "../Icons/Icons.js";
+import { MemoizedRow as G } from "./MemoizedRow/MemoizedRow.js";
+import { Loader as H } from "../Loader/Loader.js";
+import '../../../assets/Table.css';const y = {
+  asc: /* @__PURE__ */ t(w, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
+  desc: /* @__PURE__ */ t(F, { viewBox: "0 -4 24 24", "aria-hidden": "true" }),
+  default: /* @__PURE__ */ t(w, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
+};
+function J({
+  columns: f,
+  dataSource: c,
+  rowKey: i,
+  tableClassName: v,
+  theadClassName: k,
+  trTheadClassNames: x,
+  thTheadClassNames: D,
+  tbodyClassName: I,
+  wrapperClassName: A,
+  borderBottom: u = !1,
+  stickyHeader: C = !1,
+  stickyLeft: h = !1,
+  bordered: l = !1,
+  rowClassName: j,
+  defaultSort: B,
+  onClickTr: m,
+  onClickTrHeader: R,
+  loading: S = !1
+}) {
+  const [T, b] = N(c), [n, z] = N(
+    B || null
+  );
+  q(() => {
+    b(c);
+  }, [c]);
+  const $ = d(
+    (e) => typeof i == "function" ? i(e) : typeof i == "string" && i in e ? String(e[i]) : "unknown",
+    [i]
+  ), g = d((e, a) => {
+    b((p) => [...p].sort((L, M) => {
+      const s = L[e], r = M[e];
+      return typeof s == "string" && typeof r == "string" ? a === "asc" ? s.localeCompare(r) : r.localeCompare(s) : typeof s == "number" && typeof r == "number" ? a === "asc" ? s - r : r - s : s instanceof Date && r instanceof Date ? a === "asc" ? s.getTime() - r.getTime() : r.getTime() - s.getTime() : 0;
+    })), z({ key: e, order: a });
+  }, []), E = d(
+    (e) => {
+      const p = (n == null ? void 0 : n.key) === e && n.order === "asc" ? "desc" : "asc";
+      g(e, p);
+    },
+    [n, g]
+  );
+  return /* @__PURE__ */ t("div", { className: o("table-component", A), children: /* @__PURE__ */ t(
+    "div",
+    {
+      className: o(
+        "table-component__wrapper",
+        {
+          bordered: l,
+          borderBottom: u
+        },
+        v
+      ),
+      children: /* @__PURE__ */ _(
+        "table",
+        {
+          className: o("table-component__wrapper__table", {
+            bordered: l,
+            borderBottom: u
+          }),
+          children: [
+            /* @__PURE__ */ t(
+              "thead",
+              {
+                className: o(
+                  "table-component__wrapper__table__thead",
+                  {
+                    stickyHeader: C
+                  },
+                  k
+                ),
+                children: /* @__PURE__ */ t(
+                  "tr",
+                  {
+                    className: o(
+                      "table-component__wrapper__table__thead__tr",
+                      x
+                    ),
+                    onClick: R,
+                    children: f.map((e, a) => /* @__PURE__ */ t(
+                      "th",
+                      {
+                        className: o(
+                          "table-component__wrapper__table__thead__th",
+                          {
+                            bordered: l,
+                            stickyLeft: h && a === 0
+                          },
+                          D
+                        ),
+                        style: {
+                          ...e.width ? { width: e.width } : {},
+                          ...e.align ? { textAlign: e.align } : {}
+                        },
+                        onClick: () => e.sorted && E(e.key),
+                        children: /* @__PURE__ */ _("div", { className: "th-content", children: [
+                          e.title,
+                          e.sorted && /* @__PURE__ */ t("span", { className: "sort-icon", children: (n == null ? void 0 : n.key) === e.key ? y[n.order] : y.default })
+                        ] })
+                      },
+                      `${e.key}-${a}`
+                    ))
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ _("tbody", { className: o("table-component__wrapper__table__tbody", I), children: [
+              T.map((e, a) => /* @__PURE__ */ t(
+                G,
+                {
+                  record: e,
+                  onClickTr: () => m == null ? void 0 : m(e),
+                  columns: f,
+                  rowKey: i,
+                  rowClassName: j,
+                  index: a,
+                  stickyLeft: h,
+                  bordered: l
+                },
+                $(e)
+              )),
+              S ? /* @__PURE__ */ t(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    backgroundColor: "rgba(255, 255, 255, 0.7)",
+                    zIndex: 10
+                  },
+                  children: /* @__PURE__ */ t(H, { className: "centered" })
+                }
+              ) : null
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
+}
+const Z = U.memo(J);
+export {
+  Z as Table
+};

package/dist/components/Ui/Table/TableTypes.js

@@ -0,0 +1 @@
+

package/dist/components/Ui/Table/index.js

@@ -0,0 +1,4 @@
+import { Table as r } from "./Table.js";
+export {
+  r as Table
+};

package/dist/components/Ui/Tabs/Tabs.js

@@ -0,0 +1,24 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useState as v } from "react";
+import '../../../assets/Tabs.css';const f = ({ items: s, defaultActiveKey: t, onChange: d }) => {
+  var c, b;
+  const [l, i] = v(t || ((c = s[0]) == null ? void 0 : c.key)), n = (a) => {
+    s.some((r) => r.key === a && !r.disabled) && (i(a), d == null || d(a));
+  };
+  return /* @__PURE__ */ o("div", { className: "tabs", children: [
+    /* @__PURE__ */ e("div", { className: "tabs-bar", children: s.map((a) => /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => !a.disabled && n(a.key),
+        className: `tab-button ${l === a.key ? "active" : ""} ${a.disabled ? "disabled" : ""}`,
+        disabled: a.disabled,
+        children: a.label
+      },
+      a.key
+    )) }),
+    /* @__PURE__ */ e("div", { className: "tabs-content", children: (b = s.find((a) => a.key === l)) == null ? void 0 : b.children })
+  ] });
+};
+export {
+  f as Tabs
+};

package/dist/components/Ui/Tabs/Tabs.stories.js

@@ -0,0 +1,67 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Tabs as t } from "./Tabs.js";
+const n = {
+  title: "UIKit/Tabs",
+  component: t,
+  tags: ["autodocs"],
+  argTypes: {
+    items: {
+      control: "object",
+      description: "Массив объектов вкладок {label: string, content: ReactNode}"
+    }
+  }
+}, s = {
+  args: {
+    items: [
+      {
+        key: "profile",
+        label: "Профиль",
+        children: /* @__PURE__ */ e("div", { children: "Информация о пользователе" })
+      },
+      {
+        key: "settings",
+        label: "Настройки",
+        children: /* @__PURE__ */ e("div", { children: "Параметры аккаунта" })
+      },
+      {
+        key: "notifications",
+        label: "Уведомления",
+        children: /* @__PURE__ */ e("div", { children: "Настройки уведомлений" })
+      }
+    ]
+  }
+}, a = {
+  args: {
+    items: [
+      {
+        key: "favorites",
+        label: "Избранное",
+        children: /* @__PURE__ */ e("div", { children: "Ваши избранные элементы" })
+      },
+      {
+        key: "projects",
+        label: "Проекты",
+        children: /* @__PURE__ */ e("div", { children: "Список ваших проектов" })
+      }
+    ]
+  },
+  decorators: [
+    (i) => /* @__PURE__ */ e("div", { style: { maxWidth: "500px", margin: "0 auto" }, children: /* @__PURE__ */ e(i, {}) })
+  ]
+}, c = {
+  args: {
+    items: [
+      {
+        key: "single",
+        label: "Единственная вкладка",
+        children: /* @__PURE__ */ e("div", { children: "Контент единственной вкладки" })
+      }
+    ]
+  }
+};
+export {
+  s as Basic,
+  c as SingleTab,
+  a as StyledTabs,
+  n as default
+};

package/dist/components/Ui/Tabs/index.js

@@ -0,0 +1,4 @@
+import { Tabs as a } from "./Tabs.js";
+export {
+  a as Tabs
+};

package/dist/components/Ui/TextInput/TextInput.js

@@ -0,0 +1,85 @@
+import { jsxs as m, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { forwardRef as g, useState as A } from "react";
+import { IconX as F, IconCheck as R, IconSearch as T, IconLock as X, IconAt as q } from "../Icons/Icons.js";
+import { Loader as B } from "../Loader/Loader.js";
+import '../../../assets/TextInput.css';const D = g(
+  ({
+    label: t,
+    placeholder: h = "",
+    value: n,
+    // Значение из пропсов
+    type: f = "text",
+    name: I = "TextInput",
+    id: v,
+    isDisabled: x = !1,
+    iconType: c,
+    errorMessage: l = !1,
+    hasError: N = !1,
+    onChange: a,
+    // Обработчик из пропсов
+    className: p,
+    isClearable: r,
+    isLoading: i,
+    onFocus: k,
+    onKeyDown: z,
+    onBlur: $
+  }, w) => {
+    const [C, o] = A(""), s = n !== void 0, u = s ? n : C, j = (d) => {
+      const V = d.target.value;
+      s || o(V), a && a(d);
+    }, L = () => {
+      s && a ? a({ target: { value: "" } }) : o("");
+    }, S = () => {
+      switch (c) {
+        case "email":
+          return /* @__PURE__ */ e(q, { className: "icon", size: 20 });
+        case "password":
+          return /* @__PURE__ */ e(X, { className: "icon", size: 20 });
+        case "search":
+          return /* @__PURE__ */ e(T, { className: "icon", size: 20 });
+        case "checkmark":
+          return /* @__PURE__ */ e(R, { className: "icon", size: 20 });
+        default:
+          return /* @__PURE__ */ e(b, {});
+      }
+    };
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        className: `text-input 
+        ${p} 
+        ${N && "invalid"}
+        ${r && "clearable"}`,
+        children: [
+          t && /* @__PURE__ */ e("label", { children: t }),
+          /* @__PURE__ */ m("div", { className: `input-container ${c ? `has-icon icon-${c}` : ""}`, children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                onBlur: $,
+                type: f,
+                value: u,
+                onChange: j,
+                placeholder: h,
+                name: I,
+                id: v,
+                disabled: x,
+                ref: w,
+                onFocus: k,
+                onKeyDown: z
+              }
+            ),
+            S(),
+            r && u && !i && /* @__PURE__ */ e("div", { className: "clear-value", onClick: L, children: /* @__PURE__ */ e(F, { size: 20 }) }),
+            i && /* @__PURE__ */ e(B, {})
+          ] }),
+          l && /* @__PURE__ */ e("span", { className: "helper-text", children: l })
+        ]
+      }
+    );
+  }
+);
+D.displayName = "TextInput";
+export {
+  D as TextInput
+};