@salutejs/sdds-cs 0.226.1-dev.0 → 0.227.0-dev.0

package/api/sdds-cs.api.md

@@ -109,6 +109,7 @@ import { dsplSBold } from '@salutejs/sdds-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';
@@ -1613,6 +1614,11 @@ xs: PolymorphicClassName;
 };
 }> & Props_2 & RefAttributes<HTMLDivElement>>;
 
+// @public (undocumented)
+export const Flow: FunctionComponent<PropsType<    {}> & FlowProps & {
+minColWidth?: string | undefined;
+} & RefAttributes<HTMLDivElement>>;
+
 // @public (undocumented)
 export const Grid: FunctionComponent<PropsType<    {
 view: {

package/components/Flow/Flow.config.d.ts

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

package/components/Flow/Flow.config.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var config = exports.config = {
+  defaults: {},
+  variations: {}
+};

package/components/Flow/Flow.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Flow: import("react").FunctionComponent<import("@salutejs/plasma-new-hope/types/engines/types").PropsType<{}> & import("@salutejs/plasma-new-hope/styled-components").FlowProps & {
+    minColWidth?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/components/Flow/Flow.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Flow = void 0;
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
+var _Flow = /*#__PURE__*/require("./Flow.config");
+var mergedConfig = /*#__PURE__*/(0, _styledComponents.mergeConfig)(_styledComponents.flowConfig, _Flow.config);
+var Flow = exports.Flow = /*#__PURE__*/(0, _styledComponents.component)(mergedConfig);

package/components/Flow/index.d.ts

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

package/components/Flow/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Flow", {
+  enumerable: true,
+  get: function get() {
+    return _Flow.Flow;
+  }
+});
+var _Flow = /*#__PURE__*/require("./Flow");

package/emotion/cjs/components/Flow/Flow.config.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var config = exports.config = {
+  defaults: {},
+  variations: {}
+};

package/emotion/cjs/components/Flow/Flow.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Flow = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Flow = /*#__PURE__*/require("./Flow.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.flowConfig, _Flow.config);
+var Flow = exports.Flow = /*#__PURE__*/(0, _emotion.component)(mergedConfig);

package/emotion/cjs/components/Flow/Flow.stories.tsx

@@ -0,0 +1,133 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps } 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 FlowCustom = styled(Flow)`
+    background: var(--surface-transparent-accent-hover);
+    border-radius: 0.5rem;
+`;
+
+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',
+            },
+        },
+        containerWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        containerHeight: {
+            control: {
+                type: 'text',
+            },
+        },
+        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: 'text',
+            },
+        },
+        minColWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        ...disableProps(['minColWidth']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Flow>;
+
+export const Default: Story = {
+    args: {
+        containerWidth: '450px',
+        containerHeight: '200px',
+        orientation: 'horizontal',
+        arrangement: 'start',
+        alignment: 'start',
+        mainAxisGap: '10',
+        crossAxisGap: '10',
+        itemsPerLine: '',
+        itemsCount: 6,
+    },
+    render: ({ itemsCount, containerWidth, containerHeight, ...args }: ComponentProps<typeof Flow>) => {
+        const hasLines = Boolean(args.itemsPerLine);
+
+        return (
+            <FlowCustom {...args} style={{ width: containerWidth, height: containerHeight }}>
+                {new Array(itemsCount).fill(null).map((width, index) => (
+                    <Item
+                        key={index}
+                        style={
+                            hasLines
+                                ? {
+                                      minWidth: widths[index % widths.length],
+                                      minHeight: heights[index % heights.length],
+                                  }
+                                : {
+                                      width: widths[index % widths.length],
+                                      height: heights[index % heights.length],
+                                  }
+                        }
+                    >
+                        {index + 1}
+                    </Item>
+                ))}
+            </FlowCustom>
+        );
+    },
+};

package/emotion/cjs/components/Flow/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Flow", {
+  enumerable: true,
+  get: function get() {
+    return _Flow.Flow;
+  }
+});
+var _Flow = /*#__PURE__*/require("./Flow");

package/emotion/cjs/index.js

@@ -91,6 +91,17 @@ Object.keys(_Drawer).forEach(function (key) {
     }
   });
 });
