@sima-land/moleculas 16.0.0-alpha.1 → 16.0.0-alpha.10

package/README.md

@@ -0,0 +1,23 @@
+# UI-moleculas
+
+В этом проекте собраны UI-компоненты, привязанные к контексту интернет-магазина.
+
+## Использование
+
+### Установка
+
+```sh
+# с помощью npm
+npm i -S @sima-land/moleculas
+
+# или с помощью yarn
+yarn add @sima-land/moleculas
+```
+
+### Настройка среды
+
+Компоненты библиотеки используют:
+
+- импорты css/scss-файлов как css-модулей (каждый такой файл промаркирован в виде `*.module.{css,scss}`)
+
+Поэтому, для использования библиотеки необходимо сконфигурировать среду (сборщик или тестовый фреймворк) таким образом чтобы данные импорты работали корректно.

package/common/components/badge/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { AnchorHTMLAttributes } from 'react';
 export interface BadgeField {
     type: 'text' | 'timer' | 'svg-url';
     value: string;
 }
-export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+export interface BadgeProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
     /** Основной цвет, используется как цвет обводки, иконок и текста. */
     color?: string;
     /** Содержимое шильдика. */
@@ -16,4 +16,4 @@ export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEl
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/common/components/badge/index.js

@@ -1,44 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const timer_1 = require("@sima-land/ui-nucleons/timer");
 const bind_1 = __importDefault(require("classnames/bind"));
 const badge_module_scss_1 = __importDefault(require("./badge.module.scss"));
@@ -48,26 +15,25 @@ const cx = bind_1.default.bind(badge_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-exports.Badge = (0, react_1.forwardRef)(function Badge(_a, ref) {
-    var { className, color, fields, href, style, 'data-testid': testId = 'badge' } = _a, restProps = __rest(_a, ["className", "color", "fields", "href", "style", 'data-testid']);
+exports.Badge = (0, react_1.forwardRef)(function Badge({ className, color, fields, href, style, 'data-testid': testId = 'badge', ...restProps }, ref) {
     const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
-    return (react_1.default.createElement("a", Object.assign({ ref: ref }, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value, alt: '' })) : (
+    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, ...restProps, "data-testid": testId, href: href, style: { ...style, '--badge-color': color }, className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? ((0, jsx_runtime_1.jsx)("img", { className: cx('icon'), src: fields[0].value, alt: '' })) : (
         // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
-        react_1.default.createElement("span", { className: cx('content') }, fields.reduce((acc, item, i) => {
-            let result = null;
-            // на данный момент сочетание иконки с другими элементами не предусмотрено макетами - игнорируем
-            switch (item.type) {
-                case 'text':
-                    result = item.value;
-                    break;
-                case 'timer':
-                    result = (react_1.default.createElement(timer_1.Timer, { key: i, date: item.value, timeout: 1000 * 60, format: formatDistance }));
-                    break;
-            }
-            acc.push(result);
-            i < fields.length - 1 && acc.push(' ');
-            return acc;
-        }, []))) })));
+        (0, jsx_runtime_1.jsx)("span", { className: cx('content'), children: fields.reduce((acc, item, i) => {
+                let result = null;
+                // на данный момент сочетание иконки с другими элементами не предусмотрено макетами - игнорируем
+                switch (item.type) {
+                    case 'text':
+                        result = item.value;
+                        break;
+                    case 'timer':
+                        result = ((0, jsx_runtime_1.jsx)(timer_1.Timer, { date: item.value, timeout: 1000 * 60, format: formatDistance }, i));
+                        break;
+                }
+                acc.push(result);
+                i < fields.length - 1 && acc.push(' ');
+                return acc;
+            }, []) })) }));
 });
 /**
  * Форматирует оставшееся время.
@@ -81,3 +47,4 @@ const formatDistance = ({ days, hours, minutes, }) => [toTimePart(days), ...[hou
  * @return Отформатированное число.
  */
 const toTimePart = (n) => `${n}`.padStart(2, '0');
+//# sourceMappingURL=index.js.map

