feat(plate): added mobile and responsive versions component

.changeset/dull-rules-boil.md

@@ -0,0 +1,5 @@
+---
+"@alfalab/core-components-plate": major
+---
+
+Для компонента Plate добавлены мобильная и адаптивная версии компонента. Responsive компонент теперь экспортируется из индексного файла

packages/plate/package.json

@@ -6,6 +6,26 @@
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
+    "exports": {
+        ".": {
+            "import": "./esm/index.js",
+            "require": "./index.js"
+        },
+        "./mobile": {
+            "import": "./esm/mobile.js",
+            "require": "./mobile.js"
+        },
+        "./desktop": {
+            "import": "./esm/desktop.js",
+            "require": "./desktop.js"
+        },
+        "./esm": "./esm/index.js",
+        "./cssm": "./cssm/index.js",
+        "./modern": "./modern/index.js",
+        "./esm/*": "./esm/*",
+        "./cssm/*": "./cssm/*",
+        "./modern/*": "./modern/*"
+    },
     "scripts": {
         "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
     },
@@ -19,6 +39,7 @@
     "dependencies": {
         "@alfalab/core-components-button": "^8.4.0",
         "@alfalab/core-components-icon-button": "^6.1.1",
+        "@alfalab/core-components-mq": "^4.1.4",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "^1.1.0",

packages/plate/src/Component.desktop.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+
+import { BasePlate, BasePlateProps } from './components/base-plate';
+
+import styles from './desktop.module.css';
+
+export type PlateDesktopProps = Omit<BasePlateProps, 'styles'>;
+
+export const PlateDesktop = forwardRef<HTMLDivElement, PlateDesktopProps>((restProps, ref) => (
+    <BasePlate {...restProps} styles={styles} ref={ref} />
+));

packages/plate/src/Component.mobile.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+
+import { BasePlate, BasePlateProps } from './components/base-plate';
+
+import styles from './mobile.module.css';
+
+export type PlateMobileProps = Omit<BasePlateProps, 'styles' | 'limitContentWidth'>;
+
+export const PlateMobile = forwardRef<HTMLDivElement, PlateMobileProps>((restProps, ref) => (
+    <BasePlate {...restProps} styles={styles} ref={ref} />
+));

packages/plate/src/Component.responsive.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { BasePlateProps } from './components/base-plate';
+import { PlateDesktop } from './Component.desktop';
+import { PlateMobile } from './Component.mobile';
+
+export type PlateProps = Omit<BasePlateProps, 'styles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+
+export const Plate = forwardRef<HTMLDivElement, PlateProps>(
+    ({ children, breakpoint = 1024, ...restProps }, ref) => {
+        const query = `(min-width: ${breakpoint}px)`;
+
+        const [isDesktop] = useMatchMedia(query);
+
+        const Component = isDesktop ? PlateDesktop : PlateMobile;
+
+        return (
+            <Component ref={ref} {...restProps}>
+                {children}
+            </Component>
+        );
+    },
+);

packages/plate/src/Component.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 
 import userEvent from '@testing-library/user-event';
-import { Plate, PlateProps } from './index';
+import { PlateDesktop as Plate, PlateDesktopProps as PlateProps } from './desktop';
 import { Button } from '../../button/src';
 
 describe('Plate', () => {

packages/plate/src/__snapshots__/Component.test.tsx.snap

@@ -32,15 +32,15 @@ exports[`Plate Snapshots tests should match snapshot 1`] = `
         class="contentContainer limitWidth"
       >
         <div
-          class="bold"
+          class="bold bold"
         >
           title
         </div>
         <div
           class="content"
         >
           <div
-            class="description"
+            class="description description"
           >
             text
           </div>

packages/plate/src/component.screenshots.test.tsx

@@ -26,7 +26,10 @@ describe('Plate', () => {
                 buttons: true,
             },
         },
-        'transform:scale(1.3);padding:0 200px;',
+        'width:800px;transform:scale(1.3);padding:0 200px;',
+        {
+            viewport: { width: 1024, height: 600 },
+        },
     );
 });
 
@@ -54,10 +57,6 @@ describe(
         screenshotOpts: {
             fullPage: true,
         },
-        viewport: {
-            width: 840,
-            height: 100,
-        },
     }),
 );
 
@@ -75,15 +74,15 @@ describe(
                             'Вам одобрено. Согласитесь на предложение, спустя какое-то время специалист с Вами свяжется для уточнения информации',
                         view: ['negative', 'positive', 'attention', 'common'],
                     },
-                    size: { width: 400, height: 120 },
+                    size: { width: 400, height: 140 },
                 }),
             ],
         ],
         screenshotOpts: {
             fullPage: true,
         },
         viewport: {
-            width: 840,
+            width: 1024,
             height: 100,
         },
     }),
@@ -103,15 +102,15 @@ describe(
                             'Вам одобрено. Согласитесь на предложение, спустя какое-то время специалист с Вами свяжется для уточнения информации',
                         rowLimit: [undefined, 1, 2, 3],
                     },
-                    size: { width: 400, height: 120 },
+                    size: { width: 400, height: 140 },
                 }),
             ],
         ],
         screenshotOpts: {
             fullPage: true,
         },
         viewport: {
-            width: 840,
+            width: 1024,
             height: 100,
         },
     }),
@@ -129,8 +128,9 @@ describe(
                 buttons: true,
                 leftAddons: [false, true],
             },
+            wrapperStyles: 'width:500px',
         }),
-        viewport: { width: 500, height: 160 },
+        viewport: { width: 1024, height: 160 },
     }),
 );
 
@@ -147,8 +147,9 @@ describe(
                 leftAddons: true,
                 buttons: true,
             },
+            wrapperStyles: 'width:500px',
         }),
-        viewport: { width: 500, height: 160 },
+        viewport: { width: 1024, height: 160 },
     }),
 );
 
@@ -173,7 +174,7 @@ describe(
             fullPage: true,
         },
         viewport: {
-            width: 840,
+            width: 1024,
             height: 100,
         },
     }),