feat(modal): add atoms imports (#1474)

* feat: add atoms imports;

* feat(modal): add atom imports;

.changeset/cyan-drinks-turn.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-modal': minor
+---
+
+Добавлены атомарные импорты

packages/modal/src/Component.responsive.tsx

@@ -38,3 +38,11 @@ export const ModalResponsive = Object.assign(ModalResponsiveComponent, {
 });
 
 ModalResponsiveComponent.displayName = 'ModalResponsiveComponent';
+
+export {
+    ModalResponsiveComponent as ModalComponentResponsive,
+    Header as HeaderResponsive,
+    Content as ContentResponsive,
+    Footer as FooterResponsive,
+    Controls as ControlsResponsive,
+};

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

@@ -11,9 +11,20 @@ const ModalDesktopComponent = forwardRef<HTMLDivElement, ModalDesktopProps>((pro
     <Modal {...props} ref={ref} view='desktop' />
 ));
 
+const HeaderDesktop = Header as React.FC<Omit<HeaderProps, 'titleSize' | 'subtitle'>>;
+const ControlsDesktop = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;
+
 export const ModalDesktop = Object.assign(ModalDesktopComponent, {
     Content,
-    Header: Header as React.FC<Omit<HeaderProps, 'titleSize' | 'subtitle'>>,
+    Header: HeaderDesktop,
     Footer,
-    Controls: Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>,
+    Controls: ControlsDesktop,
 });
+
+export {
+    ModalDesktopComponent as ModalComponentDesktop,
+    Content as ContentDesktop,
+    HeaderDesktop,
+    Footer as FooterDesktop,
+    ControlsDesktop,
+};

packages/modal/src/desktop/index.ts

@@ -1,2 +1,2 @@
 export * from './Component.desktop';
-export { ModalDesktopProps } from '../typings';
+export { type ModalDesktopProps } from '../typings';

packages/modal/src/docs/description.mdx

@@ -4,6 +4,8 @@ Modal построен как Compound Components. Состоит из Header, C
 Чтобы во время скролла заголовок и кнопки оставались неподвижны, их нужно расположить в `header` и `footer`.
 Текст и изображения всегда располагаются в `content` части.
 
+Также есть атомарные импорты.
+
 ```jsx live mobileHeight={640}
 const Header = () => {
     const { setHasHeader } = React.useContext(ModalContext);

packages/modal/src/docs/development.mdx

@@ -7,13 +7,23 @@ import vars from '!!raw-loader!../vars.css';
 ## Подключение
 
 ```jsx
+// Компаунд импорты
 import { Modal } from '@alfalab/core-components/modal';
 import { ModalDesktop } from '@alfalab/core-components/modal/desktop';
 import { ModalMobile } from '@alfalab/core-components/modal/mobile';
 
+// Контекст
 import { ModalContext } from '@alfalab/core-components/modal/shared';
+
+// Атомарные импорты
+import { ModalComponentDesktop, ContentDesktop, HeaderDesktop, FooterDesktop, ControlsDesktop } from '@alfalab/core-components/modal/desktop';
+import { ModalComponentMobile, ContentMobile, HeaderMobile, FooterMobile, ControlsMobile } from '@alfalab/core-components/modal/mobile';
+import { ModalComponentResponsive, ContentResponsive, HeaderResponsive, FooterResponsive, ControlsResponsive } from '@alfalab/core-components/modal';
+
 ```
 
+Импорт Modal - респонсивный компаунд
+
 ## Использование контекста
 
 Компонент модального окна предоставляет доступ к контексту, что позволяет гибко настраивать и расширять компонент, а также упрощает использование.
@@ -43,8 +53,8 @@ export type ModalContext = {
 
 ## Использование dataTestId
 
-В компоненте используются модификаторы для `dataTestId`.  
-Для удобного поиска элементов можно воспользоваться функцией `getModalTestIds`.  
+В компоненте используются модификаторы для `dataTestId`.
+Для удобного поиска элементов можно воспользоваться функцией `getModalTestIds`.
 Импорт из `@alfalab/core-components/modal/shared`.
 
 Функция возвращает объект:

packages/modal/src/index.ts

@@ -1,2 +1,2 @@
 export { ModalResponsive as Modal } from './Component.responsive';
-export { ModalResponsiveProps as ModalProps } from './typings';
+export { type ModalResponsiveProps as ModalProps } from './typings';

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

@@ -11,9 +11,19 @@ const ModalMobileComponent = forwardRef<HTMLDivElement, ModalMobileProps>((props
     <Modal {...props} ref={ref} view='mobile' />
 ));
 
+const ControlsMobile = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;
+
 export const ModalMobile = Object.assign(ModalMobileComponent, {
     Content,
     Header,
     Footer,
-    Controls: Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>,
+    Controls: ControlsMobile,
 });
+
+export {
+    ModalMobileComponent as ModalComponentMobile,
+    Content as ContentMobile,
+    Header as HeaderMobile,
+    Footer as FooterMobile,
+    ControlsMobile,
+};

packages/modal/src/mobile/index.ts

@@ -1,2 +1,2 @@
 export * from './Component.mobile';
-export { ModalMobileProps } from '../typings';
+export { type ModalMobileProps } from '../typings';