@sima-land/moleculas 16.0.0-alpha.0 → 16.0.0-alpha.2

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

@@ -0,0 +1,46 @@
+import { AnchorHTMLAttributes } from 'react';
+interface TextContent {
+    type: 'text';
+    text: string;
+}
+interface ColorContent {
+    type: 'color';
+    color: string;
+}
+interface ImageContent {
+    type: 'image';
+    src: string;
+}
+export type ModifierContent = TextContent | ColorContent | ImageContent;
+export interface ModifierProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Вывести выбранным. */
+    active?: boolean;
+    /** Вывести отключенным. */
+    disabled?: boolean;
+    /** Вывести зачеркнутым. */
+    crossedOut?: boolean;
+    /** Содержимое. */
+    content: ModifierContent;
+    /** Высота по дизайн-гайдам. */
+    size?: 's' | 'm';
+    /** Кол-во. */
+    count?: number;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export type MoreButtonProps = Omit<ModifierProps, 'content' | 'crossedOut' | 'active' | 'count'> & {
+    count: number;
+};
+/**
+ * Кнопка модификатора (аналога товара).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Modifier({ size, active, crossedOut, disabled, content, count, className, 'data-testid': testId, ...props }: ModifierProps): JSX.Element;
+/**
+ * Кнопка "+N" для показа полного списка модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MoreButton({ count, className, 'data-testid': testId, ...rest }: MoreButtonProps): JSX.Element;
+export {};

package/common/components/modifier/index.js

@@ -0,0 +1,102 @@
+"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.MoreButton = exports.Modifier = void 0;
+const react_1 = __importStar(require("react"));
+const hint_1 = require("@sima-land/ui-nucleons/hint");
+const bind_1 = __importDefault(require("classnames/bind"));
+const modifiers_module_scss_1 = __importDefault(require("./modifiers.module.scss"));
+const cx = bind_1.default.bind(modifiers_module_scss_1.default);
+/**
+ * Кнопка модификатора (аналога товара).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Modifier(_a) {
+    var { size = 'm', active, crossedOut, disabled, content, count, className, 'data-testid': testId = 'modifier' } = _a, props = __rest(_a, ["size", "active", "crossedOut", "disabled", "content", "count", "className", 'data-testid']);
+    // текст хинта
+    const [hint, setHint] = (0, react_1.useState)('');
+    // состояние хинта
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // позиционирование хинта
+    const _b = (0, hint_1.useHintFloating)({ open, onOpenChange: setOpen }), { refs } = _b, floating = __rest(_b, ["refs"]);
+    // пользовательское взаимодействие для хинта
+    const { getReferenceProps, getFloatingProps } = (0, hint_1.useHintOnHover)(floating);
+    // определение необходимости активации хинта
+    (0, react_1.useEffect)(() => {
+        const textElement = refs.reference.current;
+        if (!(textElement instanceof HTMLElement) || content.type !== 'text') {
+            return;
+        }
+        // eslint-disable-next-line require-jsdoc
+        const defineHint = () => setHint(isTruncated(textElement) ? content.text : '');
+        defineHint();
+        const observer = new ResizeObserver(defineHint);
+        observer.observe(textElement);
+        return () => observer.disconnect();
+    }, [content.text]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("a", Object.assign({}, props, { className: cx('root', `size-${size}`, { active, disabled }, className), "data-testid": testId }),
+            content.type === 'color' && (react_1.default.createElement("span", { className: cx('color'), role: 'banner', style: { background: content.color } })),
+            content.type === 'image' && (react_1.default.createElement("span", { className: cx('image'), role: 'banner', style: { backgroundImage: `url(${content.src})` } })),
+            content.type === 'text' && (react_1.default.createElement("span", Object.assign({ ref: refs.setReference, className: cx('text') }, getReferenceProps()), content.text)),
+            typeof count === 'number' && (react_1.default.createElement("span", { className: cx('counter') }, count > 99 ? '99+' : count)),
+            crossedOut && (react_1.default.createElement("svg", { width: '100%', height: '100%', className: cx('diagonal') },
+                react_1.default.createElement("line", { x1: '0', y1: '100%', x2: '100%', y2: '0', stroke: 'var(--modifier-border-color)' })))),
+        hint && (react_1.default.createElement(hint_1.Hint, Object.assign({ open: open, hintRef: refs.setFloating, arrowRef: refs.setArrow }, getFloatingProps()), hint))));
+}
+exports.Modifier = Modifier;
+/**
+ * Кнопка "+N" для показа полного списка модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MoreButton(_a) {
+    var { count, className, 'data-testid': testId = 'more-modifiers' } = _a, rest = __rest(_a, ["count", "className", 'data-testid']);
+    return (react_1.default.createElement(Modifier, Object.assign({ role: 'button', "aria-label": '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432\u0441\u0435 \u0430\u043D\u0430\u043B\u043E\u0433\u0438' }, rest, { className: cx('more', className), content: { type: 'text', text: `+${count}` }, "data-testid": testId })));
+}
+exports.MoreButton = MoreButton;
+/**
+ * Определяет, обрезан ли текст в элементе.
+ * @param el Элемент.
+ * @return Обрезан ли текст в элементе.
+ */
+function isTruncated(el) {
+    return el.scrollWidth > el.clientWidth;
+}

