feat: dashkit groups (#150)

* feat: dashkit groups

* fix: types

* chore: clean up code

* feat: groups render props

* feat: preview fixes

* fix: empty groups render

* fix: dashkit height calculation for empty grid

* fix: review typo

package.json

@@ -60,12 +60,12 @@
     "prepublishOnly": "npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@gravity-ui/icons": "^2.8.1",
     "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/icons": "^2.8.1",
     "hashids": "^2.2.8",
     "immutability-helper": "^3.1.1",
     "prop-types": "^15.8.1",
-    "react-grid-layout": "^1.3.4",
+    "react-grid-layout": "^1.4.4",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
@@ -90,7 +90,7 @@
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.170",
     "@types/react": "^18.0.27",
-    "@types/react-grid-layout": "^1.3.2",
+    "@types/react-grid-layout": "^1.3.5",
     "babel-jest": "^26.6.3",
     "copyfiles": "^2.4.1",
     "enzyme": "^3.11.0",

src/components/DashKit/DashKit.tsx

@@ -13,6 +13,7 @@ import type {
 import {
     AddConfigItem,
     ContextProps,
+    DashKitGroup,
     Plugin,
     SetConfigItem,
     SetNewItemOptions,
@@ -33,7 +34,11 @@ interface DashKitGeneralProps {
 
 interface DashKitDefaultProps {
     onItemEdit: (item: ConfigItem) => void;
-    onChange: (data: {config: Config; itemsStateAndParams: ItemsStateAndParams}) => void;
+    onChange: (data: {
+        config: Config;
+        itemsStateAndParams: ItemsStateAndParams;
+        groups?: DashKitGroup[];
+    }) => void;
     onDrop: (dropProps: ItemDropProps) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
@@ -42,6 +47,7 @@ interface DashKitDefaultProps {
     context: ContextProps;
     noOverlay: boolean;
     focusable?: boolean;
+    groups?: DashKitGroup[];
 }
 
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {}
@@ -123,14 +129,7 @@ export class DashKit extends React.PureComponent<DashKitInnerProps> {
     metaRef = React.createRef<GridLayout>();
 
     render() {
-        return (
-            <DashKitView
-                // @ts-ignore
-                registerManager={registerManager}
-                ref={this.metaRef}
-                {...this.props}
-            />
-        );
+        return <DashKitView registerManager={registerManager} ref={this.metaRef} {...this.props} />;
     }
 
     getItemsMeta() {

src/components/DashKit/__stories__/DashKit.stories.tsx

@@ -9,6 +9,7 @@ import {DashKit, DashKitProps} from '../DashKit';
 
 import {CssApiShowcase} from './CssApiShowcase';
 import {DashKitDnDShowcase} from './DashKitDnDShowcase';
+import {DashKitGroupsShowcase} from './DashKitGroupsShowcase';
 import {DashKitShowcase} from './DashKitShowcase';
 import {getConfig} from './utils';
 
@@ -81,3 +82,6 @@ export const CSS_API = CssApiShowcaseTemplate.bind({});
 
 const DndShowcaseTemplate: Story<DashKitProps> = () => <DashKitDnDShowcase />;
 export const DragNDrop = DndShowcaseTemplate.bind({});
+
+const GroupsShowcaseTemplate: Story<DashKitProps> = () => <DashKitGroupsShowcase />;
+export const Groups = GroupsShowcaseTemplate.bind({});