feat(*): Flow component

packages/plasma-asdk/api/plasma-asdk.api.md

@@ -157,7 +157,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("fixed" | "auto" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -178,7 +178,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("fixed" | "auto" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;

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

@@ -149,6 +149,7 @@ import { extractTextFrom } from '@salutejs/plasma-core';
 import { FC } from 'react';
 import { FileProcessHandler } from '@salutejs/plasma-new-hope/types/components/Dropzone/Dropzone.types';
 import { Filter } from '@salutejs/plasma-new-hope/types/engines/types';
+import { FlowProps } from '@salutejs/plasma-new-hope/styled-components';
 import { FocusProps } from '@salutejs/plasma-core';
 import { formatCurrency } from '@salutejs/plasma-core';
 import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType';
@@ -2027,6 +2028,9 @@ xs: PolymorphicClassName;
 
 export { extractTextFrom }
 
+// @public (undocumented)
+export const Flow: FunctionComponent<PropsType<    {}> & FlowProps & RefAttributes<HTMLDivElement>>;
+
 export { FocusProps }
 
 // @public (undocumented)
@@ -3060,7 +3064,7 @@ onDecrement?: ((value: number) => void) | undefined;
 } & {
 segmentation?: "clear" | undefined;
 inputBackgroundType?: undefined;
-} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "size" | "value"> & RefAttributes<HTMLInputElement>) | ({
+} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "value" | "size"> & RefAttributes<HTMLInputElement>) | ({
 value?: number | undefined;
 min?: number | undefined;
 max?: number | undefined;
@@ -3085,7 +3089,7 @@ onDecrement?: ((value: number) => void) | undefined;
 } & {
 segmentation?: string | undefined;
 inputBackgroundType?: string | undefined;
-} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "size" | "value"> & RefAttributes<HTMLInputElement>))>;
+} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "value" | "size"> & RefAttributes<HTMLInputElement>))>;
 
 export { numberInputClasses }
 

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

