@sberbusiness/triplex-next 0.1.4 → 0.1.5

package/README.md

@@ -0,0 +1,145 @@
+# Triplex-next
+
+## 🚀 Установка
+
+```bash
+npm install triplex-next
+```
+
+## 🔤 Шрифты
+
+Компоненты Typography используют шрифты SBSansDisplay и SBSansText. Для корректного отображения необходимо подключить шрифты в вашем проекте:
+
+```css
+@font-face {
+    font-family: 'SBSansDisplay';
+    src: url('node_modules/@sberbusiness/triplex-next/public/assets/fonts/SBSansDisplay-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SBSansDisplayMedium';
+    src: url('node_modules/@sberbusiness/triplex-next/public/assets/fonts/SBSansDisplay-Medium.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SBSansDisplaySemibold';
+    src: url('node_modules/@sberbusiness/triplex-next/public/assets/fonts/SBSansDisplay-SemiBold.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SBSansDisplayBold';
+    src: url('node_modules/@sberbusiness/triplex-next/public/assets/fonts/SBSansDisplay-Bold.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SBSansText';
+    src: url('node_modules/@sberbusiness/triplex-next/public/assets/fonts/SBSansText-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SBSansTextSemibold';
+    src: url('node_modules/@sberbusiness/triplex-next/public/assets/fonts/SBSansText-Semibold.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+```
+
+
+---
+
+## 📁 Структура
+
+```
+src/
+  components/
+    MyComponent/
+      MyComponent.tsx
+      MyComponent.module.css
+      index.ts
+      __tests__/MyComponent.test.tsx
+```
+
+> Каждый компонент должен иметь собственный `index.ts`, чтобы поддерживать генерацию `exports` в `package.json`.
+
+---
+
+## 📜 Скрипты
+
+| Скрипт | Назначение |
+|-------|------------|
+| `npm run build` | Сборка компонентов и `style.css` в `dist/` |
+| `npm run storybook` | Локальный просмотр компонентов |
+| `npm run storybook:build` | Сборка Storybook в `storybook-static/` |
+
+---
+
+## 🧱 Добавление нового компонента
+
+1. Создай папку:
+
+```bash
+src/components/Alert/
+```
+
+2. Добавь файлы:
+
+```
+Alert.tsx
+styles/Alert.module.less
+index.ts         ← обязательный!
+```
+
+3. Зарегистрируй в `src/index.ts`:
+
+```ts
+export * from './components/Alert';
+```
+
+---
+## 🧪 Тестирование
+
+Проект использует [Vitest](https://vitest.dev/) для юнит-тестирования и [Testing Library](https://testing-library.com/docs/react-testing-library/intro/) для тестирования компонентов.
+
+Chromatic для визуального тестирования Storybook-компонентов.
+
+🧪 Как работает
+	•	При каждом пуше в ветки main или release-*, Chromatic запускает визуальные тесты.
+	•	Chromatic делает скриншоты всех stories, сравнивает с предыдущими, и показывает отличия (если есть).
+	•	✅ Если изменений нет — билд считается успешным.
+	•	🔍 Если есть изменения — нужен review и approval в интерфейсе Chromatic.
+
+⸻
+
+🔔 Уведомления
+	•	Chromatic отправляет нотификации в Telegram (через Webhook), если:
+	•	билд прошёл ✅
+	•	или есть изменения/ошибки ❗
+
+⸻
+
+🚀 Как одобрить изменения
+	1.	Перейди в свой Chromatic проект
+	2.	Найди последний билд в списке.
+	3.	Нажми Review changes
+	4.	Просмотри отличия → Approve (если всё ок)
+
+
+### Как запустить тесты локально
+
+```bash
+npm run test-e2e         # Запуск e2e тестов
+npm run test-unit         # Запуск unit тестов
+npm run test-unit:watch   # Запуск unit тестов в режиме наблюдения
+npm run test-unit:coverage # Запуск unit тестов и генерация отчёта о покрытии
+npm run chromatic # Запуск скриншот тестов. В директории должен быть файл .env.local с ключем CHROMATIC_PROJECT_TOKEN=***
+```

package/chunks/AlertProcessSpoiler-Dz7CKApv.js

@@ -0,0 +1,39 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useContext as d, useEffect as i } from "react";
+import { CaretdownStrokeSrvIcon16 as _ } from "@sberbusiness/icons-next";
+import { ButtonIcon as m } from "../components/Button/ButtonIcon.js";
+import { AlertProcessContext as x } from "../components/Alert/AlertProcess/AlertProcessContext.js";
+import { c as n } from "./vendor-CF2m175I.js";
+const y = "alertProcess__d44bde98", f = "withSpoiler__4a26c9e1", u = "themeIcon__eadc94ae", T = "alertTypeError__ac3dd7db", B = "alertTypeInfo__a8f13265", C = "alertTypeWarning__6d636865", S = "alertTypeSystem__05afbad8", h = "alertTypeFeature__d0a560c7", b = "alertProcessContentBlock__06451739", I = "closeButton__f5534704", P = "expandableContent__5a56a04b", g = "expanded__cf466297", k = "expandButton__b642ccef", e = {
+  alertProcess: y,
+  withSpoiler: f,
+  themeIcon: u,
+  alertTypeError: T,
+  alertTypeInfo: B,
+  alertTypeWarning: C,
+  alertTypeSystem: S,
+  alertTypeFeature: h,
+  alertProcessContentBlock: b,
+  closeButton: I,
+  expandableContent: P,
+  expanded: g,
+  expandButton: k
+}, v = ({ children: s, open: r, onOpen: o, ...l }) => {
+  const { setHasSpoiler: a } = d(x);
+  i(() => (a(!0), () => {
+    a(!1);
+  }), [a]);
+  const c = () => {
+    o == null || o(!r);
+  };
+  return /* @__PURE__ */ p("div", { className: e.spoiler, children: [
+    /* @__PURE__ */ t("div", { className: n(e.expandableContent, { [e.expanded]: r }), ...l, children: s }),
+    /* @__PURE__ */ t("div", { className: n(e.expandButton, { [e.expanded]: r }), children: /* @__PURE__ */ t(m, { onClick: c, children: /* @__PURE__ */ t(_, { paletteIndex: 5 }) }) })
+  ] });
+};
+v.displayName = "AlertProcessSpoiler";
+export {
+  v as A,
+  e as s
+};
+//# sourceMappingURL=AlertProcessSpoiler-Dz7CKApv.js.map

package/chunks/Card.module-BVAy3tJd.js

@@ -0,0 +1,17 @@
+const n = "card__7710d43d", d = "roundingMD__dad36467", a = "roundingSM__f93a5862", o = "general__43b815ca", c = "secondary__0409ea98", r = "cardMedia__55dba279", t = "cardContent__901b6360", e = "paddingMD__e9fdc375", _ = "paddingSM__adb4d26b", s = "cardContentHeader__a0dafbc4", g = "cardContentFooter__ba241c99", i = {
+  card: n,
+  roundingMD: d,
+  roundingSM: a,
+  general: o,
+  secondary: c,
+  cardMedia: r,
+  cardContent: t,
+  paddingMD: e,
+  paddingSM: _,
+  cardContentHeader: s,
+  cardContentFooter: g
+};
+export {
+  i as c
+};
+//# sourceMappingURL=Card.module-BVAy3tJd.js.map

package/chunks/DropdownListItem-CwqothNf.js

@@ -0,0 +1,56 @@
+import { jsx as E } from "react/jsx-runtime";
+import c, { useEffect as u } from "react";
+import { EVENT_KEY_CODES as m } from "../utils/keyboard.js";
+import { c as v } from "./vendor-CF2m175I.js";
+const D = "dropdownList__fb7ca20e", y = "dropdownListItem__74e4464f", I = "active__93f841b9", l = "selected__b9f8ab19", n = {
+  dropdownList: D,
+  dropdownListItem: y,
+  active: I,
+  selected: l,
+  "dropdownList-sm": "dropdownList-sm__ac5911e1",
+  "dropdownList-md": "dropdownList-md__c6817f72",
+  "dropdownList-lg": "dropdownList-lg__a32d313e"
+}, N = [m.SPACE, m.ENTER], b = c.forwardRef(
+  ({
+    active: d,
+    keyCodesForSelection: p = N,
+    children: s,
+    className: a,
+    onClick: e,
+    onSelect: o,
+    selected: i,
+    ..._
+  }, w) => {
+    const r = (t) => {
+      const { keyCode: f } = t;
+      p.includes(f) && (t.preventDefault(), o == null || o());
+    }, L = (t) => {
+      o == null || o(), e == null || e(t);
+    };
+    return u(() => (d ? document.addEventListener("keydown", r) : document.removeEventListener("keydown", r), () => {
+      document.removeEventListener("keydown", r);
+    }), [d]), /* @__PURE__ */ E(
+      "div",
+      {
+        className: v(
+          n.dropdownListItem,
+          { [n.active]: !!d, [n.selected]: !!i },
+          a
+        ),
+        title: typeof s == "string" ? s : void 0,
+        role: "option",
+        "aria-selected": !!i,
+        ..._,
+        onClick: L,
+        ref: w,
+        children: s
+      }
+    );
+  }
+);
+b.displayName = "DropdownListItem";
+export {
+  b as D,
+  n as s
+};
+//# sourceMappingURL=DropdownListItem-CwqothNf.js.map

package/chunks/DropdownMobile.module-zLTfuu5W.js

@@ -0,0 +1,19 @@
+const o = "dropdownMobileWrapper__9bb0abe7", d = "dropdownMobileBackdrop__d6b4d0fb", e = "closing__52d997c6", n = "opening__61247809", r = "opened__c095f986", p = "dropdownMobile__a211aee3", l = "dropdownMobileHeader__0e9ddb4d", b = "dropdownMobileContent__b2f7400c", i = "dropdownMobileFooter__537953d5", t = "dropdownMobileListItem__8d3c00ee", s = "selected__b9f8ab19", w = "dropdownMobileClose__8f6f2200", c = "dropdownMobileBodyOverflow__7c00214d", M = {
+  dropdownMobileWrapper: o,
+  dropdownMobileBackdrop: d,
+  closing: e,
+  opening: n,
+  opened: r,
+  dropdownMobile: p,
+  dropdownMobileHeader: l,
+  dropdownMobileContent: b,
+  dropdownMobileFooter: i,
+  dropdownMobileListItem: t,
+  selected: s,
+  dropdownMobileClose: w,
+  dropdownMobileBodyOverflow: c
+};
+export {
+  M as s
+};
+//# sourceMappingURL=DropdownMobile.module-zLTfuu5W.js.map

package/chunks/Footer.module-C8ediOIN.js

@@ -0,0 +1,11 @@
+const o = "footer__87bdfdd7", t = "sticky__81ad13fb", e = "footerDescription__92f32173", r = "footerDescriptionContent__7bc35238", s = "footerDescriptionControls__e3211d43", n = {
+  footer: o,
+  sticky: t,
+  footerDescription: e,
+  footerDescriptionContent: r,
+  footerDescriptionControls: s
+};
+export {
+  n as s
+};
+//# sourceMappingURL=Footer.module-C8ediOIN.js.map

package/chunks/FormFieldInput-Cmc0beZ5.js

