feat: universal modal content atom export refactor

packages/universal-modal/src/Component.responsive.tsx

@@ -8,6 +8,7 @@ import { createResponsive } from './utils/createResponsive';
 import { UniversalModalDesktop } from './desktop';
 import { UniversalModalMobile } from './mobile';
 import { UniversalModalResponsiveProps } from './typings';
+import { ContentResponsive } from './components/content';
 
 export const UniversalModal = forwardRef<HTMLDivElement, UniversalModalResponsiveProps>(
     ({ children, breakpoint, defaultMatchMediaValue, dataTestId, ...restProps }, ref) => {
@@ -25,9 +26,9 @@ export const UniversalModal = forwardRef<HTMLDivElement, UniversalModalResponsiv
 
 export const UniversalModalResponsive = Object.assign(UniversalModal, {
     Header: HeaderResponsive,
-    Controls,
-    Content: createResponsive(UniversalModalDesktop.Content, UniversalModalMobile.Content),
+    Content: ContentResponsive,
     Footer: createResponsive(UniversalModalDesktop.Footer, UniversalModalMobile.Footer),
+    Controls,
 });
 
 UniversalModalResponsive.displayName = 'UniversalModalResponsive';

packages/universal-modal/src/components/content/Component.desktop.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import cn from 'classnames';
 
-import { Content, ContentProps } from './Component';
+import { BaseContent, ContentProps } from './base-content';
 
 export type ContentDesktopProps = ContentProps & {
     /**
@@ -11,5 +11,5 @@ export type ContentDesktopProps = ContentProps & {
 };
 
 export const ContentDesktop: FC<ContentDesktopProps> = ({ className, ...restProps }) => (
-    <Content className={cn(className)} {...restProps} />
+    <BaseContent className={cn(className)} {...restProps} />
 );

packages/universal-modal/src/components/content/Component.mobile.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import cn from 'classnames';
 
-import { Content, ContentProps } from './Component';
+import { BaseContent, ContentProps } from './base-content';
 
 import styles from './mobile.module.css';
 
 export type ContentMobileProps = ContentProps;
 
 export const ContentMobile: FC<ContentMobileProps> = ({ className, ...restProps }) => (
-    <Content className={cn(styles.content, styles.withFooter, className)} {...restProps} />
+    <BaseContent className={cn(styles.content, styles.withFooter, className)} {...restProps} />
 );

packages/universal-modal/src/components/content/Component.responsive.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { useIsDesktop } from '@alfalab/core-components-mq';
+
+import type { ContentDesktopProps, ContentMobileProps } from '.';
+import { ContentDesktop, ContentMobile } from '.';
+
+export type ContentResponsiveProps = ContentDesktopProps | ContentMobileProps;
+
+export const ContentResponsive: FC<ContentResponsiveProps> = ({ ...restProps }) => {
+    const isDesktop = useIsDesktop();
+
+    if (isDesktop) {
+        return <ContentDesktop {...restProps} />;
+    }
+
+    return <ContentMobile {...restProps} />;
+};

packages/universal-modal/src/components/content/Component.tsx → packages/universal-modal/src/components/content/base-content.tsx

@@ -22,7 +22,7 @@ export type ContentProps = {
     dataTestId?: string;
 };
 
-export const Content: FC<ContentProps> = ({ children, className, dataTestId }) => {
+export const BaseContent: FC<ContentProps> = ({ children, className, dataTestId }) => {
     const { contentRef, hasHeader, hasFooter } = useContext(ModalContext);
 
     return (

packages/universal-modal/src/components/content/index.ts

@@ -1,3 +1,6 @@
+export { ContentResponsive } from './Component.responsive';
+export type { ContentResponsiveProps } from './Component.responsive';
+
 export { ContentDesktop } from './Component.desktop';
 export type { ContentDesktopProps } from './Component.desktop';
 

packages/universal-modal/src/components/header/Component.responsive.tsx

@@ -2,17 +2,17 @@ import React, { FC } from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
-import type { HeaderPropsMobile } from '.';
-import { HeaderDesktop, HeaderMobile, HeaderPropsDesktop } from '.';
+import type { HeaderPropsDesktop, HeaderPropsMobile } from '.';
+import { HeaderDesktop, HeaderMobile } from '.';
 
 export type HeaderResponsiveProps = HeaderPropsDesktop | HeaderPropsMobile;
 
-export const HeaderResponsive: FC<HeaderResponsiveProps> = ({ children, ...restProps }) => {
+export const HeaderResponsive: FC<HeaderResponsiveProps> = ({ ...restProps }) => {
     const isDesktop = useIsDesktop();
 
     if (isDesktop) {
-        return <HeaderDesktop {...restProps}>{children}</HeaderDesktop>;
+        return <HeaderDesktop {...restProps} />;
     }
 
-    return <HeaderMobile {...restProps}>{children}</HeaderMobile>;
+    return <HeaderMobile {...restProps} />;
 };

packages/universal-modal/src/desktop/Component.desktop.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useState } from 'react';
 
-import { ContentDesktop as Content } from '../components/content/Component.desktop';
+import { ContentDesktop } from '../components/content/Component.desktop';
 import { Controls, ControlsProps } from '../components/controls';
 import { FooterDesktop as Footer } from '../components/footer/Component.desktop';
 import { HeaderDesktop } from '../components/header';
@@ -37,9 +37,9 @@ export const UniversalModalDesktopComponent = forwardRef<
         if (horizontalAlign === 'center') {
             return (
                 <ModalByCenter
+                    {...restProps}
                     horizontalAlign={horizontalAlign}
                     dataTestId={dataTestId}
-                    {...restProps}
                     ref={ref}
                 >
                     {children}
@@ -49,9 +49,9 @@ export const UniversalModalDesktopComponent = forwardRef<
 
         return (
             <ModalBySide
+                {...restProps}
                 horizontalAlign={horizontalAlign}
                 dataTestId={dataTestId}
-                {...restProps}
                 ref={ref}
             >
                 {children}
@@ -67,8 +67,8 @@ export const UniversalModalDesktopComponent = forwardRef<
 });
 
 export const UniversalModalDesktop = Object.assign(UniversalModalDesktopComponent, {
-    Content,
     Header: HeaderDesktop,
+    Content: ContentDesktop,
     Footer,
     Controls: Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>,
 });

packages/universal-modal/src/docs/development.mdx

@@ -45,8 +45,8 @@ import { ArrowButtonDesktopMobile, CrossButtonDesktopMobile } from '@alfalab/cor
 ## Атомарный импорт внутренних компонентов
 
 ```jsx
-import { ContentDesktop, ContentMobile } from '@alfalab/core-components/universal-modal';
-import type { ContentDesktopProps, ContentMobileProps } from '@alfalab/core-components/universal-modal';
+import { ContentResponsive, ContentDesktop, ContentMobile } from '@alfalab/core-components/universal-modal';
+import type { ContentResponsiveProps, ContentDesktopProps, ContentMobileProps } from '@alfalab/core-components/universal-modal';
 
 import { Controls } from '@alfalab/core-components/universal-modal';
 import type { ControlsProps } from '@alfalab/core-components/universal-modal';

packages/universal-modal/src/mobile/Component.mobile.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 import { BaseModal } from '@alfalab/core-components-base-modal';
 
-import { ContentMobile as Content } from '../components/content/Component.mobile';
+import { ContentMobile } from '../components/content/Component.mobile';
 import { Controls, ControlsProps } from '../components/controls';
 import { FooterMobile as Footer } from '../components/footer/Component.mobile';
 import { HeaderMobile } from '../components/header';
@@ -55,8 +55,8 @@ export const UniversalModalMobileComponent = forwardRef<HTMLDivElement, Universa
 );
 
 export const UniversalModalMobile = Object.assign(UniversalModalMobileComponent, {
-    Content,
     Header: HeaderMobile,
+    Content: ContentMobile,
     Footer,
     Controls: Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>,
 });