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

package/common/components/media-modal/parts/parts.module.scss

@@ -0,0 +1,21 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.header-layout {
+  min-height: 40px; // ВАЖНО: чтобы при отсутствии табов не уменьшалась высота
+  @include breakpoints.up('xs') {
+    flex-wrap: wrap;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+}
+
+.header-button {
+  margin-top: 16px !important;
+  @include breakpoints.down('xs') {
+    &:first-child {
+      margin-left: auto;
+    }
+  }
+}

package/common/components/media-modal/parts/product-brief.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+export interface ProductBriefProps extends HTMLAttributes<HTMLDivElement> {
+    size?: 's' | 'l';
+    title?: string;
+    price?: string | number;
+    currency?: string;
+    footer?: ReactNode;
+    href?: string;
+    onLinkClick?: MouseEventHandler<HTMLAnchorElement>;
+    imageSrc?: string;
+}
+/**
+ * Блок товара-рекомендации.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ProductBrief({ size: sizeProp, imageSrc, title, price, currency, footer, className, href, onLinkClick, ...restProps }: ProductBriefProps): JSX.Element;

package/common/components/media-modal/parts/product-brief.js

@@ -0,0 +1,42 @@
+"use strict";
+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.ProductBrief = void 0;
+const react_1 = __importDefault(require("react"));
+const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
+const price_1 = require("@sima-land/ui-nucleons/price");
+const classnames_1 = __importDefault(require("classnames"));
+const product_brief_module_scss_1 = __importDefault(require("./product-brief.module.scss"));
+const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
+/**
+ * Блок товара-рекомендации.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ProductBrief(_a) {
+    var { size: sizeProp, imageSrc, title, price, currency, footer, className, href, onLinkClick } = _a, restProps = __rest(_a, ["size", "imageSrc", "title", "price", "currency", "footer", "className", "href", "onLinkClick"]);
+    const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    const size = (sizeProp !== null && sizeProp !== void 0 ? sizeProp : desktop) ? 'l' : 's';
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(product_brief_module_scss_1.default.root, product_brief_module_scss_1.default[`size-${size}`], className) }, restProps),
+        react_1.default.createElement("a", { className: product_brief_module_scss_1.default.image, href: href, onClick: onLinkClick },
+            react_1.default.createElement(image_overlay_1.ImageOverlay, { className: product_brief_module_scss_1.default.overlay },
+                react_1.default.createElement("img", { src: imageSrc }))),
+        react_1.default.createElement("div", { className: product_brief_module_scss_1.default.info },
+            react_1.default.createElement("a", { className: product_brief_module_scss_1.default.title, href: href, onClick: onLinkClick }, title),
+            price && react_1.default.createElement(price_1.Price, { className: product_brief_module_scss_1.default.price, value: price, currencyGrapheme: currency })),
+        footer && react_1.default.createElement("div", { className: product_brief_module_scss_1.default.footer }, footer)));
+}
+exports.ProductBrief = ProductBrief;

package/common/components/media-modal/parts/product-brief.module.scss

@@ -0,0 +1,100 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  display: grid;
+}
+
+.image {
+  display: block;
+  .overlay {
+    width: 100%;
+    height: 100%;
+    > img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+}
+
+.info {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.title {
+  display: block;
+  text-decoration: none;
+  color: colors.$basic-gray87;
+}
+
+.price {
+  font-weight: 600;
+}
+
+.footer {
+  display: flex;
+  > * {
+    width: 128px;
+    --stepper-width: 128px;
+  }
+  > *:last-child {
+    margin-left: 8px;
+  }
+}
+
+.size-s {
+  column-gap: 8px;
+  row-gap: 16px;
+  grid-template-columns: 88px 1fr;
+  .image {
+    width: 88px;
+    height: 88px;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+  .info {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+  .title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+  .title + .price {
+    margin-top: 4px;
+  }
+  .footer {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3;
+  }
+}
+
+.size-l {
+  column-gap: 16px;
+  row-gap: 16px;
+  grid-template-columns: 112px 1fr;
+  .image {
+    width: 112px;
+    height: 112px;
+    grid-column: 1 / 2;
+    grid-row: 1 / 3;
+  }
+  .info {
+    min-width: 0; // ВАЖНО: чтобы title не вызывал переполнение
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    .title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .footer {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+  }
+}

package/common/components/media-modal/parts/review.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface ReviewProps {
+    rating?: number;
+    ratingPlaceholder?: string;
+    author?: string;
+    children?: ReactNode;
+}
+/**
+ * Отзыв.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Review({ rating, ratingPlaceholder, author, children }: ReviewProps): JSX.Element;

package/common/components/media-modal/parts/review.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Review = void 0;
+const react_1 = __importDefault(require("react"));
+const rating_1 = require("@sima-land/ui-nucleons/rating");
+const text_button_1 = require("@sima-land/ui-nucleons/text-button");
+const review_module_scss_1 = __importDefault(require("./review.module.scss"));
+/**
+ * Отзыв.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Review({ rating, ratingPlaceholder, author, children }) {
+    return (react_1.default.createElement("div", { className: review_module_scss_1.default.root },
+        react_1.default.createElement("div", { className: review_module_scss_1.default.rating }, typeof rating === 'number' ? react_1.default.createElement(rating_1.Rating, { size: 's', value: rating }) : ratingPlaceholder),
+        react_1.default.createElement("div", { className: review_module_scss_1.default.author }, author),
+        react_1.default.createElement("div", { className: review_module_scss_1.default.link },
+            react_1.default.createElement(text_button_1.TextButton, { size: 's' }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u043E\u0442\u0437\u044B\u0432\u0443")),
+        react_1.default.createElement("div", { className: review_module_scss_1.default.content }, children)));
+}
+exports.Review = Review;

package/common/components/media-modal/parts/review.module.scss

@@ -0,0 +1,70 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  display: grid;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.rating {
+  height: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.author {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: colors.$basic-gray24;
+}
+
+@include breakpoints.down('xs') {
+  .root {
+    gap: 12px;
+    grid-template-columns: auto 1fr;
+  }
+  .rating {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+  .author {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+  .link {
+    grid-column: 1 / 3;
+  }
+  .content {
+    grid-column: 1 / 3;
+  }
+}
+
+@include breakpoints.up('xs') {
+  .root {
+    column-gap: 16px;
+    row-gap: 12px;
+    grid-template-columns: auto 1fr auto;
+  }
+  .rating {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+  .author {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: colors.$basic-gray24;
+  }
+  .link {
+    grid-column: 3 / 4;
+    grid-row: 1 / 2;
+  }
+  .content {
+    grid-column: 1 / 4;
+    grid-row: 2 / 3;
+  }
+}

package/common/components/media-modal/parts/scroll-section.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+/**
+ * Секция с прокруткой по горизонтали по дизайн-гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ScrollSection({ children }: {
+    children?: ReactNode;
+}): JSX.Element;

package/common/components/media-modal/parts/scroll-section.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollSection = void 0;
+const layout_1 = require("@sima-land/ui-nucleons/layout");
+const react_1 = __importDefault(require("react"));
+const scroll_section_module_scss_1 = __importDefault(require("./scroll-section.module.scss"));
+/**
+ * Секция с прокруткой по горизонтали по дизайн-гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ScrollSection({ children }) {
+    return (react_1.default.createElement(layout_1.Layout, { disabledOn: ['mxs', 'ms'] },
+        react_1.default.createElement("div", { className: scroll_section_module_scss_1.default.inner }, children)));
+}
+exports.ScrollSection = ScrollSection;

package/common/components/media-modal/parts/scroll-section.module.scss

@@ -0,0 +1,18 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.inner {
+  display: flex;
+  overflow-x: scroll;
+  @include utils.hidden-scrollbars;
+  @include breakpoints.down('mm') {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  > * {
+    flex-shrink: 0;
+  }
+  > *:not(:last-child) {
+    margin-right: 8px;
+  }
+}

package/common/components/media-modal/parts/thumbnails.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+export interface ThumbnailProps {
+    size?: 's' | 'l';
+    type: 'icon-360' | 'icon-video' | 'preview-image' | 'preview-video';
+    src?: string;
+    alt?: string;
+    checked?: boolean;
+    onClick?: React.MouseEventHandler;
+    className?: string;
+    loading?: boolean;
+}
+export interface ThumbnailsProps {
+    size?: 's' | 'l';
+    children?: ReactNode;
+}
+/**
+ * Компонент превью медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Thumbnail({ size: sizeFromProps, type, src, alt, checked, onClick, className, loading, }: ThumbnailProps): JSX.Element;
+/**
+ * Компонент превью медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Thumbnails({ children, ...rest }: ThumbnailsProps): JSX.Element | null;

package/common/components/media-modal/parts/thumbnails.js

@@ -0,0 +1,92 @@
+"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.Thumbnails = exports.Thumbnail = void 0;
+const react_1 = __importStar(require("react"));
+const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
+const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
+const play_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/play"));
+const _360_svg_1 = __importDefault(require("../../../../desktop/components/gallery-modal/icons/360.svg"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const thumbnails_module_scss_1 = __importDefault(require("./thumbnails.module.scss"));
+const utils_1 = require("../utils");
+const scroll_section_1 = require("./scroll-section");
+const cx = bind_1.default.bind(thumbnails_module_scss_1.default);
+/**
+ * Компонент превью медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Thumbnail({ size: sizeFromProps, type, src, alt, checked, onClick, className, loading, }) {
+    var _a;
+    const { size: sizeFromContext } = (0, react_1.useContext)(ThumbnailsContext);
+    const size = (_a = sizeFromProps !== null && sizeFromProps !== void 0 ? sizeFromProps : sizeFromContext) !== null && _a !== void 0 ? _a : 'l';
+    const rootClassName = cx('thumbnail', `size-${size}`, (type === null || type === void 0 ? void 0 : type.startsWith('icon-')) && 'iconic', checked && 'checked', loading && 'loading', className);
+    if (loading) {
+        return react_1.default.createElement("button", { className: rootClassName, onClick: onClick, "data-testid": 'thumbnail' });
+    }
+    return (react_1.default.createElement("button", { className: rootClassName, onClick: onClick, "data-testid": 'thumbnail' },
+        (type === null || type === void 0 ? void 0 : type.startsWith('preview-')) && (react_1.default.createElement(image_overlay_1.ImageOverlay, { className: cx('image-overlay') },
+            react_1.default.createElement("img", { src: src, alt: alt }))),
+        type === 'preview-video' && react_1.default.createElement("span", { className: cx('play') }),
+        type === 'icon-360' && react_1.default.createElement(_360_svg_1.default, { fill: 'currentColor' }),
+        type === 'icon-video' && react_1.default.createElement(play_1.default, { width: 32, height: 32, fill: 'currentColor' })));
+}
+exports.Thumbnail = Thumbnail;
+/**
+ * Компонент превью медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Thumbnails(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const mounted = (0, utils_1.useMounted)();
+    const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    if (!mounted) {
+        return null;
+    }
+    if (!desktop) {
+        return (react_1.default.createElement(ThumbnailsContext.Provider, { value: Object.assign({ size: 's' }, rest) },
+            react_1.default.createElement(scroll_section_1.ScrollSection, null, children)));
+    }
+    return (react_1.default.createElement(ThumbnailsContext.Provider, { value: Object.assign({ size: 'l' }, rest) },
+        react_1.default.createElement("div", { className: cx('list-desktop') }, children)));
+}
+exports.Thumbnails = Thumbnails;
+const ThumbnailsContext = (0, react_1.createContext)({});

package/common/components/media-modal/parts/thumbnails.module.scss

@@ -0,0 +1,104 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.thumbnail {
+  --thumbnail-color: #{colors.$basic-gray12};
+  --thumbnail-border-size: 1px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: 4px;
+  border: 0;
+  padding: 0;
+  color: var(--thumbnail-color);
+  outline: 0;
+  &.size-s {
+    width: 48px;
+    height: 48px;
+  }
+  &.size-l {
+    width: 80px;
+    height: 80px;
+  }
+  &.iconic {
+    --thumbnail-border-size: 2px;
+  }
+  &.checked {
+    --thumbnail-color: #{colors.$basic-blue};
+    --thumbnail-border-size: 2px;
+  }
+  &:not(.checked):not(.loading):hover {
+    cursor: pointer;
+    --thumbnail-color: #{colors.$basic-gray38};
+  }
+  &.loading {
+    background: colors.$basic-gray4;
+    --thumbnail-color: #{colors.$basic-gray4};
+    --thumbnail-border-size: 0;
+  }
+  .play {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 2;
+    pointer-events: none;
+    &::after {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 4px 0 4px 7px;
+      border-color: transparent transparent transparent #fff;
+      transform: translateX(1px);
+    }
+  }
+  .image-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    overflow: hidden;
+    > img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--thumbnail-border-size) var(--thumbnail-color);
+  }
+}
+
+.list-desktop {
+  display: flex;
+  height: 0;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  @include utils.semi-stylized-scrollbars;
+  > * {
+    flex-shrink: 0;
+  }
+  > *:not(:last-child) {
+    margin-bottom: 8px;
+  }
+}

package/common/components/media-modal/types.d.ts

@@ -0,0 +1,14 @@
+export type MediaType = 'image' | 'video' | '360';
+export interface MediaShape<T extends string, D extends Record<string, any>> {
+    type: T;
+    data: D;
+}
+export type MediaData = MediaShape<'image', {
+    src: string;
+    alt?: string;
+}> | MediaShape<'video', {
+    src: string;
+    alt?: string;
+}> | MediaShape<'360', {
+    photos: string[];
+}>;

package/common/components/media-modal/types.js

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

package/common/components/media-modal/utils.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+/**
+ * Возвращает ограничивающий прямоугольник элемента в виде состояния.
+ * @param ref Ref элемента.
+ * @return Прямоугольник.
+ */
+export declare function useClientRect(ref: RefObject<HTMLElement>): {
+    ready: boolean;
+    width: number;
+    height: number;
+};
+/**
+ * Возвращает true если компонент смонтирован.
+ * @return True если компонент смонтирован.
+ */
+export declare function useMounted(): boolean;

package/common/components/media-modal/utils.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMounted = exports.useClientRect = void 0;
+const react_1 = require("react");
+/**
+ * Возвращает ограничивающий прямоугольник элемента в виде состояния.
+ * @param ref Ref элемента.
+ * @return Прямоугольник.
+ */
+function useClientRect(ref) {
+    const [rect, setRect] = (0, react_1.useState)(() => ({
+        ready: false,
+        width: 0,
+        height: 0,
+    }));
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            const element = ref.current;
+            setRect({
+                ready: true,
+                width: element.getBoundingClientRect().width,
+                height: element.getBoundingClientRect().height,
+            });
+            const observer = new ResizeObserver(() => {
+                setRect({
+                    ready: true,
+                    width: element.getBoundingClientRect().width,
+                    height: element.getBoundingClientRect().height,
+                });
+            });
+            observer.observe(element);
+            return () => observer.disconnect();
+        }
+    }, [ref]);
+    return rect;
+}
+exports.useClientRect = useClientRect;
+/**
+ * Возвращает true если компонент смонтирован.
+ * @return True если компонент смонтирован.
+ */
+function useMounted() {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
+    return mounted;
+}
+exports.useMounted = useMounted;