package/common/components/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/badge/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAoE;AACpE,wDAAqD;AACrD,2DAAyC;AACzC,4EAAyC;AAkBzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,2BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAgC,SAAS,KAAK,CAC3E,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,SAAS,EAAE,EACxF,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC;IAErE,OAAO,CACL,8BACE,GAAG,EAAE,GAAG,KACJ,SAAS,iBACA,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,eAAe,EAAE,KAAK,EAAS,EAClD,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,QAAQ,IAAI,WAAW,EAAE,IAAI,IAAI,aAAa,EAAE,SAAS,CAAC,EAChF,QAAQ,EACN,QAAQ,CAAC,CAAC,CAAC,CACT,gCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAC,EAAE,GAAG,CAC5D,CAAC,CAAC,CAAC;QACF,oGAAoG;QACpG,iCAAM,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAC3B,MAAM,CAAC,MAAM,CAAc,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;gBAC3C,IAAI,MAAM,GAAG,IAAI,CAAC;gBAElB,gGAAgG;gBAChG,QAAQ,IAAI,CAAC,IAAI,EAAE;oBACjB,KAAK,MAAM;wBACT,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;wBACpB,MAAM;oBACR,KAAK,OAAO;wBACV,MAAM,GAAG,CACP,uBAAC,aAAK,IAAS,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,EAAE,cAAc,IAA/D,CAAC,CAAkE,CAChF,CAAC;wBACF,MAAM;iBACT;gBAED,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAEjB,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAEvC,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,EAAE,CAAC,GACD,CACR,GAEH,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,cAAc,GAAG,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,GAKR,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAElF;;;;GAIG;AACH,MAAM,UAAU,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC"}

package/common/components/badge-list/index.d.ts

@@ -1,11 +1,11 @@
-import React, { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 export interface BadgeListProps {
     /** Список данных для шильдиков. */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** CSS-класс корневого элемента. */
     className?: string;
     /** Стили корневого элемента. */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /** Лимит количества строк, не влезающие шильдики будут скрыты. */
     lineLimit?: number;
 }
@@ -15,7 +15,7 @@ export interface BadgeListProps {
  * @return Элемент.
  */
 export declare const BadgeList: {
-    ({ children, className, lineLimit, style }: BadgeListProps): JSX.Element;
+    ({ children, className, lineLimit, style }: BadgeListProps): import("react/jsx-runtime").JSX.Element;
     Slot: typeof BadgeListSlot;
 };
 /**
@@ -25,5 +25,5 @@ export declare const BadgeList: {
  */
 declare function BadgeListSlot({ children }: {
     children?: ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/common/components/badge-list/index.js

@@ -1,33 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeList = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const badge_1 = require("../badge");
 const bind_1 = __importDefault(require("classnames/bind"));
 const badge_list_module_scss_1 = __importDefault(require("./badge-list.module.scss"));
@@ -37,16 +15,16 @@ const cx = bind_1.default.bind(badge_list_module_scss_1.default);
  * @param props Свойства компонента.
  * @return Элемент.
  */
-const BadgeList = ({ children, className, lineLimit, style }) => (react_1.default.createElement("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? Object.assign(Object.assign({}, style), { '--line-limit': lineLimit }) : style }, react_1.Children.toArray(children).map((child, index) => {
-    switch (true) {
-        case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
-            return react_1.default.createElement(BadgeListSlot, { key: index }, child);
-        case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
-            return child;
-        default:
-            return null;
-    }
-})));
+const BadgeList = ({ children, className, lineLimit, style }) => ((0, jsx_runtime_1.jsx)("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? { ...style, '--line-limit': lineLimit } : style, children: react_1.Children.toArray(children).map((child, index) => {
+        switch (true) {
+            case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
+                return (0, jsx_runtime_1.jsx)(BadgeListSlot, { children: child }, index);
+            case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
+                return child;
+            default:
+                return null;
+        }
+    }) }));
 exports.BadgeList = BadgeList;
 /**
  * Слот для вывода Badge с произвольной оберткой.
@@ -54,6 +32,7 @@ exports.BadgeList = BadgeList;
  * @return Элемент.
  */
 function BadgeListSlot({ children }) {
-    return react_1.default.createElement("div", { className: cx('item') }, children);
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('item'), children: children });
 }
 exports.BadgeList.Slot = BadgeListSlot;
+//# sourceMappingURL=index.js.map

