triafly-ui-kit 1.0.23 → 1.0.24

package/dist/components/Ui/DatePicker/DatePicker.js

@@ -0,0 +1,175 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { useState as w, useRef as $, useEffect as N } from "react";
+import { IconCalendarBlank as A, IconCaretUpDown as G, IconCaretLeft as I, IconCaretRight as S } from "../Icons/Icons.js";
+import '../../../assets/DatePicker.css';const H = [
+  "Январь",
+  "Февраль",
+  "Март",
+  "Апрель",
+  "Май",
+  "Июнь",
+  "Июль",
+  "Август",
+  "Сентябрь",
+  "Октябрь",
+  "Ноябрь",
+  "Декабрь"
+], X = ({
+  name: O = "date",
+  value: r = null,
+  onChange: x = () => {
+  },
+  placeholder: L = "Любая дата",
+  className: R = "",
+  inputClassName: T = "",
+  calendarClassName: E = "",
+  minDate: M,
+  maxDate: v
+}) => {
+  const [c, k] = w(r), [d, u] = w(r ? new Date(r) : /* @__PURE__ */ new Date()), [F, g] = w(!1), m = $(null), D = $(null), j = (t) => {
+    const o = t.getDate(), e = t.getMonth() + 1, p = t.getFullYear();
+    return `${o}-${e < 10 ? "0" + e : e}-${p}`;
+  };
+  N(() => {
+    k(r), r && u(new Date(r));
+  }, [r]), N(() => {
+    D.current && (D.current.value = c ? c.toISOString().split("T")[0] : "");
+  }, [c]), N(() => {
+    const t = (o) => {
+      m.current && !m.current.contains(o.target) && g(!1);
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, []);
+  const y = (t, o = 0) => {
+    const e = new Date(
+      d.getFullYear(),
+      d.getMonth() + o,
+      t
+    );
+    k(e), x(e), u(new Date(e)), g(!1);
+  }, Y = (t) => {
+    u((o) => {
+      const e = new Date(o);
+      return e.setMonth(e.getMonth() + t), e;
+    });
+  }, b = (t) => {
+    u((o) => {
+      const e = new Date(o);
+      return e.setFullYear(e.getFullYear() + t), e;
+    });
+  }, P = () => {
+    const t = d.getFullYear(), o = d.getMonth(), e = /* @__PURE__ */ new Date(), p = new Date(t, o, 1), B = new Date(t, o + 1, 0).getDate(), U = p.getDay() || 7, W = new Date(t, o, 0).getDate(), q = U - 1, h = [];
+    for (let a = q; a > 0; a--) {
+      const s = W - a + 1, l = new Date(t, o - 1, s), f = l.getDate() === e.getDate() && l.getMonth() === e.getMonth() && l.getFullYear() === e.getFullYear();
+      h.push(
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `day other-month ${f ? "today" : ""}`,
+            onClick: () => y(s, -1),
+            children: s
+          },
+          `prev-${s}`
+        )
+      );
+    }
+    for (let a = 1; a <= B; a++) {
+      const s = new Date(t, o, a), l = c && s.getDate() === c.getDate() && s.getMonth() === c.getMonth() && s.getFullYear() === c.getFullYear(), f = s.getDate() === e.getDate() && s.getMonth() === e.getMonth() && s.getFullYear() === e.getFullYear(), C = M && s < M || v && s > v;
+      h.push(
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `day ${l ? "selected" : ""} ${C ? "disabled" : ""} ${f ? "today" : ""}`,
+            onClick: () => !C && y(a),
+            children: a
+          },
+          `current-${a}`
+        )
+      );
+    }
+    const z = 42 - h.length;
+    for (let a = 1; a <= z; a++) {
+      const s = new Date(t, o + 1, a), l = s.getDate() === e.getDate() && s.getMonth() === e.getMonth() && s.getFullYear() === e.getFullYear();
+      h.push(
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `day other-month ${l ? "today" : ""}`,
+            onClick: () => y(a, 1),
+            children: a
+          },
+          `next-${a}`
+        )
+      );
+    }
+    return h;
+  };
+  return /* @__PURE__ */ i("div", { className: `datepicker ${R}`, ref: m, children: [
+    /* @__PURE__ */ n(
+      "input",
+      {
+        type: "date",
+        ref: D,
+        name: O,
+        className: "native-input",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: `datepicker-input ${T}`, onClick: () => g(!F), children: [
+      /* @__PURE__ */ n(A, {}),
+      /* @__PURE__ */ n("span", { className: "placeholder", children: c ? j(c) : L }),
+      /* @__PURE__ */ n(G, { className: "caret" })
+    ] }),
+    F && /* @__PURE__ */ i("div", { className: `datepicker-calendar ${E}`, children: [
+      /* @__PURE__ */ i("div", { className: "calendar-controls", children: [
+        /* @__PURE__ */ i("div", { className: "month-control", children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "nav-button",
+              onClick: () => Y(-1),
+              "aria-label": "Предыдущий месяц",
+              children: /* @__PURE__ */ n(I, {})
+            }
+          ),
+          /* @__PURE__ */ n("span", { className: "current-month", children: H[d.getMonth()] }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "nav-button",
+              onClick: () => Y(1),
+              "aria-label": "Следующий месяц",
+              children: /* @__PURE__ */ n(S, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { className: "year-control", children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "nav-button",
+              onClick: () => b(-1),
+              "aria-label": "Предыдущий год",
+              children: /* @__PURE__ */ n(I, {})
+            }
+          ),
+          /* @__PURE__ */ n("span", { className: "current-year", children: d.getFullYear() }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "nav-button",
+              onClick: () => b(1),
+              "aria-label": "Следующий год",
+              children: /* @__PURE__ */ n(S, {})
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "calendar-weekdays", children: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"].map((t) => /* @__PURE__ */ n("div", { className: "weekday", children: t }, t)) }),
+      /* @__PURE__ */ n("div", { className: "calendar-days", children: P() })
+    ] })
+  ] });
+};
+export {
+  X as DatePicker
+};

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

@@ -0,0 +1,114 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import l from "react";
+import { DatePicker as r } from "./DatePicker.js";
+const m = {
+  title: "UIKit/DatePicker",
+  component: r,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "date",
+      description: "Выбранная дата (timestamp)"
+    },
+    onChange: {
+      action: "dateChanged",
+      description: "Обработчик изменения даты"
+    },
+    className: {
+      control: "text",
+      description: "Класс для основного контейнера"
+    },
+    inputClassName: {
+      control: "text",
+      description: "Класс для кастомного инпута"
+    },
+    calendarClassName: {
+      control: "text",
+      description: "Класс для календаря"
+    },
+    placeholder: {
+      control: "text",
+      description: "Текст плейсхолдера"
+    },
+    minDate: {
+      control: "date",
+      description: "Минимальная доступная дата"
+    },
+    maxDate: {
+      control: "date",
+      description: "Максимальная доступная дата"
+    }
+  }
+}, u = {
+  args: {
+    placeholder: "Любая дата"
+  }
+}, x = {
+  args: {
+    value: new Date(2023, 5, 15),
+    placeholder: "Выберите дату"
+  }
+}, h = {
+  args: {
+    minDate: new Date(2023, 0, 1),
+    maxDate: new Date(2023, 11, 31)
+  }
+}, g = {
+  args: {
+    inputClassName: "custom-input",
+    calendarClassName: "custom-calendar"
+  },
+  decorators: [
+    (o) => /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ e("style", { children: `
+          .custom-input {
+            border: 2px solid #6366f1;
+            background-color: #f0f0ff;
+            padding: 12px;
+            border-radius: 8px;
+          }
+          .custom-calendar {
+            border: 2px solid #6366f1;
+            box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
+          }
+          .custom-calendar .day.selected {
+            background-color: #6366f1;
+          }
+        ` }),
+      /* @__PURE__ */ e(o, {})
+    ] })
+  ]
+}, D = {
+  render: function() {
+    const [t, n] = l.useState(null);
+    return /* @__PURE__ */ a("div", { style: { maxWidth: "300px" }, children: [
+      /* @__PURE__ */ e(r, { value: t, onChange: n, placeholder: "Контролируемый выбор" }),
+      /* @__PURE__ */ a("div", { style: { marginTop: "16px", fontSize: "14px" }, children: [
+        "Выбрано: ",
+        t ? t.toLocaleDateString("ru-RU") : "дата не выбрана"
+      ] })
+    ] });
+  }
+}, f = {
+  render: function() {
+    const [t, n] = l.useState(null);
+    return /* @__PURE__ */ a("form", { onSubmit: (i) => {
+      i.preventDefault(), alert(`Выбрана дата: ${t == null ? void 0 : t.toLocaleDateString("ru-RU")}`);
+    }, style: { maxWidth: "300px" }, children: [
+      /* @__PURE__ */ a("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ e("label", { style: { display: "block", marginBottom: "4px" }, children: "Дата события:" }),
+        /* @__PURE__ */ e(r, { name: "eventDate", value: t, onChange: n })
+      ] }),
+      /* @__PURE__ */ e("button", { type: "submit", children: "Отправить" })
+    ] });
+  }
+};
+export {
+  D as Controlled,
+  g as CustomStyled,
+  u as Default,
+  f as InForm,
+  h as WithDateRange,
+  x as WithInitialDate,
+  m as default
+};

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

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