package/common/components/modifier/modifiers.module.scss

@@ -0,0 +1,121 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  display: inline-block;
+  text-decoration: none;
+  position: relative;
+  color: var(--modifier-text-color);
+  border-radius: 4px;
+  min-width: var(--modifier-size);
+  min-height: var(--modifier-size);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  --modifier-text-color: #{colors.$basic-gray87};
+  --modifier-border-width: 1px;
+  --modifier-border-color: #{colors.$basic-gray12};
+  &.active {
+    --modifier-border-color: #{colors.$basic-blue};
+  }
+  &:hover:not(.disabled) {
+    cursor: pointer;
+  }
+  &:hover:not(.disabled):not(.active) {
+    --modifier-border-width: 2px;
+  }
+  &.disabled {
+    --modifier-media-opacity: 0.24;
+    --modifier-overlay-color: rgba(0, 0, 0, 0.04);
+    --modifier-border-width: 0;
+    --modifier-text-color: #{colors.$basic-gray38};
+  }
+  &::after {
+    content: '';
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--modifier-border-width) var(--modifier-border-color);
+    background: var(--modifier-overlay-color);
+  }
+  &.more {
+    width: var(--modifier-size);
+    --modifier-text-color: #{colors.$basic-blue};
+    &.size-s {
+      --modifier-padding: 10px 0;
+    }
+    &.size-m {
+      --modifier-padding: 14px 0;
+    }
+  }
+}
+
+.size-s {
+  --modifier-size: 40px;
+  --modifier-padding: 10px;
+}
+
+.size-m {
+  --modifier-size: 48px;
+  --modifier-padding: 14px 15px;
+}
+
+.diagonal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.color,
+.image {
+  border-radius: inherit;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: var(--modifier-media-opacity);
+}
+
+.image {
+  background-position: center;
+  background-size: cover;
+}
+
+.text {
+  padding: var(--modifier-padding);
+  display: block;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  // ВАЖНО: чтобы диагональная черта была под текстом
+  position: relative;
+  z-index: 1;
+}
+
+.counter {
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 14px;
+  height: 14px;
+  overflow: hidden;
+  padding: 0 4px;
+  background: colors.$additional-teal;
+  color: #fff;
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  border-radius: 32px;
+  z-index: 1;
+}

package/desktop/components/modifiers/group/modifiers-group.module.scss

@@ -23,6 +23,8 @@
   }
   &.invisible {
     opacity: 0;
+    cursor: default;
+    pointer-events: none;
   }
 }
 

package/desktop/components/product-carousel/index.d.ts

