feat: Re-export "ElasticGrid" component

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -95,6 +95,8 @@ import { DsplM } from '@salutejs/plasma-typo';
 import { DsplS } from '@salutejs/plasma-typo';
 import { Editable } from '@salutejs/plasma-hope';
 import { EditableProps } from '@salutejs/plasma-hope';
+import { ElasticGrid } from '@salutejs/plasma-hope';
+import { ElasticGridProps } from '@salutejs/plasma-hope';
 import type { FC } from 'react';
 import type { FieldProps } from '@salutejs/plasma-core';
 import { FocusProps } from '@salutejs/plasma-core';
@@ -162,7 +164,6 @@ import { Price } from '@salutejs/plasma-hope';
 import { PriceProps } from '@salutejs/plasma-hope';
 import { Progress } from '@salutejs/plasma-hope';
 import { ProgressProps } from '@salutejs/plasma-hope';
-import { PropsWithChildren } from 'react';
 import { Radiobox } from '@salutejs/plasma-hope';
 import { RadioboxProps } from '@salutejs/plasma-hope';
 import { RadioGroup } from '@salutejs/plasma-hope';
@@ -448,15 +449,9 @@ export { Editable }
 
 export { EditableProps }
 
-// @public
-export const ElasticGrid: React_2.FC<PropsWithChildren<ElasticGridProps>>;
+export { ElasticGrid }
 
-// @public (undocumented)
-export interface ElasticGridProps {
-    gapX?: number;
-    gapY?: number;
-    minColWidth: number;
-}
+export { ElasticGridProps }
 
 export { FocusProps }
 

packages/plasma-b2c/src/components/ElasticGrid/ElasticGrid.component-test.tsx

@@ -0,0 +1 @@
+../../../../plasma-hope/src/components/ElasticGrid/ElasticGrid.component-test.tsx

packages/plasma-b2c/src/components/ElasticGrid/index.ts

@@ -1 +1,2 @@
-export * from './ElasticGrid';
+export { ElasticGrid } from '@salutejs/plasma-hope';
+export type { ElasticGridProps } from '@salutejs/plasma-hope';

packages/plasma-hope/api/plasma-hope.api.md

@@ -107,6 +107,7 @@ import { PinProps } from '@salutejs/plasma-core';
 import { Popup } from '@salutejs/plasma-core';
 import { PopupProps } from '@salutejs/plasma-core';
 import type { PriceProps as PriceProps_2 } from '@salutejs/plasma-core';
+import { PropsWithChildren } from 'react';
 import { radiuses } from '@salutejs/plasma-core';
 import { Ratio } from '@salutejs/plasma-core';
 import { default as React_2 } from 'react';
@@ -585,6 +586,16 @@ export interface EditableProps {
     value?: string;
 }
 
+// @public
+export const ElasticGrid: FC<PropsWithChildren<ElasticGridProps>>;
+
+// @public (undocumented)
+export interface ElasticGridProps {
+    gapX?: number;
+    gapY?: number;
+    minColWidth: number;
+}
+
 export { extractTextFrom }
 
 export { FocusProps }

packages/plasma-hope/package.json

@@ -3,27 +3,11 @@
     "version": "0.10.0",
     "description": "Salute Design System / Internal React UI kit for web applications",
     "author": "Salute Frontend Team <salute.developers@gmail.com>",
-    "keywords": [
-        "design-system",
-        "react-components",
-        "ui-kit",
-        "react"
-    ],
+    "keywords": ["design-system", "react-components", "ui-kit", "react"],
     "main": "index.js",
     "module": "es/index.js",
     "types": "index.d.ts",
-    "files": [
-        "components",
-        "es",
-        "hocs",
-        "hooks",
-        "mixins",
-        "tokens",
-        "types",
-        "utils",
-        "index.d.ts",
-        "index.js"
-    ],
+    "files": ["components", "es", "hocs", "hooks", "mixins", "tokens", "types", "utils", "index.d.ts", "index.js"],
     "repository": {
         "type": "git",
         "url": "ssh://git@github.com:salute-developers/plasma.git",
@@ -69,6 +53,7 @@
         "@types/node": "16.7.13",
         "@types/react": "16.9.38",
         "@types/react-dom": "16.9.8",
+        "@types/resize-observer-browser": "0.1.7",
         "@types/styled-components": "5.1.0",
         "babel-loader": "8.2.2",
         "babel-plugin-annotate-pure-calls": "0.4.0",
@@ -105,14 +90,9 @@
         "test": "jest --passWithNoTests"
     },
     "typeCoverage": {
-        "ignoreFiles": [
-            "src/**/*component-test.tsx",
-            "src/**/*stories.tsx"
-        ],
+        "ignoreFiles": ["src/**/*component-test.tsx", "src/**/*stories.tsx"],
         "atLeast": 99.96
     },
-    "contributors": [
-        "Vasiliy Loginevskiy"
-    ],
+    "contributors": ["Vasiliy Loginevskiy"],
     "sideEffects": false
 }

