refactor: replace React.FC with PropsWithChildren (#1194)

* refactor: replace React.FC with PropsWithChildren

* refactor: removed React.PropsWithChildren where no children is relevant

Author: AadeshMndr

README-ru.md

@@ -279,7 +279,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 = ({children}: React.PropsWithChildren<PageProps>) => (
   <Grid>
     <Row>
       <Col sizes={{lg: 4, sm: 6, all: 12}}>{children}</Col>
@@ -295,7 +295,7 @@ const Page: React.FC<PageProps> = ({children}) => (
 ```jsx
 import {Navigation} from '@gravity-ui/page-constructor';
 
-const Page: React.FC<PageProps> = ({data, logo}) => <Navigation data={data} logo={logo} />;
+const Page = ({data, logo}: React.PropsWithChildren<PageProps>) => <Navigation data={data} logo={logo} />;
 ```
 
 ### Блоки

README.md

@@ -288,7 +288,7 @@ Usage example:
 ```jsx
 import {Grid, Row, Col} from '@gravity-ui/page-constructor';
 
-const Page: React.FC<PageProps> = ({children}) => (
+const Page = ({children}: PropsWithChildren<PageProps>) => (
   <Grid>
     <Row>
       <Col sizes={{lg: 4, sm: 6, all: 12}}>{children}</Col>
@@ -304,7 +304,7 @@ Page navigation can also be used separately from the constructor:
 ```jsx
 import {Navigation} from '@gravity-ui/page-constructor';
 
-const Page: React.FC<PageProps> = ({data, logo}) => <Navigation data={data} logo={logo} />;
+const Page= ({data, logo}: React.PropsWithChildren<PageProps>) => <Navigation data={data} logo={logo} />;
 ```
 
 ### Blocks

src/blocks/CardLayout/CardLayout.tsx

@@ -21,7 +21,7 @@ export type CardLayoutBlockProps = React.PropsWithChildren<
 
 const b = block('card-layout-block');
 
-const CardLayout: React.FC<CardLayoutBlockProps> = ({
+const CardLayout = ({
     title,
     description,
     animated,
@@ -30,7 +30,7 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
     className,
     titleClassName,
     background,
-}) => {
+}: CardLayoutBlockProps) => {
     const theme = useTheme();
     const {border, ...backgroundImageProps} = getThemedValue(background || {}, theme);
     return (

src/blocks/FilterBlock/FilterBlock.tsx

@@ -13,7 +13,7 @@ import './FilterBlock.scss';
 
 const b = block('filter-block');
 
-const FilterBlock: React.FC<FilterBlockProps> = ({
+const FilterBlock = ({
     title,
     description,
     tags,
@@ -23,7 +23,7 @@ const FilterBlock: React.FC<FilterBlockProps> = ({
     colSizes,
     centered,
     animated,
-}) => {
+}: FilterBlockProps) => {
     const tabButtons = React.useMemo(() => {
         const allButton: ButtonTabsItemProps | undefined = allTag
             ? {id: null, title: typeof allTag === 'boolean' ? i18n('label-all-tag') : allTag}

src/blocks/Form/Form.tsx

@@ -21,7 +21,7 @@ const b = block('form-block');
 
 const colSizes = {[GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12};
 
-const FormBlock: React.FC<FormBlockProps> = (props) => {
+const FormBlock = (props: FormBlockProps) => {
     const {formData, title, textContent, direction = FormBlockDirection.Center, background} = props;
     const [contentLoaded, setContentLoaded] = React.useState(false);
     const isMobile = React.useContext(MobileContext);

src/blocks/Share/Share.tsx

@@ -18,7 +18,7 @@ import {i18n} from './i18n';
 import './Share.scss';
 
 interface IconsProps {
-    [key: string]: React.FC<React.SVGProps<SVGSVGElement>>;
+    [key: string]: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
 }
 
 const icons: IconsProps = {

src/components/ButtonTabs/ButtonTabs.tsx

@@ -29,7 +29,7 @@ export interface ButtonTabsProps extends QAProps {
     getTabContentElementId?: (tabId: string) => string;
 }
 
-const ButtonTabs: React.FC<ButtonTabsProps> = ({
+const ButtonTabs = ({
     className,
     items,
     activeTab,
@@ -38,7 +38,7 @@ const ButtonTabs: React.FC<ButtonTabsProps> = ({
     qa,
     getTabElementId,
     getTabContentElementId,
-}) => {
+}: ButtonTabsProps) => {
     const activeTabId: string | null = React.useMemo(() => {
         if (activeTab) {
             return activeTab;

src/components/Buttons/Buttons.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import {ButtonProps, ContentSize} from '../../models';
 import {block} from '../../utils';
 import Button from '../Button/Button';
@@ -27,14 +25,7 @@ function getButtonSize(size: ContentSize) {
     }
 }
 
-const Buttons: React.FC<ButtonsProps> = ({
-    className,
-    titleId,
-    buttons,
-    size = 's',
-    qa,
-    buttonQa,
-}) =>
+const Buttons = ({className, titleId, buttons, size = 's', qa, buttonQa}: ButtonsProps) =>
     buttons ? (
         <div className={b({size}, className)} data-qa={qa}>
             {buttons.map((item) => (

src/components/CardBase/CardBase.tsx

@@ -39,9 +39,9 @@ export interface CardFooterBaseProps {
 
 const b = block('card-base-block');
 
-const Header: React.FC<React.PropsWithChildren<CardHeaderBaseProps>> = () => null;
-const Content: React.FC<React.PropsWithChildren<{}>> = () => null;
-const Footer: React.FC<React.PropsWithChildren<CardFooterBaseProps>> = () => null;
+const Header: (props: React.PropsWithChildren<CardHeaderBaseProps>) => React.ReactNode = () => null;
+const Content: (props: React.PropsWithChildren<{}>) => React.ReactNode = () => null;
+const Footer: (props: React.PropsWithChildren<CardFooterBaseProps>) => React.ReactNode = () => null;
 
 export const Layout = (props: CardBasePropsType) => {
     const {

src/components/InnerForm/InnerForm.tsx

@@ -17,7 +17,7 @@ interface InnerFormProps {
     className?: string;
 }
 
-const InnerForm: React.FC<InnerFormProps> = (props) => {
+const InnerForm = (props: InnerFormProps) => {
     const {formData, onContentLoad, className} = props;
     const formsConfig = React.useContext(FormsContext);
     const theme = useTheme();