feat(plasma-temple): product - export by platforms

packages/plasma-temple/src/components/Product/Product.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import { detectDevice, DeviceKind } from '@sberdevices/plasma-ui/utils';
+
+import { DeviceComponent } from '../DeviceComponent/DeviceComponent';
 
 import { ProductCommon, ProductProps } from './Product@common';
 import { ProductMobile } from './Product@mobile';
 
-const mapDeviceToProduct: Record<DeviceKind, React.FC<ProductProps>> = {
-    sberBox: ProductCommon,
-    sberPortal: ProductCommon,
-    mobile: ProductMobile,
-};
-
 /** Компонент страницы товара (без заголовка) */
-export const Product = mapDeviceToProduct[detectDevice()];
+export const Product: React.FC<ProductProps> = (props) => (
+    <DeviceComponent sberbox={ProductCommon} sberportal={ProductCommon} mobile={ProductMobile} props={props} />
+);

packages/plasma-temple/src/components/Product/Product@common.tsx

@@ -8,8 +8,8 @@ import { ProductImage } from './ProductImage/ProductImage';
 import { ProductActionButton, ProductActionButtonProps } from './ProductActionButton/ProductActionButton';
 import { ProductVariationSwitcher } from './ProductVariationSwitcher/ProductVariationSwitcher';
 import { ProductDetails } from './ProductDetails/ProductDetails';