package/dist/components/Ui/DropdownInput/DropdownInput.js

@@ -0,0 +1,91 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { useState as m, useRef as O, useEffect as g } from "react";
+import { IconCaretUpDown as E, IconWarningCircle as P } from "../Icons/Icons.js";
+import '../../../assets/DropdownInput.css';const j = ({
+  label: v,
+  options: i,
+  value: o,
+  onChange: f,
+  name: C = "DropdownInput",
+  placeholder: r,
+  errorMessage: d = !1,
+  isDisabled: h = !1,
+  className: k = ""
+}) => {
+  var w;
+  const [u, p] = m(!1), [s, N] = m(o || ""), [I, x] = m(!1), t = O(null);
+  g(() => {
+    const e = (l) => {
+      t.current && !t.current.contains(l.target) && p(!1);
+    };
+    return document.addEventListener("click", e), () => {
+      document.removeEventListener("click", e);
+    };
+  }, []), g(() => {
+    N(o || "");
+  }, [o]);
+  const b = (e) => {
+    N(e), p(!1), f && f(e);
+  }, $ = (e) => {
+    var l;
+    if (e.stopPropagation(), !u) {
+      const a = (l = t.current) == null ? void 0 : l.getBoundingClientRect(), D = window.innerHeight - ((a == null ? void 0 : a.bottom) || 0);
+      x(D < 304);
+    }
+    p((a) => !a);
+  };
+  return /* @__PURE__ */ c("div", { className: `dropdown-input ${k}`, ref: t, children: [
+    /* @__PURE__ */ c(
+      "select",
+      {
+        name: C,
+        value: s,
+        onChange: (e) => b(e.target.value),
+        className: "dropdown-input__native",
+        disabled: h,
+        children: [
+          /* @__PURE__ */ n("option", { value: "", disabled: !0, children: r }),
+          i.map((e) => /* @__PURE__ */ n("option", { value: e.value, children: e.label }, e.value))
+        ]
+      }
+    ),
+    v && /* @__PURE__ */ n("label", { children: v }),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: `input-box 
+          ${u ? "opened" : ""} 
+          ${h ? "disabled" : ""} 
+          ${d ? "invalid" : ""}`,
+        onClick: $,
+        children: [
+          /* @__PURE__ */ n("span", { className: "input-value", children: s === void 0 ? (
+            // Если значение не передано
+            /* @__PURE__ */ n("span", { className: "placeholder", children: r })
+          ) : ((w = i.find((e) => e.value === s)) == null ? void 0 : w.label) || /* @__PURE__ */ n("span", { className: "placeholder", children: r }) }),
+          /* @__PURE__ */ n(E, { className: "caret" }),
+          u && /* @__PURE__ */ n("ul", { className: `options ${I ? "above" : ""}`, children: i.map((e) => /* @__PURE__ */ n(
+            "li",
+            {
+              onClick: (l) => {
+                l.stopPropagation(), b(e.value);
+              },
+              className: s === e.value ? "option--selected" : "",
+              children: e.label
+            },
+            e.value
+          )) })
+        ]
+      }
+    ),
+    d && /* @__PURE__ */ c("span", { className: "helper-text error", children: [
+      /* @__PURE__ */ n(P, { className: "icon", size: 12 }),
+      d
+    ] })
+  ] });
+};
+j.displayName = "DropdownInput";
+export {
+  j as DropdownInput,
+  j as default
+};

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

