@sima-land/moleculas 15.4.0 → 15.6.0

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

@@ -1,18 +1,4 @@
-import React from 'react';
-export interface InteractiveImageProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-    'data-testid'?: string;
-}
-export interface InteractiveImageImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    'data-testid'?: string;
-}
-export interface InteractiveImagePointProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    x: number;
-    y: number;
-    'data-testid'?: string;
-}
-export declare const InteractiveImage: React.ForwardRefExoticComponent<InteractiveImageProps & React.RefAttributes<HTMLDivElement>>;
-export declare const Parts: {
-    readonly Image: React.ForwardRefExoticComponent<InteractiveImageImageProps & React.RefAttributes<HTMLImageElement>>;
-    readonly Point: React.ForwardRefExoticComponent<InteractiveImagePointProps & React.RefAttributes<HTMLAnchorElement>>;
-};
+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/intractive-image/index.js

@@ -1,52 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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.Parts = exports.InteractiveImage = void 0;
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const interactive_image_module_scss_1 = __importDefault(require("./interactive-image.module.scss"));
-exports.InteractiveImage = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, 'data-testid': testId, className } = _a, rest = __rest(_a, ["children", 'data-testid', "className"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(interactive_image_module_scss_1.default.root, className) }, rest, { "data-testid": testId }), react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && (child.type === Image || child.type === Point))));
-});
-const Image = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, 'data-testid': testId = 'interactive-image:image' } = _a, rest = __rest(_a, ["className", 'data-testid']);
-    return (react_1.default.createElement("img", Object.assign({ ref: ref, className: (0, classnames_1.default)(interactive_image_module_scss_1.default.image, className), "data-testid": testId }, rest)));
-});
-const Point = (0, react_1.forwardRef)((_a, ref) => {
-    var { x, y, className, style, 'data-testid': testId = 'interactive-image:point' } = _a, rest = __rest(_a, ["x", "y", "className", "style", 'data-testid']);
-    return (react_1.default.createElement("a", Object.assign({ 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: (0, classnames_1.default)(interactive_image_module_scss_1.default.point, className), style: Object.assign(Object.assign({}, style), { top: `${y}%`, left: `${x}%` }) }, rest)));
-});
-exports.Parts = { Image, Point };
+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; } });

package/common/components/intractive-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/intractive-image/interactive-image.d.ts

@@ -0,0 +1,10 @@
+import React, { AnchorHTMLAttributes } from 'react';
+import { InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
+export declare const InteractiveImage: React.ForwardRefExoticComponent<InteractiveImageProps & React.RefAttributes<HTMLDivElement>>;
+declare function ImageAnchor({ children, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
+export declare const Parts: {
+    readonly ImageAnchor: typeof ImageAnchor;
+    readonly Image: React.ForwardRefExoticComponent<InteractiveImageImageProps & React.RefAttributes<HTMLImageElement>>;
+    readonly Point: React.ForwardRefExoticComponent<InteractiveImagePointProps & React.RefAttributes<HTMLAnchorElement>>;
+};
+export {};

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

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.Parts = exports.InteractiveImage = void 0;
+const react_1 = __importStar(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)((_a, ref) => {
+    var { children, 'data-testid': testId, className, dotSize } = _a, rest = __rest(_a, ["children", 'data-testid', "className", "dotSize"]);
+    const rootClassName = cx('root', {
+        'dot-size-unset': dotSize === 'unset',
+    }, className);
+    validateChildren(children);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: rootClassName }, rest, { "data-testid": testId }), react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) &&
+        (child.type === ImageAnchor || child.type === Image || child.type === Point))));
+});
+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.');
+        }
+    }
+}
+function ImageAnchor(_a) {
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    return (react_1.default.createElement("a", Object.assign({}, rest, { className: cx('image-anchor', className), "data-testid": 'interactive-image:image-anchor' }), react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && child.type === Image)));
+}
+const Image = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, 'data-testid': testId = 'interactive-image:image' } = _a, rest = __rest(_a, ["className", 'data-testid']);
+    return (react_1.default.createElement("img", Object.assign({ ref: ref, className: cx('image', className), "data-testid": testId }, rest)));
+});
+const Point = (0, react_1.forwardRef)((_a, ref) => {
+    var { x, y, className, style, 'data-testid': testId = 'interactive-image:point' } = _a, rest = __rest(_a, ["x", "y", "className", "style", 'data-testid']);
+    return (react_1.default.createElement("a", Object.assign({ 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: Object.assign(Object.assign({}, style), { top: `${y}%`, left: `${x}%` }) }, rest)));
+});
+exports.Parts = { ImageAnchor, Image, Point };

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

@@ -1,5 +1,6 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
 @use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use './interactive-image-util';
 
 .root {
   display: inline-block;
@@ -7,8 +8,12 @@
   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%;
@@ -22,8 +27,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 52px;
-  height: 52px;
+  width: var(--dot-size, 32px);
+  height: var(--dot-size, 32px);
   background: rgba(colors.$basic-gray87, 0.4);
   border-radius: 50%;
   transform: translate(-50%, -50%);
@@ -34,17 +39,9 @@
   &::after {
     content: '';
     display: block;
-    width: 20px;
-    height: 20px;
+    width: var(--dot-size-core, 12px);
+    height: var(--dot-size-core, 12px);
     background: #fff;
     border-radius: 50%;
   }
-  @include breakpoints.down('xs') {
-    width: 40px;
-    height: 40px;
-    &::after {
-      width: 16px;
-      height: 16px;
-    }
-  }
 }

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "15.4.0",
+  "version": "15.6.0",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -9,7 +9,6 @@
     "node": ">=14.16.0"
   },
   "scripts": {
-    "prepare": "",
     "build:before": "rimraf build",
     "build:main": "tsc --project tsconfig.build.json",
     "build:after": "node .build/dist.js",