@@ -27,5 +27,5 @@ export interface ProductCarouselProps {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ProductCarousel: ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps) => JSX.Element;
+export declare function ProductCarousel({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps): JSX.Element;
 export {};

package/desktop/components/product-carousel/index.js

@@ -51,7 +51,7 @@ const getSizeClasses = (size = {}) => [
  * @param props Свойства.
  * @return Элемент.
  */
-const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) => {
+function ProductCarousel({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) {
     const layer = (0, layer_1.useLayer)();
     const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(null);
     const cardShow = (0, utils_1.useAllowFlag)();
@@ -66,7 +66,8 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
         items = children ? [children] : [];
     }
     // вычисляем ширину элемента карусели для позиционирования стрелок
-    const itemWidth = (0, utils_1.useChildWidth)(rootRef, `.${cx('item')}`, [items.length]);
+    const firstItemRef = (0, react_1.useRef)(null);
+    const itemWidth = (0, utils_1.useClientWidth)(firstItemRef, [items.length]);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
     const options = (0, react_1.useMemo)(() => ({ rootMargin: '200px 0px 200px 0px' }), []);
     (0, intersection_1.useIntersection)(rootRef, entry => {
@@ -88,34 +89,12 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
                     top: `${itemWidth / 2}px`,
                 },
             },
-        }), { renderItem: ([item, index]) => (react_1.default.createElement("div", { "data-testid": 'product-carousel:item', className: cx('item', getSizeClasses(itemSize)), onMouseEnter: e => {
+        }), { renderItem: ([item, index], realIndex) => (react_1.default.createElement(ProductCarouselItem, { rootRef: realIndex === 0 ? firstItemRef : undefined, withHoverCard: withHoverCard, className: cx(getSizeClasses(itemSize)), onMouseEnter: e => {
                     if (cardShow.allowed()) {
                         targetItemRef.current = e.currentTarget;
                         setActiveItemIndex(index);
                     }
-                } }, (0, react_1.cloneElement)(item, {
-                children: react_1.Children.toArray(item.props.children).reduce((list, child) => {
-                    if ((0, react_1.isValidElement)(child)) {
-                        switch (child.type) {
-                            case product_info_1.Parts.Image: {
-                                // иконки у картинки скрываем если есть HoverCard
-                                list.push(withHoverCard ? (0, react_1.cloneElement)(child, { children: undefined }) : child);
-                                break;
-                            }
-                            case product_info_1.Parts.Footer:
-                                // футер не выводим если есть HoverCard
-                                !withHoverCard && list.push(child);
-                                break;
-                            default: {
-                                // остальное выводим как есть
-                                list.push(child);
-                                break;
-                            }
-                        }
-                    }
-                    return list;
-                }, []),
-            }))), 
+                } }, item)), 
             // длительность прокрутки в Carousel - 320, делаем слегка с запасом
             // @todo после восстановления проверить позицию курсора чтобы показать карточку (если будет критично)
             onChangeTargetIndex: () => cardShow.disallowFor(360) }))),
@@ -123,5 +102,35 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
             activeItemIndex !== null &&
             items[activeItemIndex] &&
             [items[activeItemIndex]].map(item => (react_1.default.createElement(hover_card_1.HoverCard, Object.assign({ key: activeItemIndex, targetRef: targetItemRef, onMouseLeave: () => setActiveItemIndex(null) }, item.props))))));
-};
+}
 exports.ProductCarousel = ProductCarousel;
