@salutejs/sdds-serv 0.222.1-dev.0 → 0.223.0-dev.0

package/api/sdds-serv.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';
@@ -1718,6 +1719,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,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var config = {
+  defaults: {},
+  variations: {}
+};
+
+exports.config = config;
+//# sourceMappingURL=Flow.config.js.map

package/components/Flow/Flow.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.config.js","sources":["../../src-css/components/Flow/Flow.config.ts"],"sourcesContent":["export const config = {\n    defaults: {},\n    variations: {},\n};\n"],"names":["config","defaults","variations"],"mappings":";;;;AAAO,IAAMA,MAAM,GAAG;EAClBC,QAAQ,EAAE,EAAE;AACZC,EAAAA,UAAU,EAAE,EAAC;AACjB;;;;"}

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,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var plasmaNewHope = require('@salutejs/plasma-new-hope');
+var Flow_config = require('./Flow.config.js');
+
+var mergedConfig = /*#__PURE__*/plasmaNewHope.mergeConfig(plasmaNewHope.flowConfig, Flow_config.config);
+var Flow = /*#__PURE__*/plasmaNewHope.component(mergedConfig);
+
+exports.Flow = Flow;
+//# sourceMappingURL=Flow.js.map

package/components/Flow/Flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.js","sources":["../../src-css/components/Flow/Flow.ts"],"sourcesContent":["import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope';\n\nimport { config } from './Flow.config';\n\nconst mergedConfig = mergeConfig(flowConfig, config);\n\nexport const Flow = component(mergedConfig);\n"],"names":["mergedConfig","mergeConfig","flowConfig","config","Flow","component"],"mappings":";;;;;;;AAIA,IAAMA,YAAY,gBAAGC,yBAAW,CAACC,wBAAU,EAAEC,kBAAM,CAAC,CAAA;IAEvCC,IAAI,gBAAGC,uBAAS,CAACL,YAAY;;;;"}

package/components/Flow/index.d.ts

@@ -0,0 +1 @@
+export { Flow } from './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-primary);
+    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-primary);
+    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/ButtonGroup';
 export * from './components/Breadcrumbs';
 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,7 @@
+var config = {
+  defaults: {},
+  variations: {}
+};
+
+export { config };
+//# sourceMappingURL=Flow.config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.config.js","sources":["../../../src-css/components/Flow/Flow.config.ts"],"sourcesContent":["export const config = {\n    defaults: {},\n    variations: {},\n};\n"],"names":["config","defaults","variations"],"mappings":"AAAO,IAAMA,MAAM,GAAG;EAClBC,QAAQ,EAAE,EAAE;AACZC,EAAAA,UAAU,EAAE,EAAC;AACjB;;;;"}

package/es/components/Flow/Flow.js

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

package/es/components/Flow/Flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.js","sources":["../../../src-css/components/Flow/Flow.ts"],"sourcesContent":["import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope';\n\nimport { config } from './Flow.config';\n\nconst mergedConfig = mergeConfig(flowConfig, config);\n\nexport const Flow = component(mergedConfig);\n"],"names":["mergedConfig","mergeConfig","flowConfig","config","Flow","component"],"mappings":";;;AAIA,IAAMA,YAAY,gBAAGC,WAAW,CAACC,UAAU,EAAEC,MAAM,CAAC,CAAA;IAEvCC,IAAI,gBAAGC,SAAS,CAACL,YAAY;;;;"}

package/es/index.js

@@ -21,6 +21,7 @@ export { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from './components/
 export { Dropdown } from './components/Dropdown/Dropdown.js';
 export { Dropzone } from './components/Dropzone/Dropzone.js';
 export { EmptyState } from './components/EmptyState/EmptyState.js';
+export { Flow } from './components/Flow/Flow.js';
 export { Grid } from './components/Grid/Grid.js';
 export { IconButton } from './components/IconButton/IconButton.js';
 export { Image } from './components/Image/Image.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/ButtonGroup';
 export * from './components/Breadcrumbs';
 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

@@ -25,6 +25,7 @@ var Drawer = require('./components/Drawer/Drawer.js');
 var Dropdown = require('./components/Dropdown/Dropdown.js');
 var Dropzone = require('./components/Dropzone/Dropzone.js');
 var EmptyState = require('./components/EmptyState/EmptyState.js');
+var Flow = require('./components/Flow/Flow.js');
 var Grid = require('./components/Grid/Grid.js');
 var IconButton = require('./components/IconButton/IconButton.js');
 var Image = require('./components/Image/Image.js');
@@ -264,6 +265,7 @@ exports.DrawerHeader = Drawer.DrawerHeader;
 exports.Dropdown = Dropdown.Dropdown;
 exports.Dropzone = Dropzone.Dropzone;
 exports.EmptyState = EmptyState.EmptyState;
+exports.Flow = Flow.Flow;
 exports.Grid = Grid.Grid;
 exports.IconButton = IconButton.IconButton;
 exports.Image = Image.Image;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-serv",
-  "version": "0.222.1-dev.0",
+  "version": "0.223.0-dev.0",
   "description": "Salute Design System / React UI kit for SDDS SERV web applications",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -48,7 +48,7 @@
     "directory": "packages/sdds-serv"
   },
   "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": {
@@ -153,5 +153,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "7fc78258fe61b50aa631b3bc31dde2c029fbc909"
+  "gitHead": "776b4a8340b8a4ad8c82a83a7484fdac9941cf35"
 }

package/styled-components/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/styled-components/cjs/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/styled-components/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/styled-components/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/styled-components/es/components/Flow/Flow.config.js

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

package/styled-components/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/styled-components/es/components/Flow/index.js

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

package/styled-components/es/index.js

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