feat: split AsideHeader to compound components

README.md

@@ -24,6 +24,36 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/[email protected] react@^16.
 - MobileHeaderFooterItem
 - Drawer
 - DrawerItem
+- PageLayout
+- PageLayoutAside
+
+## Optimization
+If your app content needs to be rendered faster than by passing it throw `AsideHeader` props,
+you may need to switch usage of `AsideHeader` to advanced style with `PageLayout` like this:
+
+```diff
+-import {AsideHeader} from '@gravity-ui/navigation';
++import {PageLayout} from '@gravity-ui/navigation';
++
++const PageLayoutAside = React.lazy(
++    import('@gravity-ui/navigation').then((module) => ({default: module.PageLayoutAside})),
++);
+
+-    <AsideHeader renderContent={renderContent} {...restProps} />
++    <PageLayout reverse>
++        <PageLayout.Content>
++            <ContentExample />
++        </PageLayout.Content>
++
++        <Suspense fallback={null}>
++            <PageLayoutAside {...restProps} />
++        </Suspense>
++    </PageLayout>
+```
+
+
+
+
 
 ## Imports
 

package.json

@@ -7,8 +7,8 @@
     "type": "git",
     "url": "https://github.com/gravity-ui/navigation"
   },
-  "main": "build/cjs/index.js",
-  "module": "build/esm/index.js",
+  "main": "build/cjs",
+  "module": "build/esm",
   "types": "build/esm/index.d.ts",
   "sideEffects": [
     "*.css",
@@ -53,7 +53,6 @@
     "@gravity-ui/uikit": "^5.14.0",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",
@@ -81,6 +80,7 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.49.7",
     "sass-loader": "^10.2.1",
     "storybook": "^7.1.0",

rollup.config.js

@@ -1,24 +1,39 @@
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
+import typescript from 'rollup-plugin-typescript2';
 import svgr from '@svgr/rollup';
 import postcss from 'rollup-plugin-postcss';
 import json from 'rollup-plugin-json';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
 const packageJson = require('./package.json');
 
+const input = [
+    'src/index.ts',
+    'src/components/ActionBar/index.ts',
+    'src/components/Title/index.ts',
+    'src/components/HotkeysPanel/index.ts',
+    'src/components/Settings/index.ts',
+    'src/components/MobileHeader/index.ts',
+    'src/components/AsideHeader/AsideHeader.tsx',
+    'src/components/AsideHeader/AsideHeaderContext.ts',
+    'src/components/Drawer/Drawer.tsx',
+    'src/components/FooterItem/FooterItem.tsx',
+    'src/components/AsideHeader/PageLayout/PageLayout.tsx',
+    'src/components/AsideHeader/PageLayout/PageLayoutAside.tsx',
+];
+
 export default [
     {
-        input: 'src/index.ts',
+        input,
         output: [
             {
-                file: packageJson.module,
+                dir: packageJson.module,
                 format: 'esm',
                 sourcemap: true,
             },
             {
-                file: packageJson.main,
+                dir: packageJson.main,
                 format: 'cjs',
                 sourcemap: true,
             },

src/components/AsideHeader/AsideHeader.scss

@@ -202,6 +202,10 @@ $block: '.#{variables.$ns}aside-header';
         flex-direction: row;
     }
 
+    &_reverse #{$block}__pane-container {
+        flex-direction: row-reverse;
+    }
+
     &__content {
         width: calc(100% - var(--gn-aside-header-size));
         z-index: 95;

src/components/AsideHeader/AsideHeader.tsx

@@ -1,44 +1,31 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 
-import {Content} from '../Content';
-
-import {AsideHeaderContextProvider, AsideHeaderInnerContextProvider} from './AsideHeaderContext';
 import {AsideHeaderProps} from './types';
+import {PageLayout} from './PageLayout/PageLayout';
+import {PageLayoutAside} from './PageLayout/PageLayoutAside';
 
-import {FirstPanel} from './components';
-import {b} from './utils';
-
-import './AsideHeader.scss';
-import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../constants';
-import {useAsideHeaderInnerContextValue} from './useAsideHeaderInnerContextValue';
-
-export const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>((props, ref) => {
-    const {className, compact} = props;
-
-    const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
-    const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]);
-    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({...props, size});
-    return (
-        <AsideHeaderContextProvider value={asideHeaderContextValue}>
-            <AsideHeaderInnerContextProvider value={asideHeaderInnerContextValue}>
-                <div
-                    className={b({compact}, className)}
-                    style={{
-                        ...({'--gn-aside-header-size': `${size}px`} as React.CSSProperties),
-                    }}
-                >
-                    <div className={b('pane-container')}>
-                        {/* First Panel */}
-                        <FirstPanel ref={ref} />
-                        {/* Second Panel */}
-                        <Content
-                            size={size}
-                            renderContent={props.renderContent}
-                            className={b('content')}
-                        />
-                    </div>
-                </div>
-            </AsideHeaderInnerContextProvider>
-        </AsideHeaderContextProvider>
-    );
-});
+/**
+ * Simply usage of AsideHeader:
+ * @example
+ * <AsideHeader renderContent={renderContent} {...props} />
+ *
+ * Advanced usage of AsideHeader:
+ * @example
+ * <PageLayout reverse >
+ *  <PageLayout.Content>
+ *      <Content />
+ *  </PageLayout.Content>
+ *
+ *  <PageLayoutAside {...props} />
+ * </PageLayout>
+ */
+export const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(
+    ({compact, className, ...props}, ref) => {
+        return (
+            <PageLayout compact={compact} className={className}>
+                <PageLayoutAside ref={ref} {...props} />
+                <PageLayout.Content renderContent={props.renderContent} />
+            </PageLayout>
+        );
+    },
+);

src/components/AsideHeader/AsideHeaderContext.ts

@@ -5,7 +5,6 @@ import {AsideHeaderInnerProps} from './types';
 export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {
     menuItems: MenuItem[];
     allPagesIsAvailable: boolean;
-    size: number;
     onItemClick: (
         item: MenuItem,
         collapsed: boolean,
@@ -30,7 +29,7 @@ export const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => {
 };
 
 export interface AsideHeaderContextType {
-    compact?: boolean;
+    compact: boolean;
     size: number;
 }