@@ -0,0 +1,62 @@
+import { jsx as R } from "react/jsx-runtime";
+import g, { useContext as j, useRef as y, useEffect as c } from "react";
+import { FormFieldContext as A } from "../components/FormField/FormFieldContext.js";
+import { c as C, j as E } from "./vendor-CF2m175I.js";
+const S = "formFieldInput__fa0ed219", N = {
+  formFieldInput: S,
+  "autofill-applied-hook": "autofill-applied-hook__cb49e86f",
+  "autofill-cancelled-hook": "autofill-cancelled-hook__998cf73e",
+  "size-sm": "size-sm__01125b29",
+  "size-md": "size-md__6784c995",
+  "size-lg": "size-lg__88b39b26"
+}, W = g.forwardRef((d, u) => {
+  const { className: k, id: t, onAnimationStart: a, onBlur: i, onFocus: n, placeholder: m, value: s, ...x } = d, { render: f, ...b } = d, { focused: B, disabled: P, setFocused: p, setId: r, setValueExist: l, size: F } = j(A), _ = C(N.formFieldInput, k, N[`size-${F}`]), o = y(t || E("input_"));
+  c(() => {
+    r(o.current);
+  }, []), c(() => {
+    t && (o.current = t, r(o.current));
+  }, [t, r]), c(() => {
+    l(!!s);
+  }, [l, s]);
+  const h = (e) => {
+    p(!1), i == null || i(e);
+  }, I = (e) => {
+    p(!0), n == null || n(e);
+  }, z = (e) => {
+    e.animationName.startsWith("autofill-applied-hook") ? l(!0) : e.animationName.startsWith("autofill-cancelled-hook") && !s && l(!1), a == null || a(e);
+  };
+  return f ? f(
+    {
+      ...b,
+      className: _,
+      id: o.current,
+      onAnimationStart: z,
+      onBlur: h,
+      onFocus: I,
+      /* Когда элемент не в фокусе, вместо placeholder показывается Label. */
+      placeholder: B ? m : " ",
+      size: F
+    },
+    u
+  ) : /* @__PURE__ */ R(
+    "input",
+    {
+      ...x,
+      className: _,
+      disabled: P,
+      id: o.current,
+      onAnimationStart: z,
+      onFocus: I,
+      onBlur: h,
+      value: s,
+      placeholder: m,
+      ref: u
+    }
+  );
+});
+W.displayName = "FormFieldInput";
+export {
+  W as F,
+  N as s
+};
+//# sourceMappingURL=FormFieldInput-Cmc0beZ5.js.map

package/chunks/HeaderLayoutSidebar.module-DUesMumi.js

@@ -0,0 +1,9 @@
+const e = "headerLayoutSidebar__0605f064", a = "headerLayoutSidebarContent__7517b24a", d = "headerLayoutSidebarSidebar__a6d91dca", r = {
+  headerLayoutSidebar: e,
+  headerLayoutSidebarContent: a,
+  headerLayoutSidebarSidebar: d
+};
+export {
+  r as s
+};
+//# sourceMappingURL=HeaderLayoutSidebar.module-DUesMumi.js.map

package/chunks/HeaderTabs.module-B8b_Vmmv.js

@@ -0,0 +1,9 @@
+const e = "headerTabs__dc4008d7", a = "headerTabsContent__b39ffbfd", s = "headerTabsControls__02eaca48", t = {
+  headerTabs: e,
+  headerTabsContent: a,
+  headerTabsControls: s
+};
+export {
+  t as s
+};
+//# sourceMappingURL=HeaderTabs.module-B8b_Vmmv.js.map

package/chunks/HeaderTitle.module-CS0vKAYw.js

@@ -0,0 +1,9 @@
+const e = "headerTitle__e490ab20", t = "headerTitleControls__8b46ea79", o = "headerTitleContent__10b38e5c", l = {
+  headerTitle: e,
+  headerTitleControls: t,
+  headerTitleContent: o
+};
+export {
+  l as s
+};
+//# sourceMappingURL=HeaderTitle.module-CS0vKAYw.js.map

package/chunks/ListItemControlsButton-Bn_onrHQ.js

