Merge pull request #12 from gravity-ui/add-react-18-types-support

feat: add react 18 types supporting

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: React.FC<PageProps> = ({children}) => (
+const Page: WithChildren<PageProps> = ({children}) => (
   <Grid>
     <Row>
       <Col sizes={{lg: 4, sm: 6, all: 12}}>{children}</Col>

src/blocks/Banner/Banner.tsx

@@ -9,7 +9,7 @@ import './Banner.scss';
 
 const b = block('banner-block');
 
-export const BannerBlock: React.FC<BannerBlockProps> = (props) => {
+export const BannerBlock = (props: BannerBlockProps) => {
     const {animated, ...bannerProps} = props;
 
     return (

src/blocks/CardLayout/CardLayout.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 
 import {block} from '../../utils';
-import {CardLayoutBlockProps} from '../../models';
+import {CardLayoutBlockProps as CardLayoutBlockParams} from '../../models';
 import {Row, Col} from '../../grid';
 import {BlockHeader, AnimateBlock} from '../../components';
 
 import './CardLayout.scss';
 
+export interface CardLayoutBlockProps extends Omit<CardLayoutBlockParams, 'children'> {
+    children?: React.ReactNode;
+}
+
 const b = block('card-layout-block');
 
 const DEFAULT_SIZES = {
@@ -15,13 +19,13 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 
-const CardLayout: React.FC<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

@@ -10,7 +10,7 @@ import './Companies.scss';
 
 const b = block('companies-block');
 
-export const CompaniesBlock: React.FC<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

@@ -33,7 +33,7 @@ function getTextWidth(size: ContentTextSize) {
     }
 }
 
-export const ContentLayoutBlock: React.FC<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

@@ -15,13 +15,13 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 
-export const ExtendedFeaturesBlock: React.FunctionComponent<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} 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: React.FC<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: React.FC<FullWidthBackgroundProps> = ({background}) => (
+const FullWidthBackground = ({background}: FullWidthBackgroundProps) => (
     <div
         className={b('background', {['full-width']: true})}
         style={{backgroundColor: background?.color}}
     />
 );
 
-export const HeaderBlock: React.FunctionComponent<HeaderBlockFullProps> = (props) => {
+export const HeaderBlock = (props: WithChildren<HeaderBlockFullProps>) => {
     const {
         title,
         overtitle,

src/blocks/HeaderSlider/HeaderSlider.tsx

@@ -10,11 +10,7 @@ import './HeaderSlider.scss';
 
 const b = block('header-slider-block');
 
-export const HeaderSliderBlock: React.FunctionComponent<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

@@ -9,7 +9,7 @@ import './Icons.scss';
 
 const b = block('icons-block');
 
-const Icons: React.FC<IconsBlockProps> = ({title, size = 's', items}) => {
+const Icons = ({title, size = 's', items}: IconsBlockProps) => {
     const {hostname} = useContext(LocationContext);
 
     return (

src/blocks/Info/Info.tsx

@@ -11,7 +11,7 @@ import './Info.scss';
 
 const b = block('info-block');
 
-export const InfoBlock: React.FC<InfoBlockProps> = (props) => {
+export const InfoBlock = (props: InfoBlockProps) => {
     const {
         backgroundColor,
         theme: textTheme = 'dark',