package/common/components/badge-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/badge-list/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA2E;AAC3E,oCAAiC;AACjC,2DAAyC;AACzC,sFAA8C;AAgB9C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,gCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACI,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAkB,EAAE,EAAE,CAAC,CACtF,gCACE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,IAAI,YAAY,CAAC,EAC3D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,SAAS,EAAoB,CAAC,CAAC,CAAC,KAAK,YAEpF,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC/C,QAAQ,IAAI,EAAE;YACZ,KAAK,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAK;gBAChD,OAAO,uBAAC,aAAa,cAAc,KAAK,IAAb,KAAK,CAAyB,CAAC;YAC5D,KAAK,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa;gBACxD,OAAO,KAAK,CAAC;YACf;gBACE,OAAO,IAAI,CAAC;SACf;IACH,CAAC,CAAC,GACE,CACP,CAAC;AAhBW,QAAA,SAAS,aAgBpB;AAEF;;;;GAIG;AACH,SAAS,aAAa,CAAC,EAAE,QAAQ,EAA4B;IAC3D,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAG,QAAQ,GAAO,CAAC;AACtD,CAAC;AAED,iBAAS,CAAC,IAAI,GAAG,aAAa,CAAC"}

package/common/components/img-stub/img-stub.module.scss

@@ -0,0 +1,36 @@
+.root {
+  position: relative;
+  width: var(--img-stub-size, 160px);
+  height: var(--img-stub-size, 160px);
+  background: #f5f5f5;
+  flex-grow: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
+}
+
+.text {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.line {
+  fill: #9e9e9e;
+  font-size: 13px;
+  text-anchor: middle;
+  text-align: center;
+}
+
+.icon {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30.625%;
+  height: 30.625%;
+  fill: #757575;
+  transform: translate(-50%, -50%) scaleX(-1);
+}

package/common/components/img-stub/index.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, HTMLAttributes } from 'react';
+export interface ImgStubStyle extends CSSProperties {
+    '--img-stub-size'?: string;
+}
+export interface ImgStubProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    style?: ImgStubStyle;
+}
+/**
+ * Баннер-заглушка для больших картинок которые не загрузились из-за ошибки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ImgStub({ className, ...rest }: ImgStubProps): import("react/jsx-runtime").JSX.Element;

package/common/components/img-stub/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImgStub = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Repeat_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Repeat"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const img_stub_module_scss_1 = __importDefault(require("./img-stub.module.scss"));
+const cx = bind_1.default.bind(img_stub_module_scss_1.default);
+/**
+ * Баннер-заглушка для больших картинок которые не загрузились из-за ошибки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ImgStub({ className, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rest, className: cx('root', className), role: 'banner', children: [(0, jsx_runtime_1.jsxs)("svg", { className: img_stub_module_scss_1.default.text, viewBox: '0 0 160 160', children: [(0, jsx_runtime_1.jsx)("text", { x: '50%', y: '14.5%', className: img_stub_module_scss_1.default.line, children: "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435" }), (0, jsx_runtime_1.jsx)("text", { x: '50%', y: '24.5%', className: img_stub_module_scss_1.default.line, children: "\u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043B\u043E\u0441\u044C :(" }), (0, jsx_runtime_1.jsx)("text", { x: '50%', y: '80%', className: img_stub_module_scss_1.default.line, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435" }), (0, jsx_runtime_1.jsx)("text", { x: '50%', y: '90%', className: img_stub_module_scss_1.default.line, children: "\u043E\u0431\u043D\u043E\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443" })] }), (0, jsx_runtime_1.jsx)(Repeat_1.default, { className: img_stub_module_scss_1.default.icon })] }));
+}
+exports.ImgStub = ImgStub;
+//# sourceMappingURL=index.js.map

package/common/components/img-stub/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/img-stub/index.tsx"],"names":[],"mappings":";;;;;;;AACA,6FAAwE;AACxE,2DAAyC;AACzC,kFAA4C;AAU5C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,8BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAgB;IAC1D,OAAO,CACL,oCAAS,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,QAAQ,aAC5D,iCAAK,SAAS,EAAE,8BAAM,CAAC,IAAI,EAAE,OAAO,EAAC,aAAa,aAChD,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,OAAO,EAAC,SAAS,EAAE,8BAAM,CAAC,IAAI,mFAEvC,EACP,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,OAAO,EAAC,SAAS,EAAE,8BAAM,CAAC,IAAI,mGAEvC,EAEP,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,SAAS,EAAE,8BAAM,CAAC,IAAI,6EAErC,EACP,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,SAAS,EAAE,8BAAM,CAAC,IAAI,kHAErC,IACH,EACN,uBAAC,gBAAS,IAAC,SAAS,EAAE,8BAAM,CAAC,IAAI,GAAI,IACjC,CACP,CAAC;AACJ,CAAC;AArBD,0BAqBC"}

package/common/components/interactive-image/index.d.ts

@@ -0,0 +1,4 @@
+import type { InteractiveImageStyle, InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
+import { InteractiveImage, Parts } from './interactive-image';
+export type { InteractiveImageStyle, InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps, };
+export { InteractiveImage, Parts };

package/common/components/interactive-image/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Parts = exports.InteractiveImage = void 0;
+const interactive_image_1 = require("./interactive-image");
+Object.defineProperty(exports, "InteractiveImage", { enumerable: true, get: function () { return interactive_image_1.InteractiveImage; } });
+Object.defineProperty(exports, "Parts", { enumerable: true, get: function () { return interactive_image_1.Parts; } });
+//# sourceMappingURL=index.js.map

package/common/components/interactive-image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/interactive-image/index.ts"],"names":[],"mappings":";;;AAMA,2DAA8D;AASrD,iGATA,oCAAgB,OASA;AAAE,sFATA,yBAAK,OASA"}

package/common/components/interactive-image/interactive-image-util.scss

@@ -0,0 +1,10 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+
+@mixin dot-size-default {
+  --dot-size: 32px;
+  --dot-size-core: 12px;
+  @include breakpoints.down('xs') {
+    --dot-size: 40px;
+    --dot-size-core: 16px;
+  }
+}

package/common/components/interactive-image/interactive-image.d.ts

@@ -0,0 +1,15 @@
+import { AnchorHTMLAttributes } from 'react';
+import { InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
+export declare const InteractiveImage: import("react").ForwardRefExoticComponent<InteractiveImageProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Обертка-ссылка для картинки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function ImageAnchor({ children, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+export declare const Parts: {
+    readonly ImageAnchor: typeof ImageAnchor;
+    readonly Image: import("react").ForwardRefExoticComponent<InteractiveImageImageProps & import("react").RefAttributes<HTMLImageElement>>;
+    readonly Point: import("react").ForwardRefExoticComponent<InteractiveImagePointProps & import("react").RefAttributes<HTMLAnchorElement>>;
+};
+export {};

package/common/components/interactive-image/interactive-image.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Parts = exports.InteractiveImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const bind_1 = __importDefault(require("classnames/bind"));
+const interactive_image_module_scss_1 = __importDefault(require("./interactive-image.module.scss"));
+const cx = bind_1.default.bind(interactive_image_module_scss_1.default);
+exports.InteractiveImage = (0, react_1.forwardRef)(({ children, 'data-testid': testId, className, dotSize, ...rest }, ref) => {
+    const rootClassName = cx('root', {
+        'dot-size-unset': dotSize === 'unset',
+    }, className);
+    validateChildren(children);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: rootClassName, ...rest, "data-testid": testId, children: react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) &&
+            (child.type === ImageAnchor || child.type === Image || child.type === Point)) }));
+});
+/**
+ * Проверка валидности содержимого, переданного в InteractiveImage.
+ * @param children Содержимое.
+ */
+function validateChildren(children) {
+    let counter = 0;
+    for (const child of react_1.Children.toArray(children)) {
+        if ((0, react_1.isValidElement)(child) && (child.type === ImageAnchor || child.type === Image)) {
+            counter++;
+        }
+        if (counter > 1) {
+            throw new Error('[InteractiveImage] Either Image or ImageAnchor allowed. Not both.');
+        }
+    }
+}
+/**
+ * Обертка-ссылка для картинки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ImageAnchor({ children, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("a", { ...rest, className: cx('image-anchor', className), "data-testid": 'interactive-image:image-anchor', children: react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && child.type === Image) }));
+}
+/**
+ * Изображение на котором будут располагаться точки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const Image = (0, react_1.forwardRef)(({ className, 'data-testid': testId = 'interactive-image:image', ...rest }, ref) => ((0, jsx_runtime_1.jsx)("img", { ref: ref, className: cx('image', className), "data-testid": testId, ...rest })));
+/**
+ * Точка которая будет располагаться на изображении.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const Point = (0, react_1.forwardRef)(({ x, y, className, style, 'data-testid': testId = 'interactive-image:point', ...rest }, ref) => ((0, jsx_runtime_1.jsx)("a", { ref: ref, "aria-label": '\u0422\u043E\u0447\u043A\u0430 \u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0438', "data-testid": testId, className: cx('point', className), style: { ...style, top: `${y}%`, left: `${x}%` }, ...rest })));
+exports.Parts = { ImageAnchor, Image, Point };
+//# sourceMappingURL=interactive-image.js.map

package/common/components/interactive-image/interactive-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive-image.js","sourceRoot":"","sources":["../../../../src/common/components/interactive-image/interactive-image.tsx"],"names":[],"mappings":"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"}

package/common/components/interactive-image/interactive-image.module.scss

@@ -0,0 +1,47 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use './interactive-image-util';
+
+.root {
+  display: inline-block;
+  font-size: 0;
+  position: relative;
+  overflow: hidden;
+  background: colors.$basic-gray4;
+  &:not(.dot-size-unset) {
+    @include interactive-image-util.dot-size-default;
+  }
+}
+
+.image-anchor,
+.image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.point {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--dot-size, 32px);
+  height: var(--dot-size, 32px);
+  background: rgba(colors.$basic-gray87, 0.4);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  &:hover {
+    cursor: pointer;
+    background: rgba(colors.$basic-gray87, 0.64);
+  }
+  &::after {
+    content: '';
+    display: block;
+    width: var(--dot-size-core, 12px);
+    height: var(--dot-size-core, 12px);
+    background: #fff;
+    border-radius: 50%;
+  }
+}

package/common/components/interactive-image/types.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, AnchorHTMLAttributes, ImgHTMLAttributes, CSSProperties } from 'react';
+export interface InteractiveImageStyle extends CSSProperties {
+    '--dot-size'?: string;
+    '--dot-size-core'?: string;
+}
+export interface InteractiveImageProps extends HTMLAttributes<HTMLDivElement> {
+    /** Размер точек. При указании "unset" можно задать css-переменные через className или style. */
+    dotSize?: 'unset';
+    /** Стили с возможностью указания размера точек через css-переменные. */
+    style?: InteractiveImageStyle;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export interface InteractiveImageImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export interface InteractiveImagePointProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    x: number;
+    y: number;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}

