fix: children types

Author: gorgeousvlad

README.md

@@ -131,7 +131,7 @@ type FetchLoadableData<TData = any> = (blockKey: string) => Promise<TData>;
 ```jsx
 import {Grid, Row, Col} from '@gravity-ui/page-constructor/';
 
-const Page: ReactFCC<PageProps> = ({children}) => (
+const Page: WithChildren<PageProps> = ({children}) => (
   <Grid>
     <Row>
       <Col sizes={{lg: 4, sm: 6, all: 12}}>{children}</Col>

src/blocks/Banner/Banner.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
 import {block} from '../../utils';
-import {BannerBlockProps, ReactFCC} from '../../models';
+import {BannerBlockProps} from '../../models';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import {BannerCard} from '../../sub-blocks';
 
 import './Banner.scss';
 
 const b = block('banner-block');
 
-export const BannerBlock: ReactFCC<BannerBlockProps> = (props) => {
+export const BannerBlock = (props: BannerBlockProps) => {
     const {animated, ...bannerProps} = props;
 
     return (

src/blocks/CardLayout/CardLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {block} from '../../utils';
-import {CardLayoutBlockProps as CardLayoutBlockParams, ReactFCC} from '../../models';
+import {CardLayoutBlockProps as CardLayoutBlockParams} from '../../models';
 import {Row, Col} from '../../grid';
 import {BlockHeader, AnimateBlock} from '../../components';
 
@@ -19,13 +19,13 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 
-const CardLayout: ReactFCC<CardLayoutBlockProps> = ({
+const CardLayout = ({
     title,
     description,
     animated,
     colSizes = DEFAULT_SIZES,
     children,
-}) => (
+}: CardLayoutBlockProps) => (
     <AnimateBlock className={b()} animate={animated}>
         <BlockHeader title={title} description={description} />
         <div>

src/blocks/Companies/Companies.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 
 import {block, getThemedValue} from '../../utils';
-import {CompaniesBlockProps, ReactFCC} from '../../models';
+import {CompaniesBlockProps} from '../../models';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import {BREAKPOINTS} from '../../constants';
 import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
@@ -10,7 +10,7 @@ import './Companies.scss';
 
 const b = block('companies-block');
 
-export const CompaniesBlock: ReactFCC<CompaniesBlockProps> = ({title, images, animated}) => {
+export const CompaniesBlock = ({title, images, animated}: CompaniesBlockProps) => {
     const {themeValue: theme} = useContext(ThemeValueContext);
     const themedImages = getThemedValue(images, theme) || {};
     const {desktop, mobile, tablet, alt} = themedImages;

src/blocks/ContentLayout/ContentLayout.tsx

@@ -1,7 +1,7 @@
 import React, {useContext, useMemo} from 'react';
 
 import {block} from '../../utils';
-import {ContentLayoutBlockProps, ContentSize, ContentTextSize, ReactFCC} from '../../models';
+import {ContentLayoutBlockProps, ContentSize, ContentTextSize} from '../../models';
 import {Content} from '../../sub-blocks';
 import {BackgroundImage, FileLink} from '../../components';
 import {Col} from '../../grid';
@@ -33,7 +33,7 @@ function getTextWidth(size: ContentTextSize) {
     }
 }
 
-export const ContentLayoutBlock: ReactFCC<ContentLayoutBlockProps> = (props) => {
+export const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {
     const isMobile = useContext(MobileContext);
     const {textContent, fileContent, properties: cardLayoutProperties = {size: 'l'}} = props;
     const {

src/blocks/ExtendedFeatures/ExtendedFeatures.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {block} from '../../utils';
-import {ExtendedFeaturesProps, ReactFCC} from '../../models';
+import {ExtendedFeaturesProps} from '../../models';
 import {Row, Col} from '../../grid';
 import {Link, HTML, AnimateBlock, BlockHeader} from '../../components/';
 
@@ -15,13 +15,13 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 
-export const ExtendedFeaturesBlock: ReactFCC<ExtendedFeaturesProps> = ({
+export const ExtendedFeaturesBlock = ({
     title,
     description,
     items,
     colSizes = DEFAULT_SIZES,
     animated,
-}) => (
+}: ExtendedFeaturesProps) => (
     <AnimateBlock className={b()} animate={animated}>
         <BlockHeader title={title} description={description} className={b('header')} />
         <div className={b('items')}>

src/blocks/Header/Header.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 
 import {block, getThemedValue} from '../../utils';
-import {ClassNameProps, HeaderBlockBackground, HeaderBlockProps, ReactFCC} from '../../models';
+import {ClassNameProps, HeaderBlockBackground, HeaderBlockProps, WithChildren} from '../../models';
 import {headerHasMediaBackground} from '../../models/guards';
 import {Button, Media, BackgroundMedia, BackgroundImage, RouterLink, HTML} from '../../components';
 import {Grid, Row, Col} from '../../grid';
@@ -21,7 +21,7 @@ interface BackgroundProps {
     background: HeaderBlockBackground;
 }
 
-const Background: ReactFCC<BackgroundProps> = ({background}) => {
+const Background = ({background}: BackgroundProps) => {
     const {url, color, disableCompress, fullWidth, fullWidthMedia} = background;
 
     return headerHasMediaBackground(background) ? (
@@ -44,14 +44,14 @@ interface FullWidthBackgroundProps {
     background: HeaderBlockBackground;
 }
 
-const FullWidthBackground: ReactFCC<FullWidthBackgroundProps> = ({background}) => (
+const FullWidthBackground = ({background}: FullWidthBackgroundProps) => (
     <div
         className={b('background', {['full-width']: true})}
         style={{backgroundColor: background?.color}}
     />
 );
 
-export const HeaderBlock: ReactFCC<HeaderBlockFullProps> = (props) => {
+export const HeaderBlock = (props: WithChildren<HeaderBlockFullProps>) => {
     const {
         title,
         overtitle,

src/blocks/HeaderSlider/HeaderSlider.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import {block} from '../../utils';
 
-import {SliderType, HeaderSliderBlockProps, ReactFCC} from '../../models';
+import {SliderType, HeaderSliderBlockProps} from '../../models';
 import {SliderBlock} from '../index';
 import Header from '../Header/Header';
 import {MobileContext} from '../../context/mobileContext';
@@ -10,7 +10,7 @@ import './HeaderSlider.scss';
 
 const b = block('header-slider-block');
 
-export const HeaderSliderBlock: ReactFCC<HeaderSliderBlockProps> = ({items, arrows, ...props}) => {
+export const HeaderSliderBlock = ({items, arrows, ...props}: HeaderSliderBlockProps) => {
     const isMobile = useContext(MobileContext);
     const showArrows = isMobile ? false : arrows;
 

src/blocks/Icons/Icons.tsx

@@ -1,15 +1,15 @@
 import React, {useContext} from 'react';
 
 import {block, getLinkProps} from '../../utils';
-import {IconsBlockProps, ReactFCC} from '../../models';
+import {IconsBlockProps} from '../../models';
 import {BlockHeader, Image} from '../../components';
 import {LocationContext} from '../../context/locationContext';
 
 import './Icons.scss';
 
 const b = block('icons-block');
 
-const Icons: ReactFCC<IconsBlockProps> = ({title, size = 's', items}) => {
+const Icons = ({title, size = 's', items}: IconsBlockProps) => {
     const {hostname} = useContext(LocationContext);
 
     return (

src/blocks/Info/Info.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 
 import {block, getThemedValue} from '../../utils';
-import {InfoBlockProps, ReactFCC} from '../../models';
+import {InfoBlockProps} from '../../models';
 import {Grid, Row, Col} from '../../grid';
 import Button from '../../components/Button/Button';
 import Link from '../../components/Link/Link';
@@ -11,7 +11,7 @@ import './Info.scss';
 
 const b = block('info-block');
 
-export const InfoBlock: ReactFCC<InfoBlockProps> = (props) => {
+export const InfoBlock = (props: InfoBlockProps) => {
     const {
         backgroundColor,
         theme: textTheme = 'dark',