-import { ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails';
-import { ProductInfo } from './ProductInfo/ProductInfo';
+import { ExpandableProductDetailsCommon } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@common';
+import { ProductInfoCommon } from './ProductInfo/ProductInfo@common';
 import { ProductEntity, ProductVariation as ProductVariationType } from './types';
 import { useScrollByBreakpoints } from './hooks/useScrollByBreakpoints';
 import { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
@@ -165,7 +165,7 @@ export const ProductCommon = ({
                 {variations.length > 0 && (
                     <div ref={variationRef}>
                         {variations.map((variation) => (
-                            <StyledSmallSection>
+                            <StyledSmallSection key={String(variation.id)}>
                                 <ProductVariation {...variation} onChange={onChangeVariation} />
                             </StyledSmallSection>
                         ))}
@@ -178,7 +178,7 @@ export const ProductCommon = ({
                 )}
                 {details && (
                     <StyledSection ref={detailsRef}>
-                        <ExpandableProductDetails
+                        <ExpandableProductDetailsCommon
                             title={details.title}
                             details={details.values}
                             fixedLines={6}
@@ -188,7 +188,7 @@ export const ProductCommon = ({
                 )}
                 {description && (
                     <StyledSection ref={descriptionRef}>
-                        <ProductInfo
+                        <ProductInfoCommon
                             title={description.title}
                             info={description.content}
                             renderToggleButton={renderToggleButton}

packages/plasma-temple/src/components/Product/Product@mobile.tsx

@@ -5,8 +5,8 @@ import { ProductTitle } from './ProductTitle/ProductTitle';
 import { ProductPrice } from './ProductPrice/ProductPrice';
 import { ProductActionButton } from './ProductActionButton/ProductActionButton';
 import { ProductDetails } from './ProductDetails/ProductDetails';
-import { ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails';
-import { ProductInfo } from './ProductInfo/ProductInfo';
+import { ExpandableProductDetailsMobile } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@mobile';
+import { ProductInfoMobile } from './ProductInfo/ProductInfo@mobile';
 import { ProductProps, ProductVariation } from './Product@common';
 import { ProductImageSlider } from './ProductImageSlider/ProductImageSlider';
 import { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
@@ -48,7 +48,7 @@ export const ProductMobile = ({
                 <ProductActionButton {...actionButtonProps} />
             </StyledSection>
             {variations?.map((variation) => (
-                <StyledSmallSection>
+                <StyledSmallSection key={String(variation.id)}>
                     <ProductVariation {...variation} onChange={onChangeVariation} />
                 </StyledSmallSection>
             ))}
@@ -59,12 +59,12 @@ export const ProductMobile = ({
             )}
             {details && (
                 <StyledSection>
-                    <ExpandableProductDetails title={details.title} details={details.values} />
+                    <ExpandableProductDetailsMobile title={details.title} details={details.values} />
                 </StyledSection>
             )}
             {description && (
                 <StyledSection>
-                    <ProductInfo title={description.title} info={description.content} />
+                    <ProductInfoMobile title={description.title} info={description.content} />
                 </StyledSection>
             )}
             {recommendations && recommendations.items.length > 0 && (

packages/plasma-temple/src/components/Product/ProductDetails/ExpandableProductDetails/ExpandableProductDetails.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import { detectDevice, DeviceKind } from '@sberdevices/plasma-ui/utils';
+
+import { DeviceComponent } from '../../../DeviceComponent/DeviceComponent';
 
 import { ExpandableProductDetailsCommon, ExpandableProductDetailsProps } from './ExpandableProductDetails@common';
 import { ExpandableProductDetailsMobile } from './ExpandableProductDetails@mobile';
 
-const mapDeviceToExpandableProductDetails: Record<DeviceKind, React.FC<ExpandableProductDetailsProps>> = {
-    sberBox: ExpandableProductDetailsCommon,
-    sberPortal: ExpandableProductDetailsCommon,
-    mobile: ExpandableProductDetailsMobile,
-};
-
 /**
  * Компонент для отображения деталей (характеристик) товара
  * с возможность по умолчанию скрывать часть характеристик
- * Актуален для устройств с пультом и SberPortal
  */
-export const ExpandableProductDetails = mapDeviceToExpandableProductDetails[detectDevice()];
+export const ExpandableProductDetails: React.FC<ExpandableProductDetailsProps> = (props) => (
+    <DeviceComponent
+        sberbox={ExpandableProductDetailsCommon}
+        sberportal={ExpandableProductDetailsCommon}
+        mobile={ExpandableProductDetailsMobile}
+        props={props}
+    />
+);

packages/plasma-temple/src/components/Product/ProductDetails/ProductDetails.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
-import { detectDevice, DeviceKind, Headline3, Button2, ParagraphText2 } from '@sberdevices/plasma-ui';
+import styled, { css } from 'styled-components';
+import { mediaQuery } from '@sberdevices/plasma-ui';
+import { button2, headline3, paragraph2 } from '@sberdevices/plasma-tokens';
 
 import { DetailsItemProps, ProductDetailsItem } from './ProductDetailsItem/ProductDetailsItem';
 
@@ -22,13 +23,23 @@ const StyledProductDetailsItemContainer = styled.div`
     }
 `;
 
-const mapDeviceToTitle: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText2,
-    sberPortal: Button2,
-    mobile: Headline3,
-};
+export const StyledTitle = styled.div`
+    ${paragraph2}
+
+    ${mediaQuery(
+        'M',
+        2,
+    )(css`
+        ${button2}
+    `)}
+
+    ${mediaQuery(
+        'S',
+        1,
+    )(css`
+        ${headline3}
+    `)}
 
-export const StyledTitle = styled(mapDeviceToTitle[detectDevice()])`
     margin-bottom: 0.75rem;
 `;
 

packages/plasma-temple/src/components/Product/ProductDetails/ProductDetailsItem/ProductDetailsItem.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import {
-    detectDevice,
-    DeviceKind,
-    Footnote1,
-    Footnote2,
-    mediaQuery,
-    ParagraphText1,
-    ParagraphText2,
-} from '@sberdevices/plasma-ui';
-import { secondary } from '@sberdevices/plasma-tokens';
+import { mediaQuery } from '@sberdevices/plasma-ui';
+import { footnote1, footnote2, paragraph1, paragraph2, secondary } from '@sberdevices/plasma-tokens';
 
 import { useWindowInnerWidth } from '../../../../hooks/useWindowInnerWidth';
 
@@ -24,14 +16,16 @@ const StyledDetailsItemContainer = styled.div`
     align-items: flex-end;
 `;
 
-const mapDeviceToName: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText1,
-    sberPortal: Footnote1,
-    mobile: Footnote1,
-};
-
-const StyledName = styled(mapDeviceToName[detectDevice()])<{ upperCase?: boolean }>`
+const StyledName = styled.div<{ upperCase?: boolean }>`
     color: ${secondary};
+    ${footnote1}
+
+    ${mediaQuery(
+        'XL',
+        2,
+    )(css`
+        ${paragraph1}
+    `)}
 
     ${({ upperCase }) =>
         upperCase &&
@@ -57,13 +51,16 @@ const StyledSpace = styled.div`
     `)}
 `;
 
-const mapDeviceToValue: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText2,
-    sberPortal: Footnote2,
-    mobile: Footnote2,
-};
+const StyledValue = styled.div`
+    ${footnote2}
 
-const StyledValue = mapDeviceToValue[detectDevice()];
+    ${mediaQuery(
+        'XL',
+        2,
+    )(css`
+        ${paragraph2}
+    `)}
+`;
 
 interface LineParams {
     maxSymbolsInLine: number;

packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { detectDevice, DeviceKind } from '@sberdevices/plasma-ui/utils';
+
+import { DeviceComponent } from '../../DeviceComponent/DeviceComponent';
 
 import { ProductInfoCommon, ProductInfoProps } from './ProductInfo@common';
 import { ProductInfoMobile } from './ProductInfo@mobile';
 
-const mapDeviceToProductInfo: Record<DeviceKind, React.FC<ProductInfoProps>> = {
-    sberBox: ProductInfoCommon,
-    sberPortal: ProductInfoCommon,
-    mobile: ProductInfoMobile,
-};
-
 /**
  * Компонент для отображения информации (описания) о товаре
- * Актуален для устройств с пультом и SberPortal
  */
-export const ProductInfo = mapDeviceToProductInfo[detectDevice()];
+export const ProductInfo: React.FC<ProductInfoProps> = (props) => (
+    <DeviceComponent
+        sberbox={ProductInfoCommon}
+        sberportal={ProductInfoCommon}
+        mobile={ProductInfoMobile}
+        props={props}
+    />
+);

packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo@common.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import {
-    detectDevice,
-    DeviceKind,
-    Footnote1,
-    Footnote2,
-    Headline3,
-    ParagraphText1,
-    ParagraphText2,
-} from '@sberdevices/plasma-ui';
-import { secondary } from '@sberdevices/plasma-tokens';
+import { mediaQuery } from '@sberdevices/plasma-ui';
+import { footnote1, footnote2, headline3, paragraph1, paragraph2, secondary } from '@sberdevices/plasma-tokens';
 
 import { useCollapse } from '../../Collapse/hooks/useCollapse';
 import { ProductToggleButton, ProductToggleButtonProps } from '../ProductToggleButton/ProductToggleButton';
@@ -27,26 +19,39 @@ export interface ProductInfoProps {
     renderToggleButton?: (props: Pick<ProductToggleButtonProps, 'expanded' | 'toggle'>) => React.ReactNode;
 }
 
-const mapDeviceToTitle: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText2,
-    sberPortal: Footnote2,
-    mobile: Headline3,
-};
+const StyledTitle = styled.div`
+    ${paragraph2}
+
+    ${mediaQuery(
+        'M',
+        2,
+    )(css`
+        ${footnote2}
+    `)}
+
+    ${mediaQuery(
+        'S',
+        1,
+    )(css`
+        ${headline3}
+    `)}
 
-const StyledTitle = styled(mapDeviceToTitle[detectDevice()])`
     margin-bottom: 0.5rem;
 `;
 
-const mapDeviceToInfo: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText1,
-    sberPortal: Footnote1,
-    mobile: Footnote1,
-};
-
-const StyledInfo = styled(mapDeviceToInfo[detectDevice()])<{
+const StyledInfo = styled.div<{
     expanded: boolean;
 }>`
     hyphens: none;
+    ${footnote1}
+
+    ${mediaQuery(
+        'XL',
+        2,
+    )(css`
+        ${paragraph1}
+    `)}
+
     ${({ expanded }) =>
         expanded &&
         css`

packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice.tsx

@@ -1,17 +1,55 @@
 import React from 'react';
-import { detectDevice } from '@sberdevices/plasma-ui/utils';
+import styled, { css } from 'styled-components';
+import { Col, mediaQuery, Price, Row } from '@sberdevices/plasma-ui';
+import { accent, headline2, headline3, primary } from '@sberdevices/plasma-tokens';
 
-import { DeviceFamily } from '../../../types';
-
-import { ProductPriceSberBox } from './ProductPrice@sberbox';
-import { ProductPriceSberPortal } from './ProductPrice@sberportal';
 import { ProductPriceProps } from './types';
 
-const mapDeviceToProductPrice: Record<DeviceFamily, React.FC<ProductPriceProps>> = {
-    sberBox: ProductPriceSberBox,
-    sberPortal: ProductPriceSberPortal,
-    mobile: ProductPriceSberPortal,
-};
+const StyledPrice = styled(Price)<{ old?: boolean }>`
+    ${headline2}
+
+    ${mediaQuery(
+        'M',
+        2,
+    )(css`
+        ${headline3}
+    `)}
+
+    ${mediaQuery(
+        'S',
+        1,
+    )(css`
+        ${headline3}
+    `)}
+
+    color: ${accent};
+    ${({ old }) =>
+        old &&
+        css`
+            color: ${primary};
+            opacity: 0.28;
+            text-decoration: line-through;
+        `}
+`;
 
 /** Компонент для отображения цены на странице товара */
-export const ProductPrice = mapDeviceToProductPrice[detectDevice()];
+export const ProductPrice: React.FC<ProductPriceProps> = ({ price, oldPrice, className, ...rest }) => {
+    if (!price) {
+        return null;
+    }
+
+    return (
+        <Row className={className}>
+            <Col>
+                <StyledPrice {...rest}>{price}</StyledPrice>
+            </Col>
+            {oldPrice && (
+                <Col>
+                    <StyledPrice {...rest} old>
+                        {oldPrice}
+                    </StyledPrice>
+                </Col>
+            )}
+        </Row>
+    );
+};