package/common/components/interactive-image/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/common/components/interactive-image/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/common/components/interactive-image/types.ts"],"names":[],"mappings":""}

package/common/components/intractive-image/index.d.ts

@@ -1,4 +1,6 @@
 import type { InteractiveImageStyle, InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
 import { InteractiveImage, Parts } from './interactive-image';
+/** @deprecated */
 export type { InteractiveImageStyle, InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps, };
+/** @deprecated */
 export { InteractiveImage, Parts };

package/common/components/intractive-image/index.js

@@ -4,3 +4,4 @@ exports.Parts = exports.InteractiveImage = void 0;
 const interactive_image_1 = require("./interactive-image");
 Object.defineProperty(exports, "InteractiveImage", { enumerable: true, get: function () { return interactive_image_1.InteractiveImage; } });
 Object.defineProperty(exports, "Parts", { enumerable: true, get: function () { return interactive_image_1.Parts; } });
+//# sourceMappingURL=index.js.map

package/common/components/intractive-image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/intractive-image/index.ts"],"names":[],"mappings":";;;AAMA,2DAA8D;AAWrD,iGAXA,oCAAgB,OAWA;AAAE,sFAXA,yBAAK,OAWA"}

package/common/components/intractive-image/interactive-image.d.ts

@@ -1,15 +1,17 @@
-import React, { AnchorHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes } from 'react';
 import { InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
-export declare const InteractiveImage: React.ForwardRefExoticComponent<InteractiveImageProps & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated */
+export declare const InteractiveImage: import("react").ForwardRefExoticComponent<InteractiveImageProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * Обертка-ссылка для картинки.
  * @param props Свойства.
  * @return Элемент.
  */
-declare function ImageAnchor({ children, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
+declare function ImageAnchor({ children, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+/** @deprecated */
 export declare const Parts: {
     readonly ImageAnchor: typeof ImageAnchor;
-    readonly Image: React.ForwardRefExoticComponent<InteractiveImageImageProps & React.RefAttributes<HTMLImageElement>>;
-    readonly Point: React.ForwardRefExoticComponent<InteractiveImagePointProps & React.RefAttributes<HTMLAnchorElement>>;
+    readonly Image: import("react").ForwardRefExoticComponent<InteractiveImageImageProps & import("react").RefAttributes<HTMLImageElement>>;
+    readonly Point: import("react").ForwardRefExoticComponent<InteractiveImagePointProps & import("react").RefAttributes<HTMLAnchorElement>>;
 };
 export {};