@sberbusiness/triplex-next 0.1.4 → 0.1.6

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-BuN7zhGO.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 a } from "./vendor-CF2m175I.js";
+const y = "alertProcess__0d408e6b", f = "withSpoiler__77e44e61", u = "themeIcon__0eab8593", T = "alertTypeError__bd2eec60", b = "alertTypeInfo__2b8b6239", B = "alertTypeWarning__b3e029f1", C = "alertTypeSystem__4c58baab", S = "alertTypeFeature__577ea24f", h = "alertProcessContentBlock__2a0f605a", I = "closeButton__e5c0017d", P = "expandableContent__51246ed5", g = "expanded__ce806b5b", k = "expandButton__d53edf69", e = {
+  alertProcess: y,
+  withSpoiler: f,
+  themeIcon: u,
+  alertTypeError: T,
+  alertTypeInfo: b,
+  alertTypeWarning: B,
+  alertTypeSystem: C,
+  alertTypeFeature: S,
+  alertProcessContentBlock: h,
+  closeButton: I,
+  expandableContent: P,
+  expanded: g,
+  expandButton: k
+}, v = ({ children: s, open: r, onOpen: o, ...l }) => {
+  const { setHasSpoiler: n } = d(x);
+  i(() => (n(!0), () => {
+    n(!1);
+  }), [n]);
+  const c = () => {
+    o == null || o(!r);
+  };
+  return /* @__PURE__ */ p("div", { className: e.spoiler, children: [
+    /* @__PURE__ */ t("div", { className: a(e.expandableContent, { [e.expanded]: r }), ...l, children: s }),
+    /* @__PURE__ */ t("div", { className: a(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-BuN7zhGO.js.map

package/chunks/Card.module-ByP22Mc4.js

@@ -0,0 +1,17 @@
+const n = "card__786a8c76", d = "roundingMD__6b47be3f", e = "roundingSM__0110d5c1", c = "general__85e8e913", a = "secondary__1d2e618d", o = "cardMedia__5ee2c778", r = "cardContent__711b9412", t = "paddingMD__f47cb1ee", _ = "paddingSM__80ae5995", s = "cardContentHeader__19112f20", g = "cardContentFooter__b5cc2e9d", i = {
+  card: n,
+  roundingMD: d,
+  roundingSM: e,
+  general: c,
+  secondary: a,
+  cardMedia: o,
+  cardContent: r,
+  paddingMD: t,
+  paddingSM: _,
+  cardContentHeader: s,
+  cardContentFooter: g
+};
+export {
+  i as c
+};
+//# sourceMappingURL=Card.module-ByP22Mc4.js.map

package/chunks/DropdownListItem-CM0DOekv.js

@@ -0,0 +1,56 @@
+import { jsx as E } from "react/jsx-runtime";
+import f, { 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__df34afb1", y = "dropdownListItem__aa651616", I = "active__d1e66931", b = "selected__e9d8b9bb", n = {
+  dropdownList: D,
+  dropdownListItem: y,
+  active: I,
+  selected: b,
+  "dropdownList-sm": "dropdownList-sm__201b0026",
+  "dropdownList-md": "dropdownList-md__a25171cc",
+  "dropdownList-lg": "dropdownList-lg__c58abac9"
+}, l = [m.SPACE, m.ENTER], N = f.forwardRef(
+  ({
+    active: d,
+    keyCodesForSelection: p = l,
+    children: s,
+    className: a,
+    onClick: e,
+    onSelect: o,
+    selected: i,
+    ..._
+  }, w) => {
+    const r = (t) => {
+      const { keyCode: c } = t;
+      p.includes(c) && (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
+      }
+    );
+  }
+);
+N.displayName = "DropdownListItem";
+export {
+  N as D,
+  n as s
+};
+//# sourceMappingURL=DropdownListItem-CM0DOekv.js.map

package/chunks/DropdownMobile.module-gjHocEKh.js

@@ -0,0 +1,19 @@
+const o = "dropdownMobileWrapper__fec98bdd", d = "dropdownMobileBackdrop__3057aa50", e = "closing__b17b6455", n = "opening__6ac2cd8c", r = "opened__21072737", p = "dropdownMobile__876bfa56", l = "dropdownMobileHeader__c46c9e8e", b = "dropdownMobileContent__4cc9a559", i = "dropdownMobileFooter__9dc26bde", t = "dropdownMobileListItem__fa9457ae", c = "selected__e9d8b9bb", s = "dropdownMobileClose__0965b2a2", w = "dropdownMobileBodyOverflow__dd33f9b3", M = {
+  dropdownMobileWrapper: o,
+  dropdownMobileBackdrop: d,
+  closing: e,
+  opening: n,
+  opened: r,
+  dropdownMobile: p,
+  dropdownMobileHeader: l,
+  dropdownMobileContent: b,
+  dropdownMobileFooter: i,
+  dropdownMobileListItem: t,
+  selected: c,
+  dropdownMobileClose: s,
+  dropdownMobileBodyOverflow: w
+};
+export {
+  M as s
+};
+//# sourceMappingURL=DropdownMobile.module-gjHocEKh.js.map

package/chunks/Footer.module-B1rO0bcd.js

@@ -0,0 +1,11 @@
+const o = "footer__73883a5a", t = "sticky__8a89a3bd", e = "footerDescription__2bbaab50", r = "footerDescriptionContent__fe57c232", s = "footerDescriptionControls__94dbcc43", n = {
+  footer: o,
+  sticky: t,
+  footerDescription: e,
+  footerDescriptionContent: r,
+  footerDescriptionControls: s
+};
+export {
+  n as s
+};
+//# sourceMappingURL=Footer.module-B1rO0bcd.js.map

package/chunks/FormFieldInput-3TmHcNY0.js

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

package/chunks/HeaderLayoutSidebar.module-CEXHjsmH.js

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

package/chunks/HeaderTabs.module-YFm2izz6.js

@@ -0,0 +1,9 @@
+const e = "headerTabs__89b5da47", a = "headerTabsContent__c92922d0", s = "headerTabsControls__e926612b", t = {
+  headerTabs: e,
+  headerTabsContent: a,
+  headerTabsControls: s
+};
+export {
+  t as s
+};
+//# sourceMappingURL=HeaderTabs.module-YFm2izz6.js.map

package/chunks/HeaderTitle.module-lv649tnz.js

@@ -0,0 +1,9 @@
+const e = "headerTitle__6e0afca8", t = "headerTitleControls__80e2a07b", o = "headerTitleContent__93966d2b", a = {
+  headerTitle: e,
+  headerTitleControls: t,
+  headerTitleContent: o
+};
+export {
+  a as s
+};
+//# sourceMappingURL=HeaderTitle.module-lv649tnz.js.map

package/chunks/ListItemControlsButton-BpUzyKya.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__fec17772", B = "listItemControlsButtonDropdown__a9bd14f6", d = "listItemControlsButtonIcon__72d0c0fb", C = "withText__0ad91e40", f = "listItemControlsButtonLabel__5ffb660a", p = "listItemControlsButtonInner__d4c18792", _ = "withIcon__b78dc1ec", w = "buttonDropdownMenuItem__e27fd5ed", t = {
+  listItemControlsButton: a,
+  listItemControlsButtonDropdown: B,
+  listItemControlsButtonIcon: d,
+  withText: C,
+  listItemControlsButtonLabel: f,
+  listItemControlsButtonInner: p,
+  withIcon: _,
+  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-BpUzyKya.js.map

package/chunks/ListItemTail.module-D7Oa-l-5.js

@@ -0,0 +1,12 @@
+const t = "listItemTail__a7353e4b", i = "listItemTailLine__b4d4cfe0", l = "listItemTailTop__41ef341d", e = "listItemTailBottom__c1c44a59", s = "listItemTailRight__83455959", a = "listItemTailLeft__d6d7b351", m = {
+  listItemTail: t,
+  listItemTailLine: i,
+  listItemTailTop: l,
+  listItemTailBottom: e,
+  listItemTailRight: s,
+  listItemTailLeft: a
+};
+export {
+  m as s
+};
+//# sourceMappingURL=ListItemTail.module-D7Oa-l-5.js.map

package/chunks/ListMasterFooter.module-1LjIdZNa.js

@@ -0,0 +1,10 @@
+const t = "listMasterFooter__d8807e1b", s = "sticky__b9469865", o = "listMasterFooterDescription__73ea2a70", e = "listMasterFooterControls__3b25831b", r = {
+  listMasterFooter: t,
+  sticky: s,
+  listMasterFooterDescription: o,
+  listMasterFooterControls: e
+};
+export {
+  r as s
+};
+//# sourceMappingURL=ListMasterFooter.module-1LjIdZNa.js.map

package/chunks/Overlay.module-BbpDNlm7.js

@@ -0,0 +1,18 @@
+const o = "overlay__6879add0", e = "fixed__6b8b027f", t = "closing__cc46d0f5", n = "opened__dc16edc1", a = "overlayPanel__d1021ef8", l = "bottom__5b163775", _ = "left__151f4b46", c = "right__8ea8aa0b", s = "top__54707ea5", r = "overlayContent__c233691f", y = "overlayMask__1c1c8451", d = "overlayOpened__fb629e72", v = {
+  overlay: o,
+  fixed: e,
+  closing: t,
+  opened: n,
+  overlayPanel: a,
+  bottom: l,
+  left: _,
+  right: c,
+  top: s,
+  overlayContent: r,
+  overlayMask: y,
+  overlayOpened: d
+};
+export {
+  v as s
+};
+//# sourceMappingURL=Overlay.module-BbpDNlm7.js.map

package/chunks/Page.module-DAinpecX.js

@@ -0,0 +1,16 @@
+const e = "page__c20fcd5a", a = "headerPageBackground__ca60632c", o = "footerPageBackground__9a2cb5f9", c = "headerPageSticky__49155853", r = "footerPageSticky__cc9cb3fc", t = "headerPageStuck__93dbba97", g = "footerPageStuck__cd575280", d = "observerTarget__bc9dc737", P = "headerPage__72f3a426", _ = "bodyPage__73a698f0", k = {
+  page: e,
+  headerPageBackground: a,
+  footerPageBackground: o,
+  headerPageSticky: c,
+  footerPageSticky: r,
+  headerPageStuck: t,
+  footerPageStuck: g,
+  observerTarget: d,
+  headerPage: P,
+  bodyPage: _
+};
+export {
+  k as s
+};
+//# sourceMappingURL=Page.module-DAinpecX.js.map

package/chunks/TabsExtended.module-CQBdl7x1.js

@@ -0,0 +1,13 @@
+const e = "tabsExtended__c652aaa0", t = "tabsExtendedContent__05f4e0eb", d = "tabsExtendedTab__cd716915", n = "tabsExtendedDropdown__4b6ef57e", a = "tabsReal__e1f38dd3", s = "tabsFake__e4400ee3", b = "hidden__6805ef01", o = {
+  tabsExtended: e,
+  tabsExtendedContent: t,
+  tabsExtendedTab: d,
+  tabsExtendedDropdown: n,
+  tabsReal: a,
+  tabsFake: s,
+  hidden: b
+};
+export {
+  o as s
+};
+//# sourceMappingURL=TabsExtended.module-CQBdl7x1.js.map

package/chunks/TabsExtendedUtils-BT4b2wK1.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__7953ad41", a = "lg__483c430d", o = "md__56c8a04d", n = "sm__5122ab60", c = "selected__cad5e651", 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-BT4b2wK1.js.map

package/chunks/TooltipDesktop.module-BRkBuup-.js

@@ -0,0 +1,19 @@
+const t = "tooltipDesktop__dae19e23", o = "tooltipBody__cde1fb69", p = "tooltipXButton__aa1ce05b", l = "tooltipDesktopContent__ec11c359", e = "closable__d1d3dd50", i = "tooltipSM__5d306c4d", s = "tooltipLG__26d74aec", n = "tooltipOverlay__d446043d", _ = "tooltipDesktopTip__88171810", c = "down__2f8d248e", d = "up__df3ecf8e", a = "left__660152ba", f = "right__772fef6e", k = {
+  tooltipDesktop: t,
+  tooltipBody: o,
+  tooltipXButton: p,
+  tooltipDesktopContent: l,
+  closable: e,
+  tooltipSM: i,
+  tooltipLG: s,
+  tooltipOverlay: n,
+  tooltipDesktopTip: _,
+  down: c,
+  up: d,
+  left: a,
+  right: f
+};
+export {
+  k as s
+};
+//# sourceMappingURL=TooltipDesktop.module-BRkBuup-.js.map