From 2d95002d0e012aa1365d335b37a33ba516840f0e Mon Sep 17 00:00:00 2001 From: Nik Tverd Date: Wed, 7 Jun 2023 15:14:49 +0600 Subject: [PATCH 1/4] feat: refactor column detection --- src/blocks/Author/Author.tsx | 7 ++- src/blocks/Banner/Banner.tsx | 6 +++ src/blocks/CTA/CTA.tsx | 7 ++- src/blocks/ColoredText/ColoredText.tsx | 6 +++ src/blocks/Layout/Layout.tsx | 42 +++++----------- src/blocks/Media/Media.tsx | 67 +++++++++++++++----------- src/blocks/Meta/Meta.tsx | 7 ++- src/blocks/YFM/YFM.tsx | 7 ++- src/contexts/ColumnContext.ts | 5 ++ src/hooks/useCanRenderInColumn.ts | 10 ++++ src/models/blocks.ts | 21 +++++--- src/models/common.ts | 6 +++ 12 files changed, 124 insertions(+), 67 deletions(-) create mode 100644 src/contexts/ColumnContext.ts create mode 100644 src/hooks/useCanRenderInColumn.ts diff --git a/src/blocks/Author/Author.tsx b/src/blocks/Author/Author.tsx index 7aded8e8..0db77638 100644 --- a/src/blocks/Author/Author.tsx +++ b/src/blocks/Author/Author.tsx @@ -4,6 +4,7 @@ import {AuthorType, Author as PCAuthor} from '@gravity-ui/page-constructor'; import {Wrapper} from '../../components/Wrapper/Wrapper'; import {PostPageContext} from '../../contexts/PostPageContext'; +import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {AuthorProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -13,7 +14,7 @@ import './Author.scss'; const b = block('author'); export const Author: React.FC = (props) => { - const {image, paddingTop, paddingBottom, authorId} = props; + const {image, paddingTop, paddingBottom, authorId, column} = props; const {post} = useContext(PostPageContext); @@ -31,6 +32,10 @@ export const Author: React.FC = (props) => { }; }, [author?.avatar, author?.firstName, author?.shortDescription, author?.secondName, image]); + if (!useCanRenderInColumn(column)) { + return null; + } + if (!authorItem?.firstName || !authorItem?.secondName) { return null; } diff --git a/src/blocks/Banner/Banner.tsx b/src/blocks/Banner/Banner.tsx index 01bc456a..b943f3aa 100644 --- a/src/blocks/Banner/Banner.tsx +++ b/src/blocks/Banner/Banner.tsx @@ -4,6 +4,7 @@ import {Content, Image, NewMetrikaGoal} from '@gravity-ui/page-constructor'; import {Wrapper} from '../../components/Wrapper/Wrapper'; import {BlogMetrikaGoalIds} from '../../constants'; +import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {BannerProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -19,6 +20,7 @@ export const Banner: React.FC = ({ image, paddingTop, paddingBottom, + column, ...content }) => { const contentStyle: Record = {}; @@ -42,6 +44,10 @@ export const Banner: React.FC = ({ button.metrikaGoals = getBlogElementMetrika(metrikaGoal, button.metrikaGoals); }); + if (!useCanRenderInColumn(column)) { + return null; + } + return ( = ({items, paddingTop, paddingBottom}) => { +export const CTA: React.FC = ({items, paddingTop, paddingBottom, column}) => { /** * @deprecated Metrika will be deleted after launch of analyticsEvents */ @@ -22,6 +23,10 @@ export const CTA: React.FC = ({items, paddingTop, paddingBottom}) => { isCrossSite: true, }; + if (!useCanRenderInColumn(column)) { + return null; + } + return ( = ({ background, paddingTop, paddingBottom, + column, ...content }) => { const contentData = updateContentSizes(content); + if (!useCanRenderInColumn(column)) { + return null; + } + return ( = ({ fullWidth, mobileOrder, @@ -68,27 +65,14 @@ export const Layout: React.FC = ({ return layoutConfig; }, [fullWidth, mobileOrder]); - const renderChildren = (blockChildren: React.ReactChild[]) => - React.Children.map(blockChildren, (child, i) => ( -
- {child} -
- )); - - const {left, right} = useMemo( - () => - children?.reduce( - (sortedChildren: SortedLayoutItems, child: ReactElement) => { - if (child?.props?.data?.column === 'left') { - sortedChildren.left.push(child); - } else { - sortedChildren.right.push(child); - } - return sortedChildren; - }, - {left: [], right: []}, - ), - [children], + const renderChildren = (blockChildren: React.ReactChild[], column = 'right' as Column) => ( + + {React.Children.map(blockChildren, (child, i) => ( +
+ {child} +
+ ))} + ); return ( @@ -100,10 +84,10 @@ export const Layout: React.FC = ({ > - {left && renderChildren(left)} + {renderChildren(children, 'left')} - {right && renderChildren(right)} + {renderChildren(children, 'right')} diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx index 59eb6c28..2de3bc13 100644 --- a/src/blocks/Media/Media.tsx +++ b/src/blocks/Media/Media.tsx @@ -3,6 +3,7 @@ import React from 'react'; import {Media as PCMedia, YFMWrapper} from '@gravity-ui/page-constructor'; import {Wrapper} from '../../components/Wrapper/Wrapper'; +import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {MediaProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -11,32 +12,44 @@ import './Media.scss'; const b = block('media'); -export const Media: React.FC = ({text, paddingTop, paddingBottom, ...mediaProps}) => ( - -
- -
- {text && ( -
- = ({ + text, + paddingTop, + paddingBottom, + column, + ...mediaProps +}) => { + if (!useCanRenderInColumn(column)) { + return null; + } + + return ( + +
+
- )} - -); + {text && ( +
+ +
+ )} + + ); +}; diff --git a/src/blocks/Meta/Meta.tsx b/src/blocks/Meta/Meta.tsx index 9d538177..97523df7 100644 --- a/src/blocks/Meta/Meta.tsx +++ b/src/blocks/Meta/Meta.tsx @@ -7,6 +7,7 @@ import {Wrapper} from '../../components/Wrapper/Wrapper'; import {BlogMetrikaGoalIds} from '../../constants'; import {LocaleContext} from '../../contexts/LocaleContext'; import {PostPageContext} from '../../contexts/PostPageContext'; +import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {MetaProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -32,10 +33,14 @@ const breadcrumbsGoals = [ ]; export const Meta: React.FC = (props) => { - const {paddingTop = 'l', paddingBottom = 'l', theme = 'light'} = props; + const {paddingTop = 'l', paddingBottom = 'l', theme = 'light', column} = props; const {post} = useContext(PostPageContext); const {locale} = useContext(LocaleContext); + if (!useCanRenderInColumn(column)) { + return null; + } + const {title, id, date, readingTime, tags} = post; const breadcrumbs = getBreadcrumbs({tags, pathPrefix: locale?.pathPrefix || ''}); diff --git a/src/blocks/YFM/YFM.tsx b/src/blocks/YFM/YFM.tsx index 1577e7c0..134a8afd 100644 --- a/src/blocks/YFM/YFM.tsx +++ b/src/blocks/YFM/YFM.tsx @@ -4,13 +4,18 @@ import {YFMWrapper} from '@gravity-ui/page-constructor'; import block from 'bem-cn-lite'; import {Wrapper} from '../../components/Wrapper/Wrapper'; +import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {YFMProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; const b = block('yfm'); export const YFM: React.FC = (props) => { - const {text, paddingTop, paddingBottom} = props; + const {text, paddingTop, paddingBottom, column} = props; + + if (!useCanRenderInColumn(column)) { + return null; + } return ( ('right'); diff --git a/src/hooks/useCanRenderInColumn.ts b/src/hooks/useCanRenderInColumn.ts new file mode 100644 index 00000000..ae237fe7 --- /dev/null +++ b/src/hooks/useCanRenderInColumn.ts @@ -0,0 +1,10 @@ +import {useContext} from 'react'; + +import {ColumnContext} from '../contexts/ColumnContext'; +import {Column} from '../models/common'; + +export const useCanRenderInColumn = (componentColumn = 'right' as Column) => { + const column = useContext(ColumnContext); + + return componentColumn === column; +}; diff --git a/src/models/blocks.ts b/src/models/blocks.ts index a7121412..a4367686 100644 --- a/src/models/blocks.ts +++ b/src/models/blocks.ts @@ -7,20 +7,22 @@ import { TextTheme, } from '@gravity-ui/page-constructor'; -import {BlockType, ClassNameProps, PostData} from './common'; +import {BlockType, ClassNameProps, ColumnProps, PostData} from './common'; import {PaddingsYFMProps} from './paddings'; // blocks props export type AuthorProps = ClassNameProps & { authorId: number; image: string; -} & PaddingsYFMProps; +} & PaddingsYFMProps & + ColumnProps; export type BannerProps = ContentBlockProps & { color?: string; image?: string; imageSize?: 's' | 'm'; -} & PaddingsYFMProps; +} & PaddingsYFMProps & + ColumnProps; export type ColoredTextProps = ContentBlockProps & { background?: { @@ -28,12 +30,14 @@ export type ColoredTextProps = ContentBlockProps & { image?: string; altText?: string; }; -} & PaddingsYFMProps; +} & PaddingsYFMProps & + ColumnProps; export type CTAProps = { items: Array; columnCount?: number; -} & PaddingsYFMProps; +} & PaddingsYFMProps & + ColumnProps; export type HeaderProps = HeaderBlockProps & PaddingsYFMProps; @@ -45,6 +49,7 @@ export type LayoutProps = { export type MediaProps = ClassNameProps & PaddingsYFMProps & + ColumnProps & Partial> & { text?: string; }; @@ -52,7 +57,8 @@ export type MediaProps = ClassNameProps & export type MetaProps = { locale: string; theme?: TextTheme; -} & PaddingsYFMProps; +} & PaddingsYFMProps & + ColumnProps; export type SuggestProps = ClassNameProps & { posts: PostData[]; @@ -60,7 +66,8 @@ export type SuggestProps = ClassNameProps & { export type YFMProps = { text: string; -} & PaddingsYFMProps; +} & PaddingsYFMProps & + ColumnProps; export type FeedProps = { image: string; diff --git a/src/models/common.ts b/src/models/common.ts index e8b57252..a8770a3b 100644 --- a/src/models/common.ts +++ b/src/models/common.ts @@ -10,10 +10,16 @@ export enum Theme { Dark = 'dark', } +export type Column = 'left' | 'right'; + export interface ClassNameProps { className?: string; } +export interface ColumnProps { + column?: Column; +} + export type Author = { id: number; avatar: string | null; From 1ddfcbcf56c5e4908bd7a27d945b67bf02c9b1c4 Mon Sep 17 00:00:00 2001 From: Nik Tverd Date: Wed, 7 Jun 2023 23:01:05 +0600 Subject: [PATCH 2/4] feat: refactor with hoc --- src/blocks/Author/Author.tsx | 9 +-- .../Author/__stories__/Author.stories.tsx | 6 +- src/blocks/Author/schema.ts | 4 +- src/blocks/Banner/Banner.tsx | 8 +-- .../Banner/__stories__/Banner.stories.tsx | 6 +- src/blocks/Banner/schema.ts | 4 +- src/blocks/CTA/CTA.tsx | 9 +-- src/blocks/CTA/__stories__/CTA.stories.tsx | 16 ++--- src/blocks/CTA/schema.ts | 4 +- src/blocks/ColoredText/ColoredText.tsx | 8 +-- .../__stories__/ColoredText.stories.tsx | 6 +- src/blocks/ColoredText/schema.ts | 4 +- src/blocks/Feed/__stories__/Feed.stories.tsx | 6 +- src/blocks/Feed/schema.ts | 4 +- .../Header/__stories__/Header.stories.tsx | 6 +- src/blocks/Header/schema.ts | 4 +- .../Layout/__stories__/Layout.stories.tsx | 6 +- src/blocks/Layout/schema.ts | 4 +- src/blocks/Media/Media.tsx | 69 ++++++++----------- .../Media/__stories__/Media.stories.tsx | 6 +- src/blocks/Media/schema.ts | 4 +- src/blocks/Meta/Meta.tsx | 9 +-- src/blocks/Meta/__stories__/Meta.stories.tsx | 6 +- src/blocks/Meta/schema.ts | 4 +- .../Suggest/__stories__/Suggest.stories.tsx | 6 +- src/blocks/Suggest/schema.ts | 4 +- src/blocks/YFM/YFM.tsx | 9 +-- src/blocks/YFM/__stories__/YFM.stories.tsx | 6 +- src/blocks/YFM/schema.ts | 4 +- src/constructor/blocksMap.ts | 35 +++++----- src/data/config.ts | 8 ++- src/data/createReadableContent.ts | 4 +- src/hocs/withColumnSelection.tsx | 18 +++++ src/hooks/useCanRenderInColumn.ts | 10 --- src/models/blocks.ts | 43 +++++------- src/models/common.ts | 13 ++-- src/schema/index.ts | 25 +++---- 37 files changed, 187 insertions(+), 210 deletions(-) create mode 100644 src/hocs/withColumnSelection.tsx delete mode 100644 src/hooks/useCanRenderInColumn.ts diff --git a/src/blocks/Author/Author.tsx b/src/blocks/Author/Author.tsx index 0db77638..ef23e6fa 100644 --- a/src/blocks/Author/Author.tsx +++ b/src/blocks/Author/Author.tsx @@ -4,7 +4,6 @@ import {AuthorType, Author as PCAuthor} from '@gravity-ui/page-constructor'; import {Wrapper} from '../../components/Wrapper/Wrapper'; import {PostPageContext} from '../../contexts/PostPageContext'; -import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {AuthorProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -14,7 +13,7 @@ import './Author.scss'; const b = block('author'); export const Author: React.FC = (props) => { - const {image, paddingTop, paddingBottom, authorId, column} = props; + const {image, paddingTop, paddingBottom, authorId} = props; const {post} = useContext(PostPageContext); @@ -32,10 +31,6 @@ export const Author: React.FC = (props) => { }; }, [author?.avatar, author?.firstName, author?.shortDescription, author?.secondName, image]); - if (!useCanRenderInColumn(column)) { - return null; - } - if (!authorItem?.firstName || !authorItem?.secondName) { return null; } @@ -58,3 +53,5 @@ export const Author: React.FC = (props) => { ); }; + +export default Author; diff --git a/src/blocks/Author/__stories__/Author.stories.tsx b/src/blocks/Author/__stories__/Author.stories.tsx index b8433793..6a194a76 100644 --- a/src/blocks/Author/__stories__/Author.stories.tsx +++ b/src/blocks/Author/__stories__/Author.stories.tsx @@ -8,7 +8,7 @@ import customBlocks from '../../../constructor/blocksMap'; import {PostPageContext} from '../../../contexts/PostPageContext'; import {BLOCKS} from '../../../demo/constants'; import {AuthorProps} from '../../../models/blocks'; -import {BlockType, PostData} from '../../../models/common'; +import {BlockInColumnsType, PostData} from '../../../models/common'; import {Author} from '../Author'; import post from '../../../../.mocks/post.json'; @@ -22,7 +22,7 @@ export default { } as Meta; type AuthorModel = { - type: BlockType.Author; + type: BlockInColumnsType.Author; } & AuthorProps; const DefaultTemplate: Story = (args) => ( @@ -34,7 +34,7 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.Author, + type: BlockInColumnsType.Author, authorId: 290, ...getDefaultStoryArgs(), }; diff --git a/src/blocks/Author/schema.ts b/src/blocks/Author/schema.ts index 8e7cc984..c233fbcf 100644 --- a/src/blocks/Author/schema.ts +++ b/src/blocks/Author/schema.ts @@ -4,11 +4,11 @@ const { common: {BlockBaseProps}, } = validators; -import {BlockType} from '../../models/common'; +import {BlockInColumnsType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; export const Author = { - [BlockType.Author]: { + [BlockInColumnsType.Author]: { type: 'object', additionalProperties: false, required: ['authorId'], diff --git a/src/blocks/Banner/Banner.tsx b/src/blocks/Banner/Banner.tsx index b943f3aa..e887ec1b 100644 --- a/src/blocks/Banner/Banner.tsx +++ b/src/blocks/Banner/Banner.tsx @@ -4,7 +4,6 @@ import {Content, Image, NewMetrikaGoal} from '@gravity-ui/page-constructor'; import {Wrapper} from '../../components/Wrapper/Wrapper'; import {BlogMetrikaGoalIds} from '../../constants'; -import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {BannerProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -20,7 +19,6 @@ export const Banner: React.FC = ({ image, paddingTop, paddingBottom, - column, ...content }) => { const contentStyle: Record = {}; @@ -44,10 +42,6 @@ export const Banner: React.FC = ({ button.metrikaGoals = getBlogElementMetrika(metrikaGoal, button.metrikaGoals); }); - if (!useCanRenderInColumn(column)) { - return null; - } - return ( = ({ ); }; + +export default Banner; diff --git a/src/blocks/Banner/__stories__/Banner.stories.tsx b/src/blocks/Banner/__stories__/Banner.stories.tsx index 6761a9f2..5d19d9da 100644 --- a/src/blocks/Banner/__stories__/Banner.stories.tsx +++ b/src/blocks/Banner/__stories__/Banner.stories.tsx @@ -8,7 +8,7 @@ import customBlocks from '../../../constructor/blocksMap'; import {PostPageContext} from '../../../contexts/PostPageContext'; import {BLOCKS} from '../../../demo/constants'; import {BannerProps} from '../../../models/blocks'; -import {BlockType, PostData} from '../../../models/common'; +import {BlockInColumnsType, PostData} from '../../../models/common'; import {Banner} from '../Banner'; import post from '../../../../.mocks/post.json'; @@ -27,7 +27,7 @@ export default { } as Meta; type BannerModel = { - type: BlockType.Banner; + type: BlockInColumnsType.Banner; } & BannerProps; const DefaultTemplate: Story = (args) => ( @@ -39,7 +39,7 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.Banner, + type: BlockInColumnsType.Banner, color: '#7ccea0', ...getDefaultStoryArgs(), title: 'Lorem', diff --git a/src/blocks/Banner/schema.ts b/src/blocks/Banner/schema.ts index 47b8f4c8..280d5d52 100644 --- a/src/blocks/Banner/schema.ts +++ b/src/blocks/Banner/schema.ts @@ -1,6 +1,6 @@ import {validators} from '@gravity-ui/page-constructor'; -import {BlockType} from '../../models/common'; +import {BlockInColumnsType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; const { @@ -9,7 +9,7 @@ const { } = validators; export const Banner = { - [BlockType.Banner]: { + [BlockInColumnsType.Banner]: { type: 'object', additionalProperties: false, required: ['title', 'text', 'image'], diff --git a/src/blocks/CTA/CTA.tsx b/src/blocks/CTA/CTA.tsx index e7590646..95251345 100644 --- a/src/blocks/CTA/CTA.tsx +++ b/src/blocks/CTA/CTA.tsx @@ -4,7 +4,6 @@ import {Content, ContentBlockProps, NewMetrikaGoal} from '@gravity-ui/page-const import {Wrapper} from '../../components/Wrapper/Wrapper'; import {BlogMetrikaGoalIds} from '../../constants'; -import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {CTAProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -14,7 +13,7 @@ import './CTA.scss'; const b = block('cta'); -export const CTA: React.FC = ({items, paddingTop, paddingBottom, column}) => { +export const CTA: React.FC = ({items, paddingTop, paddingBottom}) => { /** * @deprecated Metrika will be deleted after launch of analyticsEvents */ @@ -23,10 +22,6 @@ export const CTA: React.FC = ({items, paddingTop, paddingBottom, colum isCrossSite: true, }; - if (!useCanRenderInColumn(column)) { - return null; - } - return ( = ({items, paddingTop, paddingBottom, colum ); }; + +export default CTA; diff --git a/src/blocks/CTA/__stories__/CTA.stories.tsx b/src/blocks/CTA/__stories__/CTA.stories.tsx index 6930f77e..7c75c542 100644 --- a/src/blocks/CTA/__stories__/CTA.stories.tsx +++ b/src/blocks/CTA/__stories__/CTA.stories.tsx @@ -8,7 +8,7 @@ import customBlocks from '../../../constructor/blocksMap'; import {PostPageContext} from '../../../contexts/PostPageContext'; import {BLOCKS} from '../../../demo/constants'; import {CTAProps} from '../../../models/blocks'; -import {BlockType, PostData} from '../../../models/common'; +import {BlockInColumnsType, PostData} from '../../../models/common'; import {CTA} from '../CTA'; import contentBlocks from '../../../../.mocks/contentBlocks.json'; @@ -23,7 +23,7 @@ export default { } as Meta; type CTAModel = { - type: BlockType.CTA; + type: BlockInColumnsType.CTA; } & CTAProps; const DefaultTemplate: Story = (args) => ( @@ -40,37 +40,37 @@ export const FiveItems = DefaultTemplate.bind({}); export const SixItems = DefaultTemplate.bind({}); Default.args = { - type: BlockType.CTA, + type: BlockInColumnsType.CTA, ...getDefaultStoryArgs(), items: contentBlocks.slice(0, 3), }; OneItem.args = { - type: BlockType.CTA, + type: BlockInColumnsType.CTA, ...getDefaultStoryArgs(), items: contentBlocks.slice(0, 1), }; TwoItems.args = { - type: BlockType.CTA, + type: BlockInColumnsType.CTA, ...getDefaultStoryArgs(), items: contentBlocks.slice(0, 2), }; FourItems.args = { - type: BlockType.CTA, + type: BlockInColumnsType.CTA, ...getDefaultStoryArgs(), items: contentBlocks.slice(0, 4), }; FiveItems.args = { - type: BlockType.CTA, + type: BlockInColumnsType.CTA, ...getDefaultStoryArgs(), items: contentBlocks.slice(0, 5), }; SixItems.args = { - type: BlockType.CTA, + type: BlockInColumnsType.CTA, ...getDefaultStoryArgs(), items: contentBlocks.slice(0, 6), }; diff --git a/src/blocks/CTA/schema.ts b/src/blocks/CTA/schema.ts index b399ffa0..758ab9f6 100644 --- a/src/blocks/CTA/schema.ts +++ b/src/blocks/CTA/schema.ts @@ -1,6 +1,6 @@ import {validators} from '@gravity-ui/page-constructor'; -import {BlockType} from '../../models/common'; +import {BlockInColumnsType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; const { @@ -9,7 +9,7 @@ const { } = validators; export const CTA = { - [BlockType.CTA]: { + [BlockInColumnsType.CTA]: { type: 'object', additionalProperties: false, required: ['items'], diff --git a/src/blocks/ColoredText/ColoredText.tsx b/src/blocks/ColoredText/ColoredText.tsx index 06205fe9..ef7c4ee8 100644 --- a/src/blocks/ColoredText/ColoredText.tsx +++ b/src/blocks/ColoredText/ColoredText.tsx @@ -3,7 +3,6 @@ import React from 'react'; import {BackgroundImage, Content} from '@gravity-ui/page-constructor'; import {Wrapper} from '../../components/Wrapper/Wrapper'; -import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {ColoredTextProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -17,15 +16,10 @@ export const ColoredText: React.FC = ({ background, paddingTop, paddingBottom, - column, ...content }) => { const contentData = updateContentSizes(content); - if (!useCanRenderInColumn(column)) { - return null; - } - return ( = ({ ); }; + +export default ColoredText; diff --git a/src/blocks/ColoredText/__stories__/ColoredText.stories.tsx b/src/blocks/ColoredText/__stories__/ColoredText.stories.tsx index a7ecac31..4b5fdc16 100644 --- a/src/blocks/ColoredText/__stories__/ColoredText.stories.tsx +++ b/src/blocks/ColoredText/__stories__/ColoredText.stories.tsx @@ -7,7 +7,7 @@ import customBlocks from '../../../constructor/blocksMap'; import {PostPageContext} from '../../../contexts/PostPageContext'; import {BLOCKS} from '../../../demo/constants'; import {ColoredTextProps} from '../../../models/blocks'; -import {BlockType, PostData} from '../../../models/common'; +import {BlockInColumnsType, PostData} from '../../../models/common'; import {ColoredText} from '../ColoredText'; import post from '../../../../.mocks/post.json'; @@ -21,7 +21,7 @@ export default { } as Meta; type ColoredTextModel = { - type: BlockType.ColoredText; + type: BlockInColumnsType.ColoredText; } & ColoredTextProps; const DefaultTemplate: Story = (args) => ( @@ -33,7 +33,7 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.ColoredText, + type: BlockInColumnsType.ColoredText, background: { color: '#000', image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png', diff --git a/src/blocks/ColoredText/schema.ts b/src/blocks/ColoredText/schema.ts index 0afc3950..6a76e507 100644 --- a/src/blocks/ColoredText/schema.ts +++ b/src/blocks/ColoredText/schema.ts @@ -1,6 +1,6 @@ import {validators} from '@gravity-ui/page-constructor'; -import {BlockType} from '../../models/common'; +import {BlockInColumnsType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; const { @@ -25,7 +25,7 @@ const BackgroundProps = { }; export const ColoredText = { - [BlockType.ColoredText]: { + [BlockInColumnsType.ColoredText]: { type: 'object', additionalProperties: false, required: ['text'], diff --git a/src/blocks/Feed/__stories__/Feed.stories.tsx b/src/blocks/Feed/__stories__/Feed.stories.tsx index 7daf84a0..2678cd0a 100644 --- a/src/blocks/Feed/__stories__/Feed.stories.tsx +++ b/src/blocks/Feed/__stories__/Feed.stories.tsx @@ -10,7 +10,7 @@ import {FeedContext} from '../../../contexts/FeedContext'; import {BLOCKS} from '../../../demo/constants'; import {FeedProps} from '../../../models/blocks'; import { - BlockType, + BlockStandsAloneType, GetPostsRequest, GetPostsType, PostsProps, @@ -32,7 +32,7 @@ export default { } as Meta; type FeedModel = { - type: BlockType.Feed; + type: BlockStandsAloneType.Feed; } & FeedProps; const getPosts: GetPostsType = async (query: GetPostsRequest) => { @@ -84,7 +84,7 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.Feed, + type: BlockStandsAloneType.Feed, color: '#000', imageSize: 'm', ...getDefaultStoryArgs(), diff --git a/src/blocks/Feed/schema.ts b/src/blocks/Feed/schema.ts index 1ff3da34..399f9501 100644 --- a/src/blocks/Feed/schema.ts +++ b/src/blocks/Feed/schema.ts @@ -4,10 +4,10 @@ const { common: {TitleProps, BlockBaseProps}, } = validators; -import {BlockType} from '../../models/common'; +import {BlockStandsAloneType} from '../../models/common'; export const Feed = { - [BlockType.Feed]: { + [BlockStandsAloneType.Feed]: { additionalProperties: false, required: [], properties: { diff --git a/src/blocks/Header/__stories__/Header.stories.tsx b/src/blocks/Header/__stories__/Header.stories.tsx index 5895b0b4..257986c8 100644 --- a/src/blocks/Header/__stories__/Header.stories.tsx +++ b/src/blocks/Header/__stories__/Header.stories.tsx @@ -8,7 +8,7 @@ import customBlocks from '../../../constructor/blocksMap'; import {PostPageContext} from '../../../contexts/PostPageContext'; import {BLOCKS} from '../../../demo/constants'; import {HeaderProps} from '../../../models/blocks'; -import {BlockType, PostData} from '../../../models/common'; +import {BlockStandsAloneType, PostData} from '../../../models/common'; import {Header} from '../Header'; import post from '../../../../.mocks/post.json'; @@ -22,7 +22,7 @@ export default { } as Meta; type HeaderModel = { - type: BlockType.Header; + type: BlockStandsAloneType.Header; } & HeaderProps; const DefaultTemplate: Story = (args) => ( @@ -34,6 +34,6 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.Header, + type: BlockStandsAloneType.Header, ...getDefaultStoryArgs(), }; diff --git a/src/blocks/Header/schema.ts b/src/blocks/Header/schema.ts index e75354e7..fcba98ed 100644 --- a/src/blocks/Header/schema.ts +++ b/src/blocks/Header/schema.ts @@ -1,6 +1,6 @@ import {validators} from '@gravity-ui/page-constructor'; -import {BlockType} from '../../models/common'; +import {BlockStandsAloneType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; const { @@ -9,7 +9,7 @@ const { } = validators; export const Header = { - [BlockType.Header]: { + [BlockStandsAloneType.Header]: { type: 'object', additionalProperties: false, properties: { diff --git a/src/blocks/Layout/__stories__/Layout.stories.tsx b/src/blocks/Layout/__stories__/Layout.stories.tsx index 006f3f1a..2d13c95f 100644 --- a/src/blocks/Layout/__stories__/Layout.stories.tsx +++ b/src/blocks/Layout/__stories__/Layout.stories.tsx @@ -8,7 +8,7 @@ import customBlocks from '../../../constructor/blocksMap'; import {PostPageContext} from '../../../contexts/PostPageContext'; import {BLOCKS} from '../../../demo/constants'; import {LayoutProps} from '../../../models/blocks'; -import {BlockType, PostData} from '../../../models/common'; +import {BlockStandsAloneType, PostData} from '../../../models/common'; import {Layout} from '../Layout'; import layoutBlock from '../../../../.mocks/layoutBlock.json'; @@ -23,7 +23,7 @@ export default { } as Meta; type LayoutModel = { - type: BlockType.Layout; + type: BlockStandsAloneType.Layout; } & LayoutProps; const DefaultTemplate: Story = (args) => ( @@ -35,7 +35,7 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.Layout, + type: BlockStandsAloneType.Layout, ...getDefaultStoryArgs(), children: layoutBlock.children, }; diff --git a/src/blocks/Layout/schema.ts b/src/blocks/Layout/schema.ts index 6bcb7437..a04dbf57 100644 --- a/src/blocks/Layout/schema.ts +++ b/src/blocks/Layout/schema.ts @@ -4,11 +4,11 @@ const { common: {BlockBaseProps, ChildrenProps}, } = validators; -import {BlockType} from '../../models/common'; +import {BlockStandsAloneType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; export const Layout = { - [BlockType.Layout]: { + [BlockStandsAloneType.Layout]: { type: 'object', additionalProperties: false, required: ['children'], diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx index 2de3bc13..86ec7beb 100644 --- a/src/blocks/Media/Media.tsx +++ b/src/blocks/Media/Media.tsx @@ -3,7 +3,6 @@ import React from 'react'; import {Media as PCMedia, YFMWrapper} from '@gravity-ui/page-constructor'; import {Wrapper} from '../../components/Wrapper/Wrapper'; -import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {MediaProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -12,44 +11,34 @@ import './Media.scss'; const b = block('media'); -export const Media: React.FC = ({ - text, - paddingTop, - paddingBottom, - column, - ...mediaProps -}) => { - if (!useCanRenderInColumn(column)) { - return null; - } - - return ( - -
- = ({text, paddingTop, paddingBottom, ...mediaProps}) => ( + +
+ +
+ {text && ( +
+
- {text && ( -
- -
- )} - - ); -}; + )} + +); + +export default Media; diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx index d0e57213..e5c6fdbe 100644 --- a/src/blocks/Media/__stories__/Media.stories.tsx +++ b/src/blocks/Media/__stories__/Media.stories.tsx @@ -10,7 +10,7 @@ import { } from '../../../../.mocks/utils'; import {BLOCKS} from '../../../demo/constants'; import {MediaProps} from '../../../models/blocks'; -import {BlockType} from '../../../models/common'; +import {BlockInColumnsType} from '../../../models/common'; import {Media} from '../Media'; export default { @@ -22,7 +22,7 @@ export default { } as Meta; type MediaModel = { - type: BlockType.Media; + type: BlockInColumnsType.Media; } & MediaProps; const DefaultTemplate: Story = (args) => ( @@ -37,6 +37,6 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.Media, + type: BlockInColumnsType.Media, ...getDefaultStoryArgs(), }; diff --git a/src/blocks/Media/schema.ts b/src/blocks/Media/schema.ts index 1f1b2f91..9b02d909 100644 --- a/src/blocks/Media/schema.ts +++ b/src/blocks/Media/schema.ts @@ -1,6 +1,6 @@ import {validators} from '@gravity-ui/page-constructor'; -import {BlockType} from '../../models/common'; +import {BlockInColumnsType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; const { @@ -8,7 +8,7 @@ const { } = validators; export const Media = { - [BlockType.Media]: { + [BlockInColumnsType.Media]: { type: 'object', additionalProperties: false, properties: { diff --git a/src/blocks/Meta/Meta.tsx b/src/blocks/Meta/Meta.tsx index 97523df7..9966f085 100644 --- a/src/blocks/Meta/Meta.tsx +++ b/src/blocks/Meta/Meta.tsx @@ -7,7 +7,6 @@ import {Wrapper} from '../../components/Wrapper/Wrapper'; import {BlogMetrikaGoalIds} from '../../constants'; import {LocaleContext} from '../../contexts/LocaleContext'; import {PostPageContext} from '../../contexts/PostPageContext'; -import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {MetaProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; import {block} from '../../utils/cn'; @@ -33,14 +32,10 @@ const breadcrumbsGoals = [ ]; export const Meta: React.FC = (props) => { - const {paddingTop = 'l', paddingBottom = 'l', theme = 'light', column} = props; + const {paddingTop = 'l', paddingBottom = 'l', theme = 'light'} = props; const {post} = useContext(PostPageContext); const {locale} = useContext(LocaleContext); - if (!useCanRenderInColumn(column)) { - return null; - } - const {title, id, date, readingTime, tags} = post; const breadcrumbs = getBreadcrumbs({tags, pathPrefix: locale?.pathPrefix || ''}); @@ -84,3 +79,5 @@ export const Meta: React.FC = (props) => { ); }; + +export default Meta; diff --git a/src/blocks/Meta/__stories__/Meta.stories.tsx b/src/blocks/Meta/__stories__/Meta.stories.tsx index 4ec2fd1a..c9d6f768 100644 --- a/src/blocks/Meta/__stories__/Meta.stories.tsx +++ b/src/blocks/Meta/__stories__/Meta.stories.tsx @@ -7,7 +7,7 @@ import customBlocks from '../../../constructor/blocksMap'; import {PostPageContext} from '../../../contexts/PostPageContext'; import {BLOCKS} from '../../../demo/constants'; import {MetaProps} from '../../../models/blocks'; -import {BlockType, PostData} from '../../../models/common'; +import {BlockInColumnsType, PostData} from '../../../models/common'; import {Meta as MetaBlock} from '../Meta'; import post from '../../../../.mocks/post.json'; @@ -21,7 +21,7 @@ export default { } as Meta; type MetaModel = { - type: BlockType.Meta; + type: BlockInColumnsType.Meta; } & MetaProps; const DefaultTemplate: Story = (args) => ( @@ -33,7 +33,7 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.Meta, + type: BlockInColumnsType.Meta, paddingBottom: 'l', paddingTop: 'l', }; diff --git a/src/blocks/Meta/schema.ts b/src/blocks/Meta/schema.ts index 860ad999..94bf0c0a 100644 --- a/src/blocks/Meta/schema.ts +++ b/src/blocks/Meta/schema.ts @@ -4,11 +4,11 @@ const { common: {BlockBaseProps}, } = validators; -import {BlockType} from '../../models/common'; +import {BlockInColumnsType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; export const Meta = { - [BlockType.Meta]: { + [BlockInColumnsType.Meta]: { type: 'object', additionalProperties: false, properties: { diff --git a/src/blocks/Suggest/__stories__/Suggest.stories.tsx b/src/blocks/Suggest/__stories__/Suggest.stories.tsx index 52b11ddc..19bfded7 100644 --- a/src/blocks/Suggest/__stories__/Suggest.stories.tsx +++ b/src/blocks/Suggest/__stories__/Suggest.stories.tsx @@ -7,7 +7,7 @@ import customBlocks from '../../../constructor/blocksMap'; import {PostPageContext} from '../../../contexts/PostPageContext'; import {BLOCKS} from '../../../demo/constants'; import {SuggestProps} from '../../../models/blocks'; -import {BlockType} from '../../../models/common'; +import {BlockStandsAloneType} from '../../../models/common'; import {Suggest} from '../Suggest'; import post from '../../../../.mocks/post.json'; @@ -22,7 +22,7 @@ export default { } as Meta; type SuggestModel = { - type: BlockType.Suggest; + type: BlockStandsAloneType.Suggest; } & SuggestProps; const DefaultTemplate: Story = (args) => ( @@ -34,7 +34,7 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.Suggest, + type: BlockStandsAloneType.Suggest, paddingBottom: 'l', paddingTop: 'l', }; diff --git a/src/blocks/Suggest/schema.ts b/src/blocks/Suggest/schema.ts index 305b8a29..f379141f 100644 --- a/src/blocks/Suggest/schema.ts +++ b/src/blocks/Suggest/schema.ts @@ -4,11 +4,11 @@ const { common: {BlockBaseProps}, } = validators; -import {BlockType} from '../../models/common'; +import {BlockStandsAloneType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; export const Suggest = { - [BlockType.Suggest]: { + [BlockStandsAloneType.Suggest]: { type: 'object', additionalProperties: false, properties: { diff --git a/src/blocks/YFM/YFM.tsx b/src/blocks/YFM/YFM.tsx index 134a8afd..450796bc 100644 --- a/src/blocks/YFM/YFM.tsx +++ b/src/blocks/YFM/YFM.tsx @@ -4,18 +4,13 @@ import {YFMWrapper} from '@gravity-ui/page-constructor'; import block from 'bem-cn-lite'; import {Wrapper} from '../../components/Wrapper/Wrapper'; -import {useCanRenderInColumn} from '../../hooks/useCanRenderInColumn'; import {YFMProps} from '../../models/blocks'; import {PaddingsDirections} from '../../models/paddings'; const b = block('yfm'); export const YFM: React.FC = (props) => { - const {text, paddingTop, paddingBottom, column} = props; - - if (!useCanRenderInColumn(column)) { - return null; - } + const {text, paddingTop, paddingBottom} = props; return ( = (props) => { ); }; + +export default YFM; diff --git a/src/blocks/YFM/__stories__/YFM.stories.tsx b/src/blocks/YFM/__stories__/YFM.stories.tsx index 20e847ec..be5cf478 100644 --- a/src/blocks/YFM/__stories__/YFM.stories.tsx +++ b/src/blocks/YFM/__stories__/YFM.stories.tsx @@ -8,7 +8,7 @@ import customBlocks from '../../../constructor/blocksMap'; import {PostPageContext} from '../../../contexts/PostPageContext'; import {BLOCKS} from '../../../demo/constants'; import {YFMProps} from '../../../models/blocks'; -import {BlockType, PostData} from '../../../models/common'; +import {BlockInColumnsType, PostData} from '../../../models/common'; import {YFM} from '../YFM'; import post from '../../../../.mocks/post.json'; @@ -22,7 +22,7 @@ export default { } as Meta; type YFMModel = { - type: BlockType.YFM; + type: BlockInColumnsType.YFM; } & YFMProps; const DefaultTemplate: Story = (args) => ( @@ -34,7 +34,7 @@ const DefaultTemplate: Story = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - type: BlockType.YFM, + type: BlockInColumnsType.YFM, ...getDefaultStoryArgs(), text: '

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

', }; diff --git a/src/blocks/YFM/schema.ts b/src/blocks/YFM/schema.ts index 8ba52dbc..243e45cd 100644 --- a/src/blocks/YFM/schema.ts +++ b/src/blocks/YFM/schema.ts @@ -4,11 +4,11 @@ const { common: {BlockBaseProps}, } = validators; -import {BlockType} from '../../models/common'; +import {BlockInColumnsType} from '../../models/common'; import {BlogBlockBase} from '../../schema/common'; export const YFM = { - [BlockType.YFM]: { + [BlockInColumnsType.YFM]: { type: 'object', additionalProperties: false, required: ['text'], diff --git a/src/constructor/blocksMap.ts b/src/constructor/blocksMap.ts index 91d10e0f..d8bb64f9 100644 --- a/src/constructor/blocksMap.ts +++ b/src/constructor/blocksMap.ts @@ -1,31 +1,28 @@ -import {Author} from '../blocks/Author/Author'; -import {Banner} from '../blocks/Banner/Banner'; -import {CTA} from '../blocks/CTA/CTA'; -import {ColoredText} from '../blocks/ColoredText/ColoredText'; import {Feed} from '../blocks/Feed/Feed'; import {Header} from '../blocks/Header/Header'; import {Layout} from '../blocks/Layout/Layout'; -import {Media} from '../blocks/Media/Media'; -import {Meta} from '../blocks/Meta/Meta'; import {Suggest} from '../blocks/Suggest/Suggest'; -import {YFM} from '../blocks/YFM/YFM'; -import {BlockType} from '../models/common'; +import {withColumnSelection} from '../hocs/withColumnSelection'; +import {BlockInColumnsType, BlockStandsAloneType} from '../models/common'; + +const blocksInColumns = Object.keys(BlockInColumnsType).reduce((blocks, blockType) => { + blocks[BlockInColumnsType[blockType]] = withColumnSelection( + require(`../blocks/${blockType}/${blockType}.tsx`).default, + ); + + return blocks; + // eslint-disable-next-line @typescript-eslint/no-explicit-any +}, {} as Record); const blocks = { - [BlockType.YFM]: YFM, - [BlockType.Layout]: Layout, - [BlockType.Media]: Media, - [BlockType.Banner]: Banner, - [BlockType.CTA]: CTA, - [BlockType.ColoredText]: ColoredText, - [BlockType.Author]: Author, - [BlockType.Suggest]: Suggest, - [BlockType.Meta]: Meta, - [BlockType.Feed]: Feed, + ...blocksInColumns, + [BlockStandsAloneType.Layout]: Layout, + [BlockStandsAloneType.Suggest]: Suggest, + [BlockStandsAloneType.Feed]: Feed, }; const headers = { - [BlockType.Header]: Header, + [BlockStandsAloneType.Header]: Header, }; export default {blocks, headers}; diff --git a/src/data/config.ts b/src/data/config.ts index 9ed923a0..746183cf 100644 --- a/src/data/config.ts +++ b/src/data/config.ts @@ -1,9 +1,13 @@ import {BlockType as PCBlockType} from '@gravity-ui/page-constructor'; import {yfmTransformer} from '@gravity-ui/page-constructor/server'; -import {BlockType} from '../models/common'; +import {BlockInColumnsType, BlockType} from '../models/common'; -const BLOCKS_FOR_TYPOGRAPHY_TRANSFORM = [BlockType.YFM, BlockType.ColoredText, BlockType.Media]; +const BLOCKS_FOR_TYPOGRAPHY_TRANSFORM = [ + BlockInColumnsType.YFM, + BlockInColumnsType.ColoredText, + BlockInColumnsType.Media, +]; type GetConfigForCreateReadableContent = () => { [x in BlockType | PCBlockType]: { diff --git a/src/data/createReadableContent.ts b/src/data/createReadableContent.ts index 61f96660..a4fea7dc 100644 --- a/src/data/createReadableContent.ts +++ b/src/data/createReadableContent.ts @@ -1,5 +1,5 @@ import {Block} from '../models/blocks'; -import {BlockType} from '../models/common'; +import {BlockInColumnsType} from '../models/common'; import {getConfigForCreateReadableContent} from './config'; @@ -37,7 +37,7 @@ export const createReadableContent = ({ innerContent += '\n'; } - if (block.type === BlockType.Author) { + if (block.type === BlockInColumnsType.Author) { authors.push(block.uid); } diff --git a/src/hocs/withColumnSelection.tsx b/src/hocs/withColumnSelection.tsx new file mode 100644 index 00000000..1a59462e --- /dev/null +++ b/src/hocs/withColumnSelection.tsx @@ -0,0 +1,18 @@ +import React, {useContext} from 'react'; + +import {ColumnContext} from '../contexts/ColumnContext'; +import {ColumnProps} from '../index'; + +export const withColumnSelection = (WrappedComponent: React.ElementType) => { + const Component = ({column, ...props}: T & ColumnProps) => { + const renderingColumn = useContext(ColumnContext); + + if (column && column !== renderingColumn) { + return null; + } + + return ; + }; + + return Component; +}; diff --git a/src/hooks/useCanRenderInColumn.ts b/src/hooks/useCanRenderInColumn.ts deleted file mode 100644 index ae237fe7..00000000 --- a/src/hooks/useCanRenderInColumn.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {useContext} from 'react'; - -import {ColumnContext} from '../contexts/ColumnContext'; -import {Column} from '../models/common'; - -export const useCanRenderInColumn = (componentColumn = 'right' as Column) => { - const column = useContext(ColumnContext); - - return componentColumn === column; -}; diff --git a/src/models/blocks.ts b/src/models/blocks.ts index a4367686..aa914b30 100644 --- a/src/models/blocks.ts +++ b/src/models/blocks.ts @@ -7,22 +7,20 @@ import { TextTheme, } from '@gravity-ui/page-constructor'; -import {BlockType, ClassNameProps, ColumnProps, PostData} from './common'; +import {BlockInColumnsType, BlockStandsAloneType, ClassNameProps, PostData} from './common'; import {PaddingsYFMProps} from './paddings'; // blocks props export type AuthorProps = ClassNameProps & { authorId: number; image: string; -} & PaddingsYFMProps & - ColumnProps; +} & PaddingsYFMProps; export type BannerProps = ContentBlockProps & { color?: string; image?: string; imageSize?: 's' | 'm'; -} & PaddingsYFMProps & - ColumnProps; +} & PaddingsYFMProps; export type ColoredTextProps = ContentBlockProps & { background?: { @@ -30,14 +28,12 @@ export type ColoredTextProps = ContentBlockProps & { image?: string; altText?: string; }; -} & PaddingsYFMProps & - ColumnProps; +} & PaddingsYFMProps; export type CTAProps = { items: Array; columnCount?: number; -} & PaddingsYFMProps & - ColumnProps; +} & PaddingsYFMProps; export type HeaderProps = HeaderBlockProps & PaddingsYFMProps; @@ -49,7 +45,6 @@ export type LayoutProps = { export type MediaProps = ClassNameProps & PaddingsYFMProps & - ColumnProps & Partial> & { text?: string; }; @@ -57,8 +52,7 @@ export type MediaProps = ClassNameProps & export type MetaProps = { locale: string; theme?: TextTheme; -} & PaddingsYFMProps & - ColumnProps; +} & PaddingsYFMProps; export type SuggestProps = ClassNameProps & { posts: PostData[]; @@ -66,8 +60,7 @@ export type SuggestProps = ClassNameProps & { export type YFMProps = { text: string; -} & PaddingsYFMProps & - ColumnProps; +} & PaddingsYFMProps; export type FeedProps = { image: string; @@ -75,47 +68,47 @@ export type FeedProps = { // blocks models export type AuthorBlockModel = { - type: BlockType.Author; + type: BlockInColumnsType.Author; } & AuthorProps; export type BannerBlockModel = { - type: BlockType.Banner; + type: BlockInColumnsType.Banner; } & BannerProps; export type ColoredTextBlockModel = { - type: BlockType.ColoredText; + type: BlockInColumnsType.ColoredText; } & ColoredTextProps; export type CTABlockModel = { - type: BlockType.CTA; + type: BlockInColumnsType.CTA; } & CTAProps; export type HeaderBlockModel = { - type: BlockType.Header; + type: BlockStandsAloneType.Header; } & HeaderProps; export type LayoutBlockModel = { - type: BlockType.Layout; + type: BlockStandsAloneType.Layout; } & LayoutProps; export type MediaBlockModel = { - type: BlockType.Media; + type: BlockInColumnsType.Media; } & MediaProps; export type MetaBlockModel = { - type: BlockType.Meta; + type: BlockInColumnsType.Meta; } & MetaProps; export type SuggestBlockModel = { - type: BlockType.Suggest; + type: BlockStandsAloneType.Suggest; } & SuggestProps; export type YFMBlockModel = { - type: BlockType.YFM; + type: BlockInColumnsType.YFM; } & YFMProps; export type FeedBlockModel = { - type: BlockType.Feed; + type: BlockStandsAloneType.Feed; } & FeedProps; export type BlockModel = diff --git a/src/models/common.ts b/src/models/common.ts index a8770a3b..d148a0f6 100644 --- a/src/models/common.ts +++ b/src/models/common.ts @@ -105,20 +105,25 @@ export interface PostData { noIndex?: boolean; } -export enum BlockType { - Header = 'blog-header-block', +export enum BlockInColumnsType { YFM = 'blog-yfm-block', - Layout = 'blog-layout-block', Media = 'blog-media-block', Banner = 'blog-banner-block', CTA = 'blog-cta-block', ColoredText = 'blog-colored-text-block', Author = 'blog-author-block', - Suggest = 'blog-suggest-block', Meta = 'blog-meta-block', +} + +export enum BlockStandsAloneType { + Header = 'blog-header-block', + Layout = 'blog-layout-block', + Suggest = 'blog-suggest-block', Feed = 'blog-feed-block', } +export type BlockType = BlockInColumnsType | BlockStandsAloneType; + export type MetaProps = { metaComponent: JSX.Element; needHelmetWrapper: boolean; diff --git a/src/schema/index.ts b/src/schema/index.ts index cddaaeeb..92b7488b 100644 --- a/src/schema/index.ts +++ b/src/schema/index.ts @@ -1,4 +1,4 @@ -import {BlockType} from '../models/common'; +import {BlockInColumnsType, BlockStandsAloneType} from '../models/common'; import * as blocks from './blocks'; import * as headers from './headers'; @@ -13,18 +13,19 @@ export const validators = { export const schemasForCustom = { headers: { - [BlockType.Header]: Header, + [BlockStandsAloneType.Header]: Header, }, blocks: { - [BlockType.Author]: Author, - [BlockType.Banner]: Banner, - [BlockType.ColoredText]: ColoredText, - [BlockType.CTA]: CTA, - [BlockType.Feed]: Feed, - [BlockType.Layout]: Layout, - [BlockType.Media]: Media, - [BlockType.Meta]: Meta, - [BlockType.Suggest]: Suggest, - [BlockType.YFM]: YFM, + [BlockInColumnsType.Author]: Author, + [BlockInColumnsType.Banner]: Banner, + [BlockInColumnsType.ColoredText]: ColoredText, + [BlockInColumnsType.CTA]: CTA, + [BlockInColumnsType.Media]: Media, + [BlockInColumnsType.Meta]: Meta, + [BlockInColumnsType.YFM]: YFM, + + [BlockStandsAloneType.Feed]: Feed, + [BlockStandsAloneType.Layout]: Layout, + [BlockStandsAloneType.Suggest]: Suggest, }, }; From 1874d0ec8bad74d796a4408f974a69fd084ea033 Mon Sep 17 00:00:00 2001 From: Nik Tverd Date: Thu, 8 Jun 2023 01:32:29 +0600 Subject: [PATCH 3/4] fixup! feat: refactor with hoc --- .storybook/main.ts | 2 ++ src/constructor/blocksMap.ts | 15 ++++++++------- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 01e54d80..230a9c0f 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -30,6 +30,8 @@ const config = { use: [{loader: 'markdown-loader'}], }); + storybookBaseConfig.module.rules[0].exclude = [/node_modules/, /\.test.(tsx?|jsx?)$/]; + // to turn fileName in context.parameters into path form number in production bundle storybookBaseConfig.optimization.moduleIds = 'named'; diff --git a/src/constructor/blocksMap.ts b/src/constructor/blocksMap.ts index d8bb64f9..0caf39bd 100644 --- a/src/constructor/blocksMap.ts +++ b/src/constructor/blocksMap.ts @@ -5,14 +5,15 @@ import {Suggest} from '../blocks/Suggest/Suggest'; import {withColumnSelection} from '../hocs/withColumnSelection'; import {BlockInColumnsType, BlockStandsAloneType} from '../models/common'; -const blocksInColumns = Object.keys(BlockInColumnsType).reduce((blocks, blockType) => { - blocks[BlockInColumnsType[blockType]] = withColumnSelection( - require(`../blocks/${blockType}/${blockType}.tsx`).default, - ); +const blocksInColumns = Object.entries(BlockInColumnsType).reduce( + (blocks, [blockName, blockKey]) => { + const block = require(`../blocks/${blockName}/${blockName}.tsx`).default; + blocks[blockKey] = withColumnSelection(block); - return blocks; - // eslint-disable-next-line @typescript-eslint/no-explicit-any -}, {} as Record); + return blocks; + }, + {} as Record, +); const blocks = { ...blocksInColumns, From 67b054f4d5ba37865c97905be0f90030abe53184 Mon Sep 17 00:00:00 2001 From: Nik Tverd Date: Tue, 13 Jun 2023 14:45:34 +0600 Subject: [PATCH 4/4] fixup! fixup! feat: refactor with hoc --- src/constructor/blocksMap.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constructor/blocksMap.ts b/src/constructor/blocksMap.ts index 0caf39bd..c96a9cfa 100644 --- a/src/constructor/blocksMap.ts +++ b/src/constructor/blocksMap.ts @@ -12,7 +12,7 @@ const blocksInColumns = Object.entries(BlockInColumnsType).reduce( return blocks; }, - {} as Record, + {} as Record, ); const blocks = {