@@ -0,0 +1,77 @@
+import { jsx as r } from "react/jsx-runtime";
+import s from "react";
+import { DropdownInput as a } from "./DropdownInput.js";
+const h = {
+  title: "UIKit/DropdownInput",
+  component: a,
+  parameters: { layout: "centered" },
+  argTypes: {
+    label: { control: "text" },
+    name: { control: "text" },
+    options: { control: "object" },
+    placeholder: { control: "text" },
+    value: { control: "text" },
+    errorMessage: { control: "text" },
+    isDisabled: { control: "boolean" }
+  }
+}, e = (l) => {
+  const [o, t] = s.useState(l.value || "");
+  return /* @__PURE__ */ r(a, { ...l, value: o, onChange: (n) => {
+    t(n);
+  } });
+}, d = e.bind({});
+d.args = {
+  label: "Выберите опцию",
+  name: "dropdown",
+  options: [
+    { value: "1", label: "Опция 1" },
+    { value: "2", label: "Опция 2" },
+    { value: "3", label: "Опция 3" }
+  ],
+  placeholder: "Выберите..."
+};
+const c = e.bind({});
+c.args = {
+  label: "Выберите опцию",
+  name: "dropdown",
+  options: [
+    { value: "1", label: "Опция 1" },
+    { value: "2", label: "Опция 2" },
+    { value: "3", label: "Опция 3" }
+  ],
+  placeholder: "Выберите...",
+  value: "2"
+  // Предустановленное значение
+};
+const u = e.bind({});
+u.args = {
+  label: "Выберите опцию",
+  name: "dropdown",
+  options: [
+    { value: "1", label: "Опция 1" },
+    { value: "2", label: "Опция 2" },
+    { value: "3", label: "Опция 3" }
+  ],
+  placeholder: "Выберите...",
+  isDisabled: !0
+  // Отключаем селект
+};
+const b = e.bind({});
+b.args = {
+  label: "Выберите опцию",
+  name: "dropdown",
+  options: [
+    { value: "1", label: "Опция 1" },
+    { value: "2", label: "Опция 2" },
+    { value: "3", label: "Опция 3" }
+  ],
+  placeholder: "Выберите...",
+  errorMessage: "Пожалуйста, выберите опцию."
+};
+export {
+  d as Default,
+  u as Disabled,
+  b as WithErrorMessage,
+  c as WithSelectedValue,
+  h as default
+};

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

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

