feat: add React Server Components ('use client') support

package.json

@@ -29,6 +29,51 @@
       "require": "./server/index.js",
       "import": "./server/index.js"
     },
+    "./models": {
+      "types": "./build/esm/models/index.d.ts",
+      "require": "./build/cjs/models/index.js",
+      "import": "./build/esm/models/index.js"
+    },
+    "./utils": {
+      "types": "./build/esm/utils/index.d.ts",
+      "require": "./build/cjs/utils/index.js",
+      "import": "./build/esm/utils/index.js"
+    },
+    "./grid": {
+      "types": "./build/esm/grid/index.d.ts",
+      "require": "./build/cjs/grid/index.js",
+      "import": "./build/esm/grid/index.js"
+    },
+    "./grid/*": {
+      "types": "./build/esm/grid/*.d.ts",
+      "require": "./build/cjs/grid/*.js",
+      "import": "./build/esm/grid/*.js"
+    },
+    "./components": {
+      "types": "./build/esm/components/index.d.ts",
+      "require": "./build/cjs/components/index.js",
+      "import": "./build/esm/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/esm/components/*.d.ts",
+      "require": "./build/cjs/components/*.js",
+      "import": "./build/esm/components/*.js"
+    },
+    "./sub-blocks/*": {
+      "types": "./build/esm/sub-blocks/*.d.ts",
+      "require": "./build/cjs/sub-blocks/*.js",
+      "import": "./build/esm/sub-blocks/*.js"
+    },
+    "./blocks/*": {
+      "types": "./build/esm/blocks/*.d.ts",
+      "require": "./build/cjs/blocks/*.js",
+      "import": "./build/esm/blocks/*.js"
+    },
+    "./navigation/*": {
+      "types": "./build/esm/navigation/*.d.ts",
+      "require": "./build/cjs/navigation/*.js",
+      "import": "./build/esm/navigation/*.js"
+    },
     "./styles/*": "./styles/*",
     "./widget/*": "./widget/*",
     "./schema/*": "./schema/*"
@@ -46,6 +91,18 @@
       ],
       "server": [
         "./server/index.d.ts"
+      ],
+      "models": [
+        "./build/esm/models/index.d.ts"
+      ],
+      "utils": [
+        "./build/esm/utils/index.d.ts"
+      ],
+      "grid": [
+        "./build/esm/grid/index.d.ts"
+      ],
+      "components": [
+        "./build/esm/components/index.d.ts"
       ]
     }
   },

src/blocks/Banner/Banner.tsx

@@ -1,6 +1,6 @@
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import {BannerBlockProps} from '../../models';
-import {BannerCard} from '../../sub-blocks';
+import BannerCard from '../../sub-blocks/BannerCard/BannerCard';
 import {block} from '../../utils';
 
 import './Banner.scss';

src/blocks/CardLayout/CardLayout.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
-import {AnimateBlock, BackgroundImage, Title} from '../../components';
+import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
+import BackgroundImage from '../../components/BackgroundImage/BackgroundImage';
+import Title from '../../components/Title/Title';
 import {useTheme} from '../../context/theme';
 import {Col, GridColumnSizesType, GridJustifyContent, Row} from '../../grid';
 import {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models';

src/blocks/Companies/Companies.tsx

@@ -1,5 +1,6 @@
-import {Image, Title} from '../../components';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
+import Image from '../../components/Image/Image';
+import Title from '../../components/Title/Title';
 import {useTheme} from '../../context/theme';
 import {CompaniesBlockProps} from '../../models';
 import {block, getThemedValue} from '../../utils';

src/blocks/ContentLayout/ContentLayout.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {BackgroundImage, FileLink} from '../../components';

src/blocks/ExtendedFeatures/ExtendedFeatures.tsx

@@ -1,10 +1,12 @@
-import {AnimateBlock, Title, YFMWrapper} from '../../components/';
+import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import Image from '../../components/Image/Image';
 import {getMediaImage} from '../../components/Media/Image/utils';
+import Title from '../../components/Title/Title';
+import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import {useTheme} from '../../context/theme';
 import {Col, Row} from '../../grid';
 import {ExtendedFeaturesProps} from '../../models';
-import {Content} from '../../sub-blocks';
+import Content from '../../sub-blocks/Content/Content';
 import {block, getThemedValue} from '../../utils';
 
 import './ExtendedFeatures.scss';

src/blocks/FilterBlock/FilterBlock.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {CardLayoutBlock} from '..';

src/blocks/FoldableList/FoldableList.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Col, Row} from '../../grid';

src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {useActionHandlers} from '@gravity-ui/uikit';
 
 import {Foldable, ToggleArrow, YFMWrapper} from '../../../components';

src/blocks/Footer/Footer.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import {Link} from '@gravity-ui/uikit';
 
-import {BrandFooter, Image} from '../../components';
+import BrandFooter from '../../components/BrandFooter/BrandFooter';
+import Image from '../../components/Image/Image';
 import {useTheme} from '../../context/theme';
 import {Col, Grid, Row} from '../../grid';
 import {ClassNameProps, FooterBlockProps} from '../../models';