@@ -0,0 +1,43 @@
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import i from "react";
+import { c as I } from "./vendor-CF2m175I.js";
+import { ETextSize as u } from "../components/Typography/enums.js";
+import { Text as c } from "../components/Typography/Text.js";
+const a = "listItemControlsButton__c75a7d50", B = "listItemControlsButtonDropdown__dac97c53", C = "listItemControlsButtonIcon__2ecd6c7c", d = "withText__33274668", p = "listItemControlsButtonLabel__d2ffd5d6", _ = "listItemControlsButtonInner__fc8628b8", f = "withIcon__7b1743fc", w = "buttonDropdownMenuItem__995719b7", t = {
+  listItemControlsButton: a,
+  listItemControlsButtonDropdown: B,
+  listItemControlsButtonIcon: C,
+  withText: d,
+  listItemControlsButtonLabel: p,
+  listItemControlsButtonInner: _,
+  withIcon: f,
+  buttonDropdownMenuItem: w
+}, b = i.forwardRef(
+  ({ children: o, className: e, icon: n, ...l }, r) => /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      className: I(
+        t.listItemControlsButton,
+        "hoverable",
+        {
+          [t.withIcon]: typeof n < "u",
+          [t.withText]: typeof o < "u"
+        },
+        e
+      ),
+      ...l,
+      ref: r,
+      children: /* @__PURE__ */ m("span", { className: t.listItemControlsButtonInner, children: [
+        n ? /* @__PURE__ */ s("span", { className: t.listItemControlsButtonIcon, children: n }) : null,
+        o ? /* @__PURE__ */ s(c, { className: t.listItemControlsButtonLabel, size: u.B4, children: o }) : null
+      ] })
+    }
+  )
+);
+b.displayName = "ListItemControlsButton";
+export {
+  b as L,
+  t as s
+};
+//# sourceMappingURL=ListItemControlsButton-Bn_onrHQ.js.map

package/chunks/ListItemTail.module-8r8-WRy-.js

@@ -0,0 +1,12 @@
+const t = "listItemTail__cc27ecdf", i = "listItemTailLine__5b3c5d35", l = "listItemTailTop__31ed229d", e = "listItemTailBottom__35bef2ff", s = "listItemTailRight__20f93478", m = "listItemTailLeft__8625f940", T = {
+  listItemTail: t,
+  listItemTailLine: i,
+  listItemTailTop: l,
+  listItemTailBottom: e,
+  listItemTailRight: s,
+  listItemTailLeft: m
+};
+export {
+  T as s
+};
+//# sourceMappingURL=ListItemTail.module-8r8-WRy-.js.map

package/chunks/ListMasterFooter.module-Bylyf04G.js

@@ -0,0 +1,10 @@
+const t = "listMasterFooter__19d76d67", s = "sticky__dd82151f", o = "listMasterFooterDescription__41c5860f", r = "listMasterFooterControls__e1768441", e = {
+  listMasterFooter: t,
+  sticky: s,
+  listMasterFooterDescription: o,
+  listMasterFooterControls: r
+};
+export {
+  e as s
+};
+//# sourceMappingURL=ListMasterFooter.module-Bylyf04G.js.map

package/chunks/Overlay.module-BfeGcilV.js

@@ -0,0 +1,18 @@
+const o = "overlay__f7a3f485", e = "fixed__01fb497b", t = "closing__e7cdd2fc", n = "opened__b76c71f2", a = "overlayPanel__3c292d51", l = "bottom__8c107516", c = "left__838a34dc", _ = "right__a87eaa93", s = "top__52c65b48", r = "overlayContent__e30f1613", y = "overlayMask__8abc1143", v = "overlayOpened__26214563", d = {
+  overlay: o,
+  fixed: e,
+  closing: t,
+  opened: n,
+  overlayPanel: a,
+  bottom: l,
+  left: c,
+  right: _,
+  top: s,
+  overlayContent: r,
+  overlayMask: y,
+  overlayOpened: v
+};
+export {
+  d as s
+};
+//# sourceMappingURL=Overlay.module-BfeGcilV.js.map