@@ -0,0 +1,115 @@
+import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils';
+import React from 'react';
+import styled from 'styled-components';
+
+const orientations = ['vertical', 'horizontal'];
+const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround'];
+const alignments = ['start', 'center', 'end'];
+
+const widths = [100, 32, 171, 74, 179, 55];
+const heights = [10, 50, 45, 33, 14, 55];
+
+const itemsCount = widths.length;
+
+const Item = styled.div`
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    background: #aab1e9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+describe('plasma-b2c: Flow', () => {
+    const Flow = getComponent('Flow');
+
+    const Demo: React.FC<any> = (props) => {
+        return (
+            <CypressTestDecorator>
+                <Flow
+                    {...props}
+                    style={{
+                        maxWidth: '28rem',
+                        height: '13rem',
+                    }}
+                >
+                    {new Array(itemsCount).fill(null).map((width, index) => (
+                        <Item
+                            key={index}
+                            style={{
+                                minWidth: widths[index % widths.length],
+                                minHeight: heights[index % heights.length],
+                            }}
+                        >
+                            {index + 1}
+                        </Item>
+                    ))}
+                </Flow>
+            </CypressTestDecorator>
+        );
+    };
+
+    orientations.forEach((orientation) => {
+        arrangements.forEach((arrangement) => {
+            it(`flex:${orientation}:arrangement:${arrangement}`, () => {
+                mount(<Demo orientation={orientation} arrangement={arrangement} alignment="center" />);
+
+                cy.matchImageSnapshot();
+            });
+        });
+        alignments.forEach((alignment) => {
+            it(`flex:${orientation}:alignment:${alignment}`, () => {
+                mount(<Demo orientation={orientation} arrangement="center" alignment={alignment} />);
+
+                cy.matchImageSnapshot();
+            });
+        });
+    });
+
+    orientations.forEach((orientation) => {
+        arrangements.forEach((arrangement) => {
+            it(`grid:${orientation}:arrangement:${arrangement}`, () => {
+                mount(<Demo orientation={orientation} arrangement={arrangement} alignment="center" itemsPerLine={3} />);
+
+                cy.matchImageSnapshot();
+            });
+        });
+        alignments.forEach((alignment) => {
+            it(`grid:${orientation}:alignment:${alignment}`, () => {
+                mount(<Demo orientation={orientation} arrangement="center" alignment={alignment} itemsPerLine={3} />);
+
+                cy.matchImageSnapshot();
+            });
+        });
+    });
+
+    orientations.forEach((orientation) => {
+        it(`flex:${orientation}:gap`, () => {
+            mount(
+                <Demo
+                    mainAxisGap="0.5rem"
+                    crossAxisGap="2rem"
+                    orientation={orientation}
+                    arrangement="center"
+                    alignment="center"
+                />,
+            );
+
+            cy.matchImageSnapshot();
+        });
+        it(`grid:${orientation}:gap`, () => {
+            mount(
+                <Demo
+                    mainAxisGap="2rem"
+                    crossAxisGap="1rem"
+                    itemsPerLine={3}
+                    orientation={orientation}
+                    arrangement="center"
+                    alignment="center"
+                />,
+            );
+
+            cy.matchImageSnapshot();
+        });
+    });
+});

packages/plasma-b2c/src/components/Flow/Flow.config.ts

@@ -0,0 +1,4 @@
+export const config = {
+    defaults: {},
+    variations: {},
+};

packages/plasma-b2c/src/components/Flow/Flow.stories.tsx

@@ -0,0 +1,114 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import styled from 'styled-components';
+
+import { Flow } from './Flow';
+
+const orientations = ['vertical', 'horizontal'];
+const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround'];
+const alignments = ['start', 'center', 'end'];
+
+const widths = [100, 32, 171, 74, 179, 55];
+const heights = [10, 50, 45, 33, 14, 55];
+
+const Item = styled.div`
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    background: #aab1e9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+const meta: Meta<typeof Flow> = {
+    title: 'Layout/Flow',
+    component: Flow,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        itemsCount: {
+            control: {
+                type: 'number',
+            },
+        },
+        height: {
+            control: {
+                type: 'text',
+            },
+            if: { arg: 'orientation', eq: 'vertical' },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'select',
+            },
+        },
+        arrangement: {
+            options: arrangements,
+            control: {
+                type: 'select',
+            },
+        },
+        alignment: {
+            options: alignments,
+            control: {
+                type: 'select',
+            },
+        },
+        mainAxisGap: {
+            control: {
+                type: 'text',
+            },
+        },
+        crossAxisGap: {
+            control: {
+                type: 'text',
+            },
+        },
+        itemsPerLine: {
+            control: {
+                type: 'number',
+            },
+        },
+        minColWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Flow>;
+
+export const Default: Story = {
+    args: {
+        height: '13rem',
+        orientation: 'horizontal',
+        arrangement: 'start',
+        alignment: 'start',
+        mainAxisGap: '0',
+        crossAxisGap: '0',
+        minColWidth: 'auto',
+        itemsPerLine: 0,
+        itemsCount: 6,
+    },
+    render: ({ itemsCount, height, ...args }: ComponentProps<typeof Flow>) => {
+        return (
+            <Flow {...args} style={{ maxWidth: '28rem', height: height || 'auto' }}>
+                {new Array(itemsCount).fill(null).map((width, index) => (
+                    <Item
+                        key={index}
+                        style={{
+                            minWidth: widths[index % widths.length],
+                            minHeight: heights[index % heights.length],
+                        }}
+                    >
+                        {index + 1}
+                    </Item>
+                ))}
+            </Flow>
+        );
+    },
+};

packages/plasma-b2c/src/components/Flow/Flow.ts

@@ -0,0 +1,7 @@
+import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Flow.config';
+
+const mergedConfig = mergeConfig(flowConfig, config);
+
+export const Flow = component(mergedConfig);

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

@@ -0,0 +1 @@
+export { Flow } from './Flow';

packages/plasma-b2c/src/index.ts

@@ -17,6 +17,7 @@ export * from './components/Dropdown';
 export * from './components/Drawer';
 export * from './components/Editable';
 export * from './components/ElasticGrid';
+export * from './components/Flow';
 export * from './components/Grid';
 export * from './components/Image';
 export * from './components/IconButton';

packages/plasma-giga/api/plasma-giga.api.md

@@ -109,6 +109,7 @@ import { dsplSBold } from '@salutejs/plasma-themes/tokens';
 import { FC } from 'react';
 import { FileProcessHandler } from '@salutejs/plasma-new-hope/types/components/Dropzone/Dropzone.types';
 import { Filter } from '@salutejs/plasma-new-hope/types/engines/types';
+import { FlowProps } from '@salutejs/plasma-new-hope/styled-components';
 import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType';
 import { FormTypeString } from '@salutejs/plasma-new-hope/types/types/FormType';
 import { ForwardRefExoticComponent } from 'react';
@@ -1708,6 +1709,9 @@ xs: PolymorphicClassName;
 };
 }> & Props_2 & RefAttributes<HTMLDivElement>>;
 
+// @public (undocumented)
+export const Flow: FunctionComponent<PropsType<    {}> & FlowProps & RefAttributes<HTMLDivElement>>;
+
 // @public (undocumented)
 export const Grid: FunctionComponent<PropsType<    {
 view: {

packages/plasma-giga/src/components/Flow/Flow.config.ts

@@ -0,0 +1,4 @@
+export const config = {
+    defaults: {},
+    variations: {},
+};