src/blocks/Footer/components/CopyrightFloor/CopyrightFloor.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {DropdownMenu, DropdownMenuItem, Link, useResizeObserver} from '@gravity-ui/uikit';

src/blocks/Footer/components/DisclaimerFloor/DisclaimerFloor.tsx

@@ -1,4 +1,4 @@
-import {YFMWrapper} from '../../../../components';
+import YFMWrapper from '../../../../components/YFMWrapper/YFMWrapper';
 import {Col} from '../../../../grid';
 import {FooterBlockProps} from '../../../../models';
 import {block} from '../../../../utils';

src/blocks/Footer/components/LangSwitcher/LangSwitcher.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {InnerContext} from '../../../../context/innerContext';

src/blocks/Footer/components/NavigationFloor/NavigationFloor.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Link} from '@gravity-ui/uikit';

src/blocks/Footer/components/SocialFloor/SocialFloor.tsx

@@ -1,6 +1,6 @@
 import {Flex, Link, Tooltip} from '@gravity-ui/uikit';
 
-import {Image} from '../../../../components';
+import Image from '../../../../components/Image/Image';
 import {useTheme} from '../../../../context/theme';
 import {Col} from '../../../../grid';
 import type {FooterBlockProps, FooterContactItem} from '../../../../models';

src/blocks/Footer/hooks/useOverflowListItems.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {DropdownMenuItem, useResizeObserver} from '@gravity-ui/uikit';

src/blocks/Form/Form.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {BackgroundImage, Title} from '../../components';

src/blocks/Header/Header.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable complexity */
 import * as React from 'react';
 

src/blocks/Hero/Hero.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {HeaderBreadcrumbs, Media, YFMWrapper} from '../../components';

src/blocks/Hero/hooks.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import throttle from 'lodash/throttle';

src/blocks/Icons/Icons.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Image, Title} from '../../components';

src/blocks/Media/Media.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import Media from '../../components/Media/Media';

src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {useActionHandlers} from '@gravity-ui/uikit';
 
 import {Foldable, ToggleArrow, YFMWrapper} from '../../../components';

src/blocks/Questions/Questions.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Col, Row} from '../../grid';

src/blocks/Share/Share.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Button, Icon} from '@gravity-ui/uikit';

src/blocks/Slider/Arrow/Arrow.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
 import {ClassNameProps} from '../../../models';
 import {block} from '../../../utils';

src/blocks/Slider/Slider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import 'swiper/css';

src/blocks/Slider/useSlider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import type {Swiper} from 'swiper';

src/blocks/SliderOld/Arrow/Arrow.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
 import {ClassNameProps} from '../../../models';
 import {block} from '../../../utils';

src/blocks/SliderOld/SliderOld.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';

src/blocks/Table/Table.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Table, YFMWrapper} from '../../components';

src/blocks/Tabs/TabContent/TabContent.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';

src/blocks/Tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {getUniqId} from '@gravity-ui/uikit';

src/blocks/Tabs/TabsTextContent/TabsTextContent.tsx

@@ -1,6 +1,6 @@
 import {Col} from '../../../grid';
 import {ImageDeviceProps, ImageObjectProps, TabsBlockItem, TabsBlockProps} from '../../../models';
-import {Content} from '../../../sub-blocks';
+import Content from '../../../sub-blocks/Content/Content';
 import {block} from '../../../utils';
 
 import './TabsTextContent.scss';

src/components/AnimateBlock/AnimateBlock.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Waypoint} from 'react-waypoint';

src/components/Author/Author.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 
 import {AuthorProps, AuthorType, ImageProps} from '../../models';
 import {block} from '../../utils';
+import Image from '../Image/Image';
 import {getMediaImage} from '../Media/Image/utils';
-import {Image} from '../index';
 
 import './Author.scss';
 

src/components/BackLink/BackLink.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {ArrowLeft} from '@gravity-ui/icons';

src/components/BalancedMasonry/BalancedMasonry.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import debounce from 'lodash/debounce';

src/components/Button/Button.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {StoreBadge} from '@gravity-ui/components';

src/components/ButtonTabs/ButtonTabs.tsx

@@ -1,10 +1,12 @@
+'use client';
+
 import * as React from 'react';
 
 import {ButtonSize} from '@gravity-ui/uikit';
 
 import {AnalyticsEventsProp, ButtonProps, QAProps} from '../../models';
 import {block} from '../../utils';
-import {Button} from '../index';
+import Button from '../Button/Button';
 
 import './ButtonTabs.scss';
 

src/components/CardBase/CardBase.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Link} from '@gravity-ui/uikit';

src/components/Control/Control.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {Icon, IconData} from '@gravity-ui/uikit';
 
 import {block} from '../../utils';

src/components/DefaultVideo/DefaultVideo.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';

src/components/ErrorWrapper/ErrorWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Button} from '@gravity-ui/uikit';

src/components/FileLink/FileLink.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {Label, LabelProps} from '@gravity-ui/uikit';

src/components/Foldable/Foldable.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import useHeightCalculator from '../../hooks/useHeightCalculator';

src/components/FullWidthBackground/FullWidthBackground.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import debounce from 'lodash/debounce';

src/components/FullscreenImage/FullscreenImage.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons';

src/components/FullscreenMedia/FullscreenMedia.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons';