feat: add page-constructor page type

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/PageConstructor/PageConstructor.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+
+import {
+    BackgroundMedia,
+    Col,
+    ConstructorBlocks,
+    Grid,
+    Row,
+    getThemedValue,
+} from '@gravity-ui/page-constructor';
+import block from 'bem-cn-lite';
+
+import {DEFAULT_SETTINGS} from '../../constants';
+import {DocumentType, PageConstructorData, Router, Theme} from '../../models';
+import {DocLayout} from '../DocLayout';
+
+const b = block('dc-doc-page');
+
+const bPC = block('pc-page-constructor');
+const bPCRow = block('pc-constructor-row');
+
+const {wideFormat: defaultWideFormat} = DEFAULT_SETTINGS;
+
+export interface PageConstructorProps extends PageConstructorData {
+    router: Router;
+    headerHeight?: number;
+    wideFormat?: boolean;
+    hideTocHeader?: boolean;
+    hideToc?: boolean;
+    tocTitleIcon?: React.ReactNode;
+    theme: Theme;
+    type: DocumentType;
+}
+
+export type WithChildren<T = {}> = T & {children?: React.ReactNode};
+
+export const ConstructorRow = ({children}: WithChildren<{}>) =>
+    children ? (
+        <Row className={bPCRow()}>
+            <Col>{children}</Col>
+        </Row>
+    ) : null;
+
+export const PageConstructor: React.FC<PageConstructorProps> = ({
+    data,
+    toc,
+    router,
+    headerHeight,
+    wideFormat = defaultWideFormat,
+    hideTocHeader,
+    hideToc,
+    tocTitleIcon,
+    footer,
+    theme,
+    type,
+}) => {
+    const modes = {
+        'regular-page-width': !wideFormat,
+    };
+
+    const themedBackground = getThemedValue(data?.background, theme);
+
+    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')}>
+                        {type === DocumentType.PageConstructor && (
+                            <div className={b('')}>
+                                <div className={bPC('wrapper')}>
+                                    {data?.blocks && themedBackground && (
+                                        <BackgroundMedia
+                                            {...themedBackground}
+                                            className={bPC('background')}
+                                        />
+                                    )}
+                                    <Grid>
+                                        <ConstructorRow>
+                                            <ConstructorBlocks items={data?.blocks} />
+                                        </ConstructorRow>
+                                    </Grid>
+                                </div>
+                            </div>
+                        )}
+                    </main>
+                </div>
+            </DocLayout.Center>
+        </DocLayout>
+    );
+};

src/components/PageConstructor/index.ts

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

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/PageConstructor';
 
 export * from './config';
 export * from './models';
 export * from './constants';
+export * from './utils';

src/models/index.ts

@@ -1,3 +1,5 @@
+import {PageContent} from '@gravity-ui/page-constructor';
+
 import type {Loc} from '../config/i18n';
 
 export enum Theme {
@@ -37,15 +39,20 @@ export interface DocSettings {
 
 export interface DocBasePageData {
     toc: TocData;
-    leading?: boolean;
+    isYaml?: boolean;
     footer?: React.ReactNode;
 }
 
 export interface DocLeadingPageData extends DocBasePageData {
-    leading: true;
+    isYaml: true;
     data: DocLeadingData;
 }
 
+export interface PageConstructorData extends DocBasePageData {
+    isYaml: true;
+    data: PageContent & {fullScreen: boolean};
+}
+
 export interface DocLeadingData {
     title: string;
     description: string | string[];
@@ -67,7 +74,7 @@ export enum VcsType {
 }
 
 export interface DocPageData extends DocBasePageData {
-    leading?: false;
+    isYaml?: false;
     breadcrumbs?: BreadcrumbItem[];
     html: string;
     title?: string;
@@ -167,3 +174,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 {DocLeadingPage} from '../components/DocLeadingPage';
+import {DocPage} from '../components/DocPage';
+import {PageConstructor} from '../components/PageConstructor';
 import {PopperPosition} from '../hooks';
-import {Contributor, Router} from '../models';
+import {
+    Contributor,
+    DocLeadingPageData,
+    DocPageData,
+    DocumentType,
+    PageConstructorData,
+    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]: PageConstructor,
+    };
+
+    return PageTypes[type] || null;
+}
+
+export function getPageType({
+    data,
+    isYaml,
+}: DocLeadingPageData | (DocPageData & {data?: undefined}) | PageConstructorData): DocumentType {
+    if (isYaml && data) {
+        return Object.prototype.hasOwnProperty.call(data, 'links')
+            ? DocumentType.Leading
+            : DocumentType.PageConstructor;
+    }
+
+    return DocumentType.Base;
+}