package/dist/components/Ui/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,83 @@
+import { jsxs as R, jsx as h } from "react/jsx-runtime";
+import { useState as a, useRef as b, useLayoutEffect as C } from "react";
+import '../../../assets/DropdownMenu.css';const O = ({
+  content: m,
+  horizontalPosition: s = "right",
+  verticalPosition: c = "bottom",
+  iconTrigger: N
+}) => {
+  const [d, o] = a(!1), [j, n] = a(s), [H, l] = a(c), f = b(null), u = b(null);
+  C(() => {
+    if (d && f.current && u.current) {
+      const e = u.current.getBoundingClientRect(), t = f.current.getBoundingClientRect(), r = window.innerHeight, i = window.innerWidth;
+      if (c === "bottom" && e.bottom + t.height > r ? l("top") : c === "top" && e.top - t.height < 0 ? l("bottom") : l(c), s === "left" && e.left + t.width > i)
+        n("right");
+      else if (s === "right" && e.right - t.width < 0)
+        n("left");
+      else if (s === "center") {
+        const g = e.left + e.width / 2 - t.width / 2;
+        g < 0 ? n("left") : g + t.width > i ? n("right") : n("center");
+      } else
+        n(s);
+    }
+  }, [d, s, c]), C(() => {
+    const e = (t) => {
+      f.current && !f.current.contains(t.target) && u.current && !u.current.contains(t.target) && o(!1);
+    };
+    return d && document.addEventListener("click", e), () => {
+      document.removeEventListener("click", e);
+    };
+  }, [d]);
+  const k = () => {
+    var e, t;
+    if (!d) {
+      const r = (e = u.current) == null ? void 0 : e.getBoundingClientRect(), i = (t = f.current) == null ? void 0 : t.getBoundingClientRect();
+      if (r && i) {
+        const g = window.innerHeight, w = window.innerWidth;
+        if (c === "bottom" && r.bottom + i.height > g ? l("top") : c === "top" && r.top - i.height < 0 ? l("bottom") : l(c), s === "left" && r.left + i.width > w)
+          n("right");
+        else if (s === "right" && r.right - i.width < 0)
+          n("left");
+        else if (s === "center") {
+          const p = r.left + r.width / 2 - i.width / 2;
+          p < 0 ? n("left") : p + i.width > w ? n("right") : n("center");
+        } else
+          n(s);
+      }
+    }
+    o(!d);
+  }, x = (e) => {
+    e && e(), o(!1);
+  };
+  return /* @__PURE__ */ R("div", { className: `dropdowm-menu ${d ? "open" : ""}`, children: [
+    /* @__PURE__ */ h("div", { className: "menu-trigger", onClick: k, ref: u, children: N || /* @__PURE__ */ h("div", { className: "dots" }) }),
+    /* @__PURE__ */ h("div", { className: "fader" }),
+    /* @__PURE__ */ h(
+      "ul",
+      {
+        className: "menu-list",
+        "data-x-fit": j,
+        "data-y-fit": H,
+        ref: f,
+        children: m == null ? void 0 : m.map(({ icon: e, isDanger: t, title: r, onClick: i }, g) => /* @__PURE__ */ R(
+          "li",
+          {
+            onClick: () => {
+              i && x(i);
+            },
+            className: `menu-item ${t ? "danger" : ""}`,
+            children: [
+              e,
+              /* @__PURE__ */ h("span", { className: "label", children: r })
+            ]
+          },
+          g
+        ))
+      }
+    )
+  ] });
+};
+export {
+  O as DropdownMenu,
+  O as default
+};

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