packages/plasma-hope/src/components/ElasticGrid/ElasticGrid.component-test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { mount, CypressTestDecorator, PadMe, getComponent } from '@salutejs/plasma-cy-utils';
+
+const Item = styled.div`
+    width: 100%;
+    height: 100px;
+    background-color: #999;
+    border-radius: 10px;
+`;
+
+const items = [
+    { id: 0, label: '0' },
+    { id: 1, label: '1' },
+    { id: 2, label: '2' },
+    { id: 3, label: '3' },
+    { id: 4, label: '4' },
+];
+
+describe('ElasticGrid', () => {
+    const ElasticGrid = getComponent('ElasticGrid');
+
+    before(() => {
+        cy.on('uncaught:exception', (err) => {
+            if (err.toString().match(/ResizeObserver loop limit exceeded/)) {
+                return false;
+            }
+        });
+    });
+
+    it('_view', () => {
+        mount(
+            <CypressTestDecorator>
+                <ElasticGrid minColWidth={125} gapX={8} gapY={8}>
+                    {items.map((item) => (
+                        <Item key={item.id}>{item.label}</Item>
+                    ))}
+                </ElasticGrid>
+                <PadMe />
+                <ElasticGrid minColWidth={125}>
+                    {items.map((item) => (
+                        <Item key={item.id}>{item.label}</Item>
+                    ))}
+                </ElasticGrid>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+});

packages/plasma-b2c/src/components/ElasticGrid/ElasticGrid.tsx → packages/plasma-hope/src/components/ElasticGrid/ElasticGrid.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
+import React, { PropsWithChildren, useLayoutEffect, useRef, useState, FC } from 'react';
 import styled from 'styled-components';
 
 const StyledContainer = styled.div`
@@ -34,7 +34,7 @@ export interface ElasticGridProps {
 /**
  * Компонент с резиновой сеткой
  */
-export const ElasticGrid: React.FC<PropsWithChildren<ElasticGridProps>> = ({
+export const ElasticGrid: FC<PropsWithChildren<ElasticGridProps>> = ({
     children,
     minColWidth,
     gapX = 0,
@@ -56,7 +56,9 @@ export const ElasticGrid: React.FC<PropsWithChildren<ElasticGridProps>> = ({
         const currentRef = containerRef.current;
 
         /* istanbul ignore if: убираем проверку на рефы из покрытия */
-        if (!currentRef) return;
+        if (!currentRef) {
+            return;
+        }
 
         const resizeObserver = new window.ResizeObserver(() => {
             const { width } = currentRef.getBoundingClientRect();

packages/plasma-hope/src/components/ElasticGrid/index.ts

@@ -0,0 +1 @@
+export * from './ElasticGrid';

packages/plasma-hope/src/index.ts

@@ -7,6 +7,7 @@ export * from './components/Carousel';
 export * from './components/Cell';
 export * from './components/Checkbox';
 export * from './components/Editable';
+export * from './components/ElasticGrid';
 export * from './components/Dropdown';
 export * from './components/Grid';
 export * from './components/Image';

packages/plasma-web/api/plasma-web.api.md

@@ -97,6 +97,8 @@ import { DsplM } from '@salutejs/plasma-typo';
 import { DsplS } from '@salutejs/plasma-typo';
 import { Editable } from '@salutejs/plasma-hope';
 import { EditableProps } from '@salutejs/plasma-hope';
+import { ElasticGrid } from '@salutejs/plasma-hope';
+import { ElasticGridProps } from '@salutejs/plasma-hope';
 import { extractTextFrom } from '@salutejs/plasma-core';
 import { FC } from 'react';
 import type { FieldProps as FieldProps_2 } from '@salutejs/plasma-core';
@@ -467,6 +469,10 @@ export { Editable }
 
 export { EditableProps }
 
+export { ElasticGrid }
+
+export { ElasticGridProps }
+
 export { extractTextFrom }
 
 export { FocusProps }

packages/plasma-web/src/components/ElasticGrid/ElasticGrid.component-test.tsx

@@ -0,0 +1 @@
+../../../../plasma-hope/src/components/ElasticGrid/ElasticGrid.component-test.tsx

packages/plasma-web/src/components/ElasticGrid/ElasticGrid.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+import styled from 'styled-components';
+
+import { ElasticGrid, ElasticGridProps } from '.';
+
+const propsToDisable = ['ref', 'theme', 'as', 'forwardedAs'];
+
+export default {
+    title: 'Layout/ElasticGrid',
+    component: ElasticGrid,
+    argTypes: {
+        ...disableProps(propsToDisable),
+    },
+    decorators: [InSpacingDecorator],
+} as Meta;
+
+interface ExtraProps {
+    $width: string;
+    itemsNumber: number;
+}
+
+const StyledElasticGrid = styled(ElasticGrid)<{ $width: string }>`
+    width: ${({ $width }) => $width};
+`;
+
+const Item = styled.div`
+    width: 100%;
+    height: 100px;
+    background-color: #999;
+    border-radius: 10px;
+`;
+
+export const Default: Story<ExtraProps & ElasticGridProps> = ({ itemsNumber, ...props }) => {
+    return (
+        <StyledElasticGrid {...props}>
+            {Array(itemsNumber)
+                .fill(0)
+                .map((_, k) => (
+                    <Item key={k} />
+                ))}
+        </StyledElasticGrid>
+    );
+};
+
+Default.args = {
+    $width: '600px',
+    itemsNumber: 5,
+    minColWidth: 125,
+    gapX: 8,
+    gapY: 8,
+};

packages/plasma-web/src/components/ElasticGrid/index.ts

@@ -0,0 +1,2 @@
+export { ElasticGrid } from '@salutejs/plasma-hope';
+export type { ElasticGridProps } from '@salutejs/plasma-hope';

packages/plasma-web/src/index.ts

@@ -8,6 +8,7 @@ export * from './components/Cell';
 export * from './components/Checkbox';
 export * from './components/Dropdown';
 export * from './components/Editable';
+export * from './components/ElasticGrid';
 export * from './components/Grid';
 export * from './components/Image';
 export * from './components/Link';