+/**
+ * Элемент карусели. Выведет базовый контент.
+ * Полное содержимое будет выведено во всплывающей карточке.
+ * @inheritdoc
+ */
+function ProductCarouselItem({ rootRef, className, onMouseEnter, withHoverCard, children, }) {
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": 'product-carousel:item', className: cx('item', className), onMouseEnter: onMouseEnter }, (0, react_1.cloneElement)(children, {
+        children: react_1.Children.toArray(children.props.children).reduce((list, child) => {
+            if ((0, react_1.isValidElement)(child)) {
+                switch (child.type) {
+                    case product_info_1.Parts.Image: {
+                        // иконки у картинки скрываем если есть HoverCard
+                        list.push(withHoverCard ? (0, react_1.cloneElement)(child, { children: undefined }) : child);
+                        break;
+                    }
+                    case product_info_1.Parts.Footer:
+                        // футер не выводим если есть HoverCard
+                        !withHoverCard && list.push(child);
+                        break;
+                    default: {
+                        // остальное выводим как есть
+                        list.push(child);
+                        break;
+                    }
+                }
+            }
+            return list;
+        }, []),
+    })));
+}

package/desktop/components/product-carousel/utils.d.ts

@@ -9,9 +9,8 @@ export declare const useAllowFlag: () => {
 };
 /**
  * Возвращает ширину дочернего элемента.
- * @param ref Ref элемента.
- * @param selector CSS-селектор дочернего элемента.
+ * @param ref Ref дочернего элемента.
  * @param deps Массив зависимостей от которых зависит пересчет.
  * @return Ширина.
  */
-export declare const useChildWidth: (ref: React.RefObject<HTMLElement | null>, selector: string, deps?: React.DependencyList) => number | null;
+export declare const useClientWidth: (ref: React.RefObject<HTMLElement | null>, deps?: React.DependencyList) => number | null;

package/desktop/components/product-carousel/utils.js

@@ -1,11 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChildWidth = exports.useAllowFlag = void 0;
+exports.useClientWidth = exports.useAllowFlag = void 0;
 const react_1 = require("react");
-const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
 /**
  * Возвращает объект работы с флагом, который автоматически возвращается в true через заданный промежуток времени.
  * @return Объект работы с флагом.
@@ -25,23 +21,24 @@ const useAllowFlag = () => {
 exports.useAllowFlag = useAllowFlag;
 /**
  * Возвращает ширину дочернего элемента.
- * @param ref Ref элемента.
- * @param selector CSS-селектор дочернего элемента.
+ * @param ref Ref дочернего элемента.
  * @param deps Массив зависимостей от которых зависит пересчет.
  * @return Ширина.
  */
-const useChildWidth = (ref, selector, deps) => {
-    const [itemWidth, setItemWidth] = (0, react_1.useState)(null);
-    const update = (0, react_1.useCallback)(() => {
-        if (ref.current) {
-            const child = ref.current.querySelector(selector);
-            child && setItemWidth(child.clientWidth);
-        }
-    }, [ref]);
+const useClientWidth = (ref, deps = []) => {
+    const [width, setWidth] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        ref.current && update();
-        return (0, on_1.default)(window, 'resize', update);
-    }, deps);
-    return itemWidth;
+        if (!ref.current) {
+            return;
+        }
+        const element = ref.current;
+        const observer = new ResizeObserver(() => {
+            setWidth(element.clientWidth);
+        });
+        observer.observe(ref.current);
+        setWidth(element.clientWidth);
+        return observer.disconnect();
+    }, [ref, ...deps]);
+    return width;
 };
-exports.useChildWidth = useChildWidth;
+exports.useClientWidth = useClientWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "16.0.0-alpha.0",
+  "version": "16.0.0-alpha.2",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
-    "@sima-land/ui-nucleons": "^45.0.0-alpha.0",
+    "@sima-land/ui-nucleons": "^45.0.0-alpha.3",
     "@sima-land/ui-quarks": "^3.6.0",
     "react": ">=17",
     "react-dom": ">=17"
@@ -56,7 +56,9 @@
     "@svgr/plugin-jsx": "^6.5.1",
     "@svgr/plugin-svgo": "^6.5.1",
     "@svgr/webpack": "^6.5.1",
+    "@testing-library/dom": "^9.2.0",
     "@testing-library/react": "^12.1.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^29.4.0",
     "@types/lodash": "^4.14.191",