@@ -0,0 +1,50 @@
+import { jsx as o } from "react/jsx-runtime";
+import { IconEye as t, IconRoleX as n, IconTrash as i } from "../Icons/Icons.js";
+import { DropdownMenu as e } from "./DropdownMenu.js";
+const l = {
+  title: "UIKit/DropdownMenu",
+  component: e,
+  tags: ["autodocs"],
+  // Автоматическая генерация документации
+  argTypes: {
+    content: {
+      control: "object",
+      // Позволяет редактировать content в интерфейсе Storybook
+      description: "Массив элементов меню"
+    },
+    horizontalPosition: {
+      control: "select",
+      options: ["left", "center", "right"],
+      description: "Позиционирование меню относительно триггера"
+    },
+    verticalPosition: {
+      control: "select",
+      options: ["top", "bottom"],
+      description: "Позиционирование меню относительно триггера"
+    }
+  }
+}, a = {
+  args: {
+    content: [
+      {
+        icon: /* @__PURE__ */ o(t, {}),
+        title: "Просмотр"
+      },
+      {
+        icon: /* @__PURE__ */ o(n, {}),
+        title: "Назначить другую роль"
+      },
+      {
+        icon: /* @__PURE__ */ o(i, {}),
+        title: "Удалить",
+        isDanger: !0
+      }
+    ],
+    horizontalPosition: "left",
+    verticalPosition: "bottom"
+  }
+};
+export {
+  a as Default,
+  l as default
+};

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

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