package/chunks/Page.module-DI3KI2pW.js

@@ -0,0 +1,16 @@
+const e = "page__bfa20a17", a = "headerPageBackground__685d9e8b", o = "footerPageBackground__d16f52e7", r = "headerPageSticky__b097ecdd", t = "footerPageSticky__db8d973a", g = "headerPageStuck__f5bbc756", c = "footerPageStuck__abf9dd24", d = "observerTarget__1723d66c", P = "headerPage__f41db9d7", _ = "bodyPage__e2e3dc3b", k = {
+  page: e,
+  headerPageBackground: a,
+  footerPageBackground: o,
+  headerPageSticky: r,
+  footerPageSticky: t,
+  headerPageStuck: g,
+  footerPageStuck: c,
+  observerTarget: d,
+  headerPage: P,
+  bodyPage: _
+};
+export {
+  k as s
+};
+//# sourceMappingURL=Page.module-DI3KI2pW.js.map

package/chunks/TabsExtended.module-De1gs7fV.js

@@ -0,0 +1,13 @@
+const t = "tabsExtended__57498984", e = "tabsExtendedContent__1fd2c56c", d = "tabsExtendedTab__50c4518a", n = "tabsExtendedDropdown__e7308178", a = "tabsReal__a2e7ff78", s = "tabsFake__1eefb267", b = "hidden__8c5062af", o = {
+  tabsExtended: t,
+  tabsExtendedContent: e,
+  tabsExtendedTab: d,
+  tabsExtendedDropdown: n,
+  tabsReal: a,
+  tabsFake: s,
+  hidden: b
+};
+export {
+  o as s
+};
+//# sourceMappingURL=TabsExtended.module-De1gs7fV.js.map

package/chunks/TabsExtendedUtils-CZCrojKY.js

@@ -0,0 +1,23 @@
+import { ETabsExtendedTabButtonSize as t } from "../components/TabsExtended/enums.js";
+import { ETextSize as e } from "../components/Typography/enums.js";
+const d = "tabsExtendedTabButton__948fa89a", a = "lg__7c7515f1", o = "md__070e42c7", n = "sm__85d1815c", c = "selected__501b9060", s = {
+  tabsExtendedTabButton: d,
+  lg: a,
+  md: o,
+  sm: n,
+  selected: c
+}, _ = {
+  [t.LG]: s.lg,
+  [t.MD]: s.md,
+  [t.SM]: s.sm
+}, l = {
+  [t.LG]: e.B2,
+  [t.MD]: e.B3,
+  [t.SM]: e.B4
+};
+export {
+  l as a,
+  s,
+  _ as t
+};
+//# sourceMappingURL=TabsExtendedUtils-CZCrojKY.js.map

package/chunks/TooltipDesktop.module-0Me4J_t3.js

@@ -0,0 +1,19 @@
+const t = "tooltipDesktop__e930f04b", o = "tooltipBody__e17b6d80", p = "tooltipXButton__28c6e282", l = "tooltipDesktopContent__03aa3725", e = "closable__9e4ee525", i = "tooltipSM__59befd87", s = "tooltipLG__5f0729ea", n = "tooltipOverlay__ed74f584", _ = "tooltipDesktopTip__68ab2789", c = "down__09a1fa84", a = "up__a74169f5", d = "left__55a383ea", f = "right__c8de748f", k = {
+  tooltipDesktop: t,
+  tooltipBody: o,
+  tooltipXButton: p,
+  tooltipDesktopContent: l,
+  closable: e,
+  tooltipSM: i,
+  tooltipLG: s,
+  tooltipOverlay: n,
+  tooltipDesktopTip: _,
+  down: c,
+  up: a,
+  left: d,
+  right: f
+};
+export {
+  k as s
+};
+//# sourceMappingURL=TooltipDesktop.module-0Me4J_t3.js.map