feat: add groups support for mobile layout (#227)

* feat: add groups support for mobile layout

* chore: reworked contexts js files into ts

* feat: mobile layout render groups

* fix: adjust widget layout method

* fix: render empty mobile group

.storybook/decorators/withMobile.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import type {Decorator} from '@storybook/react';
-import {MobileProvider} from '@gravity-ui/uikit';
+import {DashKit} from '../../src/components/DashKit/DashKit';
 
 export const withMobile: Decorator = (Story, context) => {
     const platform = context.globals.platform;
 
-    return (
-        <MobileProvider mobile={platform === 'mobile'} platform={platform}>
-            <Story key={platform} {...context} />
-        </MobileProvider>
-    );
+    DashKit.setSettings({
+        isMobile: platform === 'mobile',
+    });
+
+    return <Story key={platform} {...context} />;
 };

src/components/DashKit/DashKit.tsx

@@ -4,7 +4,7 @@ import noop from 'lodash/noop';
 import pick from 'lodash/pick';
 
 import {DEFAULT_GROUP, DEFAULT_NAMESPACE} from '../../constants';
-import {DashKitDnDContext} from '../../context/DashKitContext';
+import {DashKitDnDContext} from '../../context';
 import type {
     Config,
     ConfigItem,
@@ -13,7 +13,7 @@ import type {
     ItemDropProps,
     ItemsStateAndParams,
 } from '../../shared';
-import {
+import type {
     AddConfigItem,
     AddNewItemOptions,
     ContextProps,
@@ -31,10 +31,9 @@ import {RegisterManager, UpdateManager, reflowLayout} from '../../utils';
 import {DashKitDnDWrapper} from '../DashKitDnDWrapper/DashKitDnDWrapper';
 import DashKitView from '../DashKitView/DashKitView';
 import GridLayout from '../GridLayout/GridLayout';
-import {OverlayControlItem, OverlayControlsCtxShape} from '../OverlayControls/OverlayControls';
+import type {OverlayControlItem, PreparedCopyItemOptions} from '../OverlayControls/OverlayControls';
 
-interface DashKitGeneralProps
-    extends Pick<OverlayControlsCtxShape, 'getPreparedCopyItemOptions' | 'onCopyFulfill'> {
+interface DashKitGeneralProps {
     config: Config;
     editMode: boolean;
     draggableHandleClassName?: string;
@@ -43,32 +42,36 @@ interface DashKitGeneralProps
 }
 
 interface DashKitDefaultProps {
+    defaultGlobalParams: GlobalParams;
+    globalParams: GlobalParams;
+    itemsStateAndParams: ItemsStateAndParams;
+    settings: SettingsProps;
+    context: ContextProps;
+    noOverlay: boolean;
+    focusable?: boolean;
+    groups?: DashKitGroup[];
+
     onItemEdit: (item: ConfigItem) => void;
     onChange: (data: {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
         groups?: DashKitGroup[];
     }) => void;
+
     onDrop?: (dropProps: ItemDropProps) => void;
 
     onItemMountChange?: (item: ConfigItem, state: {isAsync: boolean; isMounted: boolean}) => void;
     onItemRender?: (item: ConfigItem) => void;
 
+    getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
+    onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
+
     onDragStart?: ItemManipulationCallback;
     onDrag?: ItemManipulationCallback;
     onDragStop?: ItemManipulationCallback;
     onResizeStart?: ItemManipulationCallback;
     onResize?: ItemManipulationCallback;
     onResizeStop?: ItemManipulationCallback;
-
-    defaultGlobalParams: GlobalParams;
-    globalParams: GlobalParams;
-    itemsStateAndParams: ItemsStateAndParams;
-    settings: SettingsProps;
-    context: ContextProps;
-    noOverlay: boolean;
-    focusable?: boolean;
-    groups?: DashKitGroup[];
 }
 
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {}

src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {DashKitDnDContext} from '../../context/DashKitContext';
+import {DashKitDnDContext} from '../../context';
 import type {DraggedOverItem, ItemDragProps} from '../../shared';
 
 type DashKitDnDWrapperProps = {

src/components/DashKitView/DashKitView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {DashKitContext} from '../../context/DashKitContext';
+import {DashKitContext} from '../../context';
 import {withContext} from '../../hocs/withContext';
 import {useCalcPropsLayout} from '../../hooks/useCalcLayout';
 import type {RegisterManager} from '../../utils';

src/components/GridItem/GridItem.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {FOCUSED_CLASS_NAME} from '../../constants';
-import {DashKitContext} from '../../context/DashKitContext';
+import {DashKitContext} from '../../context';
 import {cn} from '../../utils/cn';
 import Item from '../Item/Item';
 import OverlayControls from '../OverlayControls/OverlayControls';

src/components/GridLayout/GridLayout.js

@@ -6,7 +6,7 @@ import {
     DRAGGABLE_CANCEL_CLASS_NAME,
     TEMPORARY_ITEM_ID,
 } from '../../constants';
-import {DashKitContext} from '../../context/DashKitContext';
+import {DashKitContext} from '../../context';
 import {resolveLayoutGroup} from '../../utils';
 import GridItem from '../GridItem/GridItem';
 
@@ -742,6 +742,7 @@ export default class GridLayout extends React.PureComponent {
 
                 if (group.render) {
                     const groupContext = {
+                        isMobile: false,
                         config,
                         editMode,
                         items,