feat(*): Flow component

packages/plasma-new-hope/src/components/ElasticGrid/ElasticGrid.tsx

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

packages/plasma-new-hope/src/components/Flow/Flow.styles.ts

@@ -0,0 +1,135 @@
+import { css } from '@linaria/core';
+
+export const base = css`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    gap: var(--plasma-private-gap);
+
+    border-radius: 0.5rem;
+
+    &.vertical {
+        flex-direction: column;
+    }
+
+    &.grid {
+        display: grid;
+
+        grid-template-columns: repeat(var(--plasma-private-items), auto);
+        grid-auto-flow: row;
+
+        &.elastic {
+            grid-template-columns: repeat(auto-fill, minmax(var(--plasma-private-min-width), auto));
+            grid-auto-flow: row;
+        }
+
+        &:not(.vertical) {
+            &[data-arrangement='start'] {
+                justify-items: start;
+            }
+
+            &[data-arrangement='center'] {
+                justify-items: center;
+            }
+
+            &[data-arrangement='end'] {
+                justify-items: end;
+            }
+
+            &[data-arrangement='spaceBetween'] {
+                justify-content: space-between;
+            }
+
+            &[data-arrangement='spaceAround'] {
+                justify-content: space-around;
+            }
+
+            &[data-alignment='start'] {
+                align-items: start;
+            }
+
+            &[data-alignment='center'] {
+                align-items: center;
+            }
+
+            &[data-alignment='end'] {
+                align-items: end;
+            }
+        }
+
+        &.vertical {
+            grid-template-columns: auto;
+            grid-template-rows: repeat(var(--plasma-private-items), auto);
+            grid-auto-flow: column;
+
+            &[data-arrangement='start'] {
+                align-items: start;
+            }
+
+            &[data-arrangement='center'] {
+                align-items: center;
+            }
+
+            &[data-arrangement='end'] {
+                align-items: end;
+            }
+
+            &[data-arrangement='spaceBetween'] {
+                align-content: space-between;
+                align-items: normal;
+            }
+
+            &[data-arrangement='spaceAround'] {
+                align-content: space-around;
+                align-items: normal;
+            }
+
+            &[data-alignment='start'] {
+                justify-items: start;
+            }
+
+            &[data-alignment='center'] {
+                justify-items: center;
+            }
+
+            &[data-alignment='end'] {
+                justify-items: end;
+            }
+        }
+    }
+
+    &:not(&.grid) {
+        &[data-arrangement='start'] {
+            justify-content: start;
+        }
+
+        &[data-arrangement='center'] {
+            justify-content: center;
+        }
+
+        &[data-arrangement='end'] {
+            justify-content: end;
+        }
+
+        &[data-arrangement='spaceBetween'] {
+            justify-content: space-between;
+        }
+
+        &[data-arrangement='spaceAround'] {
+            justify-content: space-around;
+        }
+
+        &[data-alignment='start'] {
+            align-items: start;
+        }
+
+        &[data-alignment='center'] {
+            align-items: center;
+        }
+
+        &[data-alignment='end'] {
+            align-items: end;
+        }
+    }
+`;

packages/plasma-new-hope/src/components/Flow/Flow.tsx

@@ -0,0 +1,67 @@
+import React, { CSSProperties, forwardRef } from 'react';
+import cls from 'classnames';
+
+import { RootProps } from '../../engines';
+
+import { base } from './Flow.styles';
+import { FlowProps } from './Flow.types';
+
+export const flowRoot = (Root: RootProps<HTMLDivElement, FlowProps>) =>
+    forwardRef<HTMLDivElement, FlowProps>(
+        (
+            {
+                children,
+                className,
+                style,
+                orientation = 'horizontal',
+                arrangement,
+                alignment,
+                mainAxisGap = '0',
+                crossAxisGap = '0',
+                minColWidth = 'auto',
+                itemsPerLine,
+                ...rest
+            },
+            ref,
+        ) => {
+            const hasMinWidth = Boolean(minColWidth && minColWidth !== 'auto');
+            const needGrid = Boolean(Number(itemsPerLine) > 0 || hasMinWidth);
+
+            return (
+                <Root
+                    ref={ref}
+                    className={cls(className, {
+                        vertical: orientation === 'vertical',
+                        grid: needGrid,
+                        elastic: hasMinWidth,
+                    })}
+                    style={
+                        {
+                            ...style,
+                            '--plasma-private-gap': `${mainAxisGap} ${crossAxisGap}`,
+                            '--plasma-private-items': String(itemsPerLine),
+                            '--plasma-private-min-width': String(minColWidth),
+                        } as CSSProperties & {
+                            '--plasma-private-gap': string;
+                            '--plasma-private-items': string;
+                            '--plasma-private-min-width': string;
+                        }
+                    }
+                    data-arrangement={arrangement}
+                    data-alignment={alignment}
+                    {...rest}
+                >
+                    {children}
+                </Root>
+            );
+        },
+    );
+
+export const flowConfig = {
+    name: 'Flow',
+    tag: 'div',
+    layout: flowRoot,
+    base,
+    defaults: {},
+    variations: {},
+};

packages/plasma-new-hope/src/components/Flow/Flow.types.ts

@@ -0,0 +1,35 @@
+import { CSSProperties, ReactNode } from 'react';
+
+export interface FlowProps {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Расположение элементов относительно выбранной ориентации
+     */
+    arrangement?: 'start' | 'center' | 'end' | 'spaceBetween' | 'spaceAround';
+    /**
+     * Выравнивание элементов внутри строк по вертикали при горизонтальной ориентации,
+     * или внутри столбцов по горизонтали при вертикальной
+     */
+    alignment?: 'start' | 'center' | 'end';
+    /**
+     *  Фиксированный отступ между элементами по главной оси
+     */
+    mainAxisGap?: string;
+    /**
+     *  Фиксированный отступ между элементами по второстепенной оси
+     */
+    crossAxisGap?: string;
+    /**
+     *  Количество элементов по главной оси в отображении grid, при itemsPerLine > 0,
+     *  иначе используется flex и flex-wrap
+     */
+    itemsPerLine?: number;
+    /**
+     *  Минимальный размер колонки для эластичной сетки с динамическим количеством растянутых столбцов
+     *  `grid-template-columns: repeat(auto-fill, minmax(${minColWidth}, auto))`
+     */
+    minColWidth?: string;
+}

packages/plasma-new-hope/src/components/Flow/index.ts

@@ -0,0 +1,2 @@
+export { flowRoot, flowConfig } from './Flow';
+export type { FlowProps } from './Flow.types';

packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.config.ts

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

packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.stories.tsx

@@ -0,0 +1,114 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import styled from 'styled-components';
+
+import { WithTheme } from '../../../_helpers';
+
+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: 'b2c/Data Display/Flow',
+    component: Flow,
+    decorators: [WithTheme],
+    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',
+        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-new-hope/src/examples/plasma_b2c/components/Flow/Flow.ts

@@ -0,0 +1,8 @@
+import { flowConfig } from '../../../../components/Flow';
+import { component, mergeConfig } from '../../../../engines';
+
+import { config } from './Flow.config';
+
+const mergedConfig = mergeConfig(flowConfig, config);
+
+export const Flow = component(mergedConfig);

packages/plasma-new-hope/src/index.ts

@@ -12,6 +12,7 @@ export * from './components/Breadcrumbs';
 export * from './components/Chip';
 export * from './components/ChipGroup';
 export * from './components/Cell';
+export * from './components/Flow';
 export * from './components/Link';
 export * from './components/Spinner';
 export * from './components/Checkbox';