feat: add page-constructor page type (#220)

* feat: add page-constructor page type

* return leading prop

* rename PageConstructor -> ConstructorPage

* add storybook

* move  all PC  logic into client & del storybook

package.json

@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "@gravity-ui/icons": "^2.5.0",
-    "@gravity-ui/uikit": "6.0.0",
+    "@gravity-ui/uikit": "^6.2.0",
     "@popperjs/core": "^2.11.2",
     "bem-cn-lite": "4.1.0",
     "i18next": "^19.9.2",

src/components/DocContentPage/DocContentPage.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import block from 'bem-cn-lite';
+
+import {DEFAULT_SETTINGS} from '../../constants';
+import {DocContentPageData, Router} from '../../models';
+import {DocLayout} from '../DocLayout';
+
+const b = block('dc-doc-page');
+
+const {wideFormat: defaultWideFormat} = DEFAULT_SETTINGS;
+
+export interface DocContentPageProps extends DocContentPageData {
+    router: Router;
+    headerHeight?: number;
+    wideFormat?: boolean;
+    hideTocHeader?: boolean;
+    hideToc?: boolean;
+    tocTitleIcon?: React.ReactNode;
+}
+
+export const DocContentPage: React.FC<DocContentPageProps> = ({
+    data,
+    toc,
+    router,
+    headerHeight,
+    wideFormat = defaultWideFormat,
+    hideTocHeader,
+    hideToc,
+    tocTitleIcon,
+    footer,
+    children,
+}) => {
+    const modes = {
+        'regular-page-width': !wideFormat,
+    };
+
+    return (
+        <DocLayout
+            toc={toc}
+            router={router}
+            headerHeight={headerHeight}
+            className={b(modes)}
+            hideTocHeader={hideTocHeader}
+            hideToc={hideToc || data?.fullScreen}
+            fullScreen={data?.fullScreen}
+            tocTitleIcon={tocTitleIcon}
+            footer={footer}
+            hideRight={true}
+            wideFormat={wideFormat}
+        >
+            <DocLayout.Center>
+                <div className={b('main')}>
+                    <main className={b('content')}>{children}</main>
+                </div>
+            </DocLayout.Center>
+        </DocLayout>
+    );
+};

src/components/DocContentPage/index.ts

@@ -0,0 +1 @@
+export * from './DocContentPage';

src/index.ts

@@ -23,7 +23,9 @@ export * from './components/ErrorBoundary';
 export * from './components/Paginator';
 export * from './components/SearchItem';
 export * from './components/SearchPage';
+export * from './components/DocContentPage';
 
 export * from './config';
 export * from './models';
 export * from './constants';
+export * from './utils';

src/models/index.ts

@@ -48,6 +48,14 @@ export interface DocLeadingPageData extends DocBasePageData {
     data: DocLeadingData;
 }
 
+export interface DocContentPageData extends DocBasePageData {
+    leading: true;
+    data: {
+        fullScreen?: boolean;
+    };
+    children?: React.ReactNode;
+}
+
 export interface DocLeadingData {
     title: string;
     description: string | string[];
@@ -176,3 +184,9 @@ export interface SubscribeData {
     email: string;
     type: SubscribeType;
 }
+
+export enum DocumentType {
+    Base = 'BASE',
+    Leading = 'LEADING',
+    PageConstructor = 'PAGE_CONSTRUCTOR',
+}

src/utils/index.ts

@@ -2,8 +2,18 @@ import {parse} from 'url';
 
 import {ThemeContextProps} from '@gravity-ui/uikit';
 
+import {DocContentPage} from '../components/DocContentPage';
+import {DocLeadingPage} from '../components/DocLeadingPage';
+import {DocPage} from '../components/DocPage';
 import {PopperPosition} from '../hooks';
-import {Contributor, Router} from '../models';
+import {
+    Contributor,
+    DocContentPageData,
+    DocLeadingPageData,
+    DocPageData,
+    DocumentType,
+    Router,
+} from '../models';
 
 export type InnerProps<TProps extends Partial<TDefaultProps>, TDefaultProps> = Omit<
     TProps,
@@ -97,3 +107,26 @@ export const getPopupPosition = (
 
     return isVerticalView ? PopperPosition.LEFT_START : PopperPosition.BOTTOM_END;
 };
+
+export function getPageByType(type: DocumentType) {
+    const PageTypes = {
+        [DocumentType.Base]: DocPage,
+        [DocumentType.Leading]: DocLeadingPage,
+        [DocumentType.PageConstructor]: DocContentPage,
+    };
+
+    return PageTypes[type] || null;
+}
+
+export function getPageType({
+    data,
+    leading,
+}: DocLeadingPageData | (DocPageData & {data?: undefined}) | DocContentPageData): DocumentType {
+    if (leading && data) {
+        return Object.prototype.hasOwnProperty.call(data, 'links')
+            ? DocumentType.Leading
+            : DocumentType.PageConstructor;
+    }
+
+    return DocumentType.Base;
+}