+var _Flow = /*#__PURE__*/require("./components/Flow");
+Object.keys(_Flow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Flow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Flow[key];
+    }
+  });
+});
 var _Grid = /*#__PURE__*/require("./components/Grid");
 Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/emotion/es/components/Flow/Flow.config.js

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

package/emotion/es/components/Flow/Flow.js

@@ -0,0 +1,4 @@
+import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
+import { config } from './Flow.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(flowConfig, config);
+export var Flow = /*#__PURE__*/component(mergedConfig);

package/emotion/es/components/Flow/Flow.stories.tsx

@@ -0,0 +1,133 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps } 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 FlowCustom = styled(Flow)`
+    background: var(--surface-transparent-accent-hover);
+    border-radius: 0.5rem;
+`;
+
+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',
+            },
+        },
+        containerWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        containerHeight: {
+            control: {
+                type: 'text',
+            },
+        },
+        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: 'text',
+            },
+        },
+        minColWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        ...disableProps(['minColWidth']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Flow>;
+
+export const Default: Story = {
+    args: {
+        containerWidth: '450px',
+        containerHeight: '200px',
+        orientation: 'horizontal',
+        arrangement: 'start',
+        alignment: 'start',
+        mainAxisGap: '10',
+        crossAxisGap: '10',
+        itemsPerLine: '',
+        itemsCount: 6,
+    },
+    render: ({ itemsCount, containerWidth, containerHeight, ...args }: ComponentProps<typeof Flow>) => {
+        const hasLines = Boolean(args.itemsPerLine);
+
+        return (
+            <FlowCustom {...args} style={{ width: containerWidth, height: containerHeight }}>
+                {new Array(itemsCount).fill(null).map((width, index) => (
+                    <Item
+                        key={index}
+                        style={
+                            hasLines
+                                ? {
+                                      minWidth: widths[index % widths.length],
+                                      minHeight: heights[index % heights.length],
+                                  }
+                                : {
+                                      width: widths[index % widths.length],
+                                      height: heights[index % heights.length],
+                                  }
+                        }
+                    >
+                        {index + 1}
+                    </Item>
+                ))}
+            </FlowCustom>
+        );
+    },
+};

package/emotion/es/components/Flow/index.js

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

package/emotion/es/index.js

@@ -6,6 +6,7 @@ export * from './components/Button';
 export * from './components/ButtonGroup';
 export * from './components/Divider';
 export * from './components/Drawer';
+export * from './components/Flow';
 export * from './components/Grid';
 export * from './components/Calendar';
 export * from './components/Checkbox';

package/es/components/Flow/Flow.config.js

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

package/es/components/Flow/Flow.js

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

package/es/components/Flow/index.js

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

package/es/index.js

@@ -6,6 +6,7 @@ export * from './components/Button';
 export * from './components/ButtonGroup';
 export * from './components/Divider';
 export * from './components/Drawer';
+export * from './components/Flow';
 export * from './components/Grid';
 export * from './components/Calendar';
 export * from './components/Checkbox';

package/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/Button';
 export * from './components/ButtonGroup';
 export * from './components/Divider';
 export * from './components/Drawer';
+export * from './components/Flow';
 export * from './components/Grid';
 export * from './components/Calendar';
 export * from './components/Checkbox';

package/index.js

@@ -91,6 +91,17 @@ Object.keys(_Drawer).forEach(function (key) {
     }
   });
 });
+var _Flow = /*#__PURE__*/require("./components/Flow");
+Object.keys(_Flow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Flow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Flow[key];
+    }
+  });
+});
 var _Grid = /*#__PURE__*/require("./components/Grid");
 Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-cs",
-  "version": "0.226.1-dev.0",
+  "version": "0.227.0-dev.0",
   "description": "Salute Design System / React UI kit for SDDS CS web applications",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -52,7 +52,7 @@
     "directory": "packages/sdds-cs"
   },
   "dependencies": {
-    "@salutejs/plasma-new-hope": "0.237.1-dev.0",
+    "@salutejs/plasma-new-hope": "0.238.0-dev.0",
     "@salutejs/sdds-themes": "0.31.0"
   },
   "peerDependencies": {
@@ -144,5 +144,5 @@
     "Anton Vinogradov"
   ],
   "sideEffects": false,
-  "gitHead": "7fc78258fe61b50aa631b3bc31dde2c029fbc909"
+  "gitHead": "776b4a8340b8a4ad8c82a83a7484fdac9941cf35"
 }