From 66cbce1790ad47eae62f769859d8476336c7ea6a Mon Sep 17 00:00:00 2001 From: martyanov-av Date: Thu, 21 Mar 2024 20:57:23 +0300 Subject: [PATCH 1/7] feat: add page-constructor page --- package.json | 2 +- src/components/App/App.tsx | 19 +++++++++++++------ src/styles/overrides.scss | 7 +++++++ tsconfig.json | 1 + 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index c0173c5..33185de 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ }, "devDependencies": { "@diplodoc/babel-preset": "^1.0.2", - "@diplodoc/components": "^3.9.1", + "@diplodoc/components": "^4.0.0", "@diplodoc/eslint-config": "^2.0.0", "@diplodoc/openapi-extension": "^2.1.0", "@diplodoc/prettier-config": "^2.0.0", diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index b01521f..5bc8aeb 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -9,14 +9,17 @@ import { } from '@gravity-ui/page-constructor'; import {ThemeProvider} from '@gravity-ui/uikit'; import { - DocLeadingPage, + ConstructorPageData, DocLeadingPageData, - DocPage, DocPageData, + DocumentType, Lang, Router, Theme, + getPageByType, + getPageType } from '@diplodoc/components'; + import {HeaderControls} from '../HeaderControls'; import {getDirection, updateRootClassName} from '../../utils'; import {Layout} from '../Layout'; @@ -35,9 +38,10 @@ import './App.scss'; export interface AppProps { lang: Lang; router: Router; + type: DocumentType; } -export type DocInnerProps = { +export type DocInnerProps = { data: Data; } & AppProps; @@ -65,9 +69,9 @@ function Runtime(props: RuntimeProps) { ); } -function Page(props: DocInnerProps) { +export function Page(props: DocInnerProps) { const {data, ...pageProps} = props; - const Page = data.leading ? DocLeadingPage : DocPage; + const Page = getPageByType(props?.type); return ( @@ -111,6 +115,8 @@ export function App(props: DocInnerProps): ReactElement { const {theme, textSize, wideFormat, fullScreen, showMiniToc, onChangeFullScreen} = settings; const fullHeader = !fullScreen && Boolean(navigation); const headerHeight = fullHeader ? 64 : 0; + const type = getPageType(data); + const pageProps = { headerHeight, data, @@ -122,6 +128,7 @@ export function App(props: DocInnerProps): ReactElement { textSize, fullScreen, onChangeFullScreen, + type, }; const direction = getDirection(lang); @@ -169,7 +176,7 @@ export function App(props: DocInnerProps): ReactElement { ), }, }} - content={{ + content={type === DocumentType.ConstructorPage && 'data' in data && 'fullScreen' in data.data && data.data.fullScreen ? data.data : { blocks: [ { type: 'page', diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss index 282d142..8837b0a 100644 --- a/src/styles/overrides.scss +++ b/src/styles/overrides.scss @@ -8,6 +8,13 @@ margin-top: var(--pc-first-block-indent, 96px); } +.pc-Grid .pc-Grid { + .container-fluid .pc-header-block__container-fluid { + padding-right: 40px; + padding-left: 40px; + } +} + .pc-block-base { padding: 0 !important; } diff --git a/tsconfig.json b/tsconfig.json index 094f1f3..646eb8d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,7 @@ "compilerOptions": { "target": "es2020", "moduleResolution": "node", + "resolveJsonModule": true, "lib": ["DOM"], "declaration": true, "outDir": "build", From 7046f951cd6dd066d92ef0da2270b5ea81c53fbd Mon Sep 17 00:00:00 2001 From: martyanov-av Date: Fri, 22 Mar 2024 15:44:28 +0300 Subject: [PATCH 2/7] use DocContentPage & add ConstructorPage --- src/components/App/App.tsx | 21 ++++++++--- src/components/ConstructorPage/index.tsx | 48 ++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 src/components/ConstructorPage/index.tsx diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 5bc8aeb..9dca670 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -6,10 +6,11 @@ import { NavigationItemModel, PageConstructor, PageConstructorProvider, + PageContent, } from '@gravity-ui/page-constructor'; import {ThemeProvider} from '@gravity-ui/uikit'; import { - ConstructorPageData, + DocContentPageData, DocLeadingPageData, DocPageData, DocumentType, @@ -34,6 +35,7 @@ import {LatexRuntime} from '@diplodoc/latex-extension/react'; import {Runtime as OpenapiSandbox} from '@diplodoc/openapi-extension/runtime'; import './App.scss'; +import {ConstructorPage} from "../ConstructorPage"; export interface AppProps { lang: Lang; @@ -41,7 +43,11 @@ export interface AppProps { type: DocumentType; } -export type DocInnerProps = { +export interface PageContentData extends DocContentPageData { + data: PageContent & {fullScreen?: boolean}; +} + +export type DocInnerProps = { data: Data; } & AppProps; @@ -145,7 +151,9 @@ export function App(props: DocInnerProps): ReactElement { return (
- + + {type === DocumentType.PageConstructor && } +
@@ -155,6 +163,7 @@ export function App(props: DocInnerProps): ReactElement { const {header = {}, logo} = navigation; const {leftItems = [], rightItems = []} = header as NavigationData['header']; const headerWithControls = rightItems.some((item: {type: string}) => item.type === 'controls'); + const fullScreenPC = type === DocumentType.PageConstructor && 'data' in data && 'fullScreen' in data.data && data.data.fullScreen; return (
@@ -172,11 +181,13 @@ export function App(props: DocInnerProps): ReactElement { + > + {type === DocumentType.PageConstructor && 'data' in data && } + ), }, }} - content={type === DocumentType.ConstructorPage && 'data' in data && 'fullScreen' in data.data && data.data.fullScreen ? data.data : { + content={fullScreenPC ? data.data as PageContent : { blocks: [ { type: 'page', diff --git a/src/components/ConstructorPage/index.tsx b/src/components/ConstructorPage/index.tsx new file mode 100644 index 0000000..29b237a --- /dev/null +++ b/src/components/ConstructorPage/index.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +import block from 'bem-cn-lite'; +import { + BackgroundMedia, + Col, + ConstructorBlocks, + Grid, + Row, + Theme, + getThemedValue +} from "@gravity-ui/page-constructor"; +import { PageContentData } from '../App/App'; + +export type WithChildren = T & {children?: React.ReactNode}; + +const bPC = block('pc-page-constructor'); +const bPCRow = block('pc-constructor-row'); + +export const ConstructorRow = ({children}: WithChildren<{}>) => + children ? ( + + {children} + + ) : null; + + +export function ConstructorPage({data: {data}, theme}: {data: PageContentData; theme: Theme}) { + const themedBackground = getThemedValue(data?.background, theme); + + return ( +
+
+ {data?.blocks && themedBackground && ( + + )} + + + + + +
+
+ ) +} From 1671d5ae3b9af9b81e66eebc332af787365eaf9b Mon Sep 17 00:00:00 2001 From: martyanov-av Date: Fri, 22 Mar 2024 15:46:51 +0300 Subject: [PATCH 3/7] update package-lock --- package-lock.json | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index c672cf1..58c31b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ }, "devDependencies": { "@diplodoc/babel-preset": "^1.0.2", - "@diplodoc/components": "^3.9.1", + "@diplodoc/components": "^4.0.0", "@diplodoc/eslint-config": "^2.0.0", "@diplodoc/openapi-extension": "^2.1.0", "@diplodoc/prettier-config": "^2.0.0", @@ -1913,13 +1913,13 @@ } }, "node_modules/@diplodoc/components": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/@diplodoc/components/-/components-3.9.1.tgz", - "integrity": "sha512-7SkWsL/Govd/CX3y6G0CCycSV312YUybVdx6M6rNexOiJrvBO7mc7PHIxnWR3kUk9hhtHVPQhKgEN1yQW+s8gA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@diplodoc/components/-/components-4.1.0.tgz", + "integrity": "sha512-zBxlxotgmgpxngd3H2g+WZqFOkuxcqAQy7SguZ+83tRlBLYPcjXr6e+CwT3MqAQOAzikdBT0BiTvO85YnhcP8A==", "dev": true, "dependencies": { "@gravity-ui/icons": "^2.5.0", - "@gravity-ui/uikit": "^5.24.0", + "@gravity-ui/uikit": "6.0.0", "@popperjs/core": "^2.11.2", "bem-cn-lite": "4.1.0", "i18next": "^19.9.2", @@ -1942,27 +1942,26 @@ } }, "node_modules/@diplodoc/components/node_modules/@gravity-ui/uikit": { - "version": "5.31.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.31.1.tgz", - "integrity": "sha512-XwYjYy73UOFY/R/aju0joOwFxJc16+wiYEC8cBFVPuRyTHZCWtGMgugosQAkzO1mwOnUfP4YuSAukBCTs5nCXQ==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.0.0.tgz", + "integrity": "sha512-16xgkTI646tZoAT5pnw7Ge2Q4e9c8DWYZw0w11X8A9hyuYaNjd0isUxpD4Beywi4ELKeFv3t2IXCn/RTU7/qVw==", "dev": true, "dependencies": { "@bem-react/classname": "^1.6.0", - "@gravity-ui/i18n": "^1.1.0", - "@gravity-ui/icons": "^2.5.0", + "@gravity-ui/i18n": "^1.2.0", + "@gravity-ui/icons": "^2.8.1", "@popperjs/core": "^2.11.8", "blueimp-md5": "^2.19.0", - "focus-trap": "^7.5.2", + "focus-trap": "^7.5.4", "lodash": "^4.17.21", "react-beautiful-dnd": "^13.1.1", "react-copy-to-clipboard": "^5.1.0", "react-popper": "^2.3.0", "react-transition-group": "^4.4.5", - "react-virtualized-auto-sizer": "^1.0.20", - "react-window": "^1.8.9", + "react-virtualized-auto-sizer": "^1.0.21", + "react-window": "^1.8.10", "tabbable": "^6.2.0", - "tslib": "^2.6.1", - "utility-types": "^3.10.0" + "tslib": "^2.6.2" }, "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0", From 931af2b568010eead8a1ef00c9eec49afbe433ce Mon Sep 17 00:00:00 2001 From: martyanov-av Date: Fri, 22 Mar 2024 15:54:07 +0300 Subject: [PATCH 4/7] lint --- src/components/App/App.tsx | 47 +++++++++++++++--------- src/components/ConstructorPage/index.tsx | 14 +++---- 2 files changed, 35 insertions(+), 26 deletions(-) diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 9dca670..bb3c6b9 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -18,7 +18,7 @@ import { Router, Theme, getPageByType, - getPageType + getPageType, } from '@diplodoc/components'; import {HeaderControls} from '../HeaderControls'; @@ -35,7 +35,7 @@ import {LatexRuntime} from '@diplodoc/latex-extension/react'; import {Runtime as OpenapiSandbox} from '@diplodoc/openapi-extension/runtime'; import './App.scss'; -import {ConstructorPage} from "../ConstructorPage"; +import {ConstructorPage} from '../ConstructorPage'; export interface AppProps { lang: Lang; @@ -151,8 +151,10 @@ export function App(props: DocInnerProps): ReactElement { return (
- - {type === DocumentType.PageConstructor && } + + {type === DocumentType.PageConstructor && ( + + )} @@ -163,7 +165,11 @@ export function App(props: DocInnerProps): ReactElement { const {header = {}, logo} = navigation; const {leftItems = [], rightItems = []} = header as NavigationData['header']; const headerWithControls = rightItems.some((item: {type: string}) => item.type === 'controls'); - const fullScreenPC = type === DocumentType.PageConstructor && 'data' in data && 'fullScreen' in data.data && data.data.fullScreen; + const fullScreenPC = + type === DocumentType.PageConstructor && + 'data' in data && + 'fullScreen' in data.data && + data.data.fullScreen; return (
@@ -178,22 +184,29 @@ export function App(props: DocInnerProps): ReactElement { }, blocks: { page: () => ( - - {type === DocumentType.PageConstructor && 'data' in data && } + + {type === DocumentType.PageConstructor && + 'data' in data && ( + + )} ), }, }} - content={fullScreenPC ? data.data as PageContent : { - blocks: [ - { - type: 'page', - }, - ], - }} + content={ + fullScreenPC + ? (data.data as PageContent) + : { + blocks: [ + { + type: 'page', + }, + ], + } + } navigation={ fullHeader ? { diff --git a/src/components/ConstructorPage/index.tsx b/src/components/ConstructorPage/index.tsx index 29b237a..c60f1c0 100644 --- a/src/components/ConstructorPage/index.tsx +++ b/src/components/ConstructorPage/index.tsx @@ -8,9 +8,9 @@ import { Grid, Row, Theme, - getThemedValue -} from "@gravity-ui/page-constructor"; -import { PageContentData } from '../App/App'; + getThemedValue, +} from '@gravity-ui/page-constructor'; +import {PageContentData} from '../App/App'; export type WithChildren = T & {children?: React.ReactNode}; @@ -24,7 +24,6 @@ export const ConstructorRow = ({children}: WithChildren<{}>) => ) : null; - export function ConstructorPage({data: {data}, theme}: {data: PageContentData; theme: Theme}) { const themedBackground = getThemedValue(data?.background, theme); @@ -32,10 +31,7 @@ export function ConstructorPage({data: {data}, theme}: {data: PageContentData; t
{data?.blocks && themedBackground && ( - + )} @@ -44,5 +40,5 @@ export function ConstructorPage({data: {data}, theme}: {data: PageContentData; t
- ) + ); } From 6903d7415a6cb66fce123a2c4a264bd7ad7ff42e Mon Sep 17 00:00:00 2001 From: martyanov-av Date: Fri, 22 Mar 2024 16:51:38 +0300 Subject: [PATCH 5/7] support PC without navigation --- src/components/App/App.tsx | 36 ++++++++++++++++++++++++++++++------ src/styles/overrides.scss | 7 +++++++ 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index bb3c6b9..8da9359 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -137,6 +137,11 @@ export function App(props: DocInnerProps): ReactElement { type, }; const direction = getDirection(lang); + const fullScreenPC = + type === DocumentType.PageConstructor && + 'data' in data && + 'fullScreen' in data.data && + data.data.fullScreen; useEffect(() => { updateRootClassName({ @@ -153,7 +158,31 @@ export function App(props: DocInnerProps): ReactElement { {type === DocumentType.PageConstructor && ( - + + ( + + ), + }, + }} + content={ + fullScreenPC + ? (data.data as PageContent) + : { + blocks: [ + { + type: 'page', + }, + ], + } + } + /> + )} @@ -165,11 +194,6 @@ export function App(props: DocInnerProps): ReactElement { const {header = {}, logo} = navigation; const {leftItems = [], rightItems = []} = header as NavigationData['header']; const headerWithControls = rightItems.some((item: {type: string}) => item.type === 'controls'); - const fullScreenPC = - type === DocumentType.PageConstructor && - 'data' in data && - 'fullScreen' in data.data && - data.data.fullScreen; return (
diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss index 8837b0a..d4063a0 100644 --- a/src/styles/overrides.scss +++ b/src/styles/overrides.scss @@ -8,6 +8,13 @@ margin-top: var(--pc-first-block-indent, 96px); } +.pc-Grid { + .container-fluid { + padding-right: 0px; + padding-left: 0px; + } +} + .pc-Grid .pc-Grid { .container-fluid .pc-header-block__container-fluid { padding-right: 40px; From 18c15afa2f22e49e93da3fe1c9c863312029a045 Mon Sep 17 00:00:00 2001 From: martyanov-av Date: Sun, 24 Mar 2024 20:01:26 +0300 Subject: [PATCH 6/7] add pc & leading page link key names --- src/constants.ts | 5 +++++ src/index.server.tsx | 2 ++ 2 files changed, 7 insertions(+) diff --git a/src/constants.ts b/src/constants.ts index 29dac98..b0b5575 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -19,3 +19,8 @@ export enum TextDirection { RTL = 'rtl', LTR = 'ltr', } + +export const LINK_KEYS_LEADING_CONFIG = ['href'] +export const LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG = ['src','url','href','icon','image','desktop','mobile','tablet','previewImg','image', 'avatar', 'logo', 'light', 'dark'] + +export const LINK_KEYS = [...new Set([...LINK_KEYS_LEADING_CONFIG, ...LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG])] diff --git a/src/index.server.tsx b/src/index.server.tsx index cf87514..009ffbf 100644 --- a/src/index.server.tsx +++ b/src/index.server.tsx @@ -2,7 +2,9 @@ import React from 'react'; import {renderToString} from 'react-dom/server'; import {App, DocInnerProps, DocLeadingPageData, DocPageData} from './components/App/App'; +import {LINK_KEYS} from './constants'; export type {DocInnerProps, DocPageData, DocLeadingPageData}; +export {LINK_KEYS}; export const render = (props: DocInnerProps) => renderToString(); From ef9e98c84a7b51830eeaf73b9f08cb2a9cc88a35 Mon Sep 17 00:00:00 2001 From: martyanov-av Date: Sun, 24 Mar 2024 20:03:13 +0300 Subject: [PATCH 7/7] lint --- src/constants.ts | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index b0b5575..8332e86 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -20,7 +20,24 @@ export enum TextDirection { LTR = 'ltr', } -export const LINK_KEYS_LEADING_CONFIG = ['href'] -export const LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG = ['src','url','href','icon','image','desktop','mobile','tablet','previewImg','image', 'avatar', 'logo', 'light', 'dark'] +export const LINK_KEYS_LEADING_CONFIG = ['href']; +export const LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG = [ + 'src', + 'url', + 'href', + 'icon', + 'image', + 'desktop', + 'mobile', + 'tablet', + 'previewImg', + 'image', + 'avatar', + 'logo', + 'light', + 'dark', +]; -export const LINK_KEYS = [...new Set([...LINK_KEYS_LEADING_CONFIG, ...LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG])] +export const LINK_KEYS = [ + ...new Set([...LINK_KEYS_LEADING_CONFIG, ...LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG]), +];