feat: system-message: inner Title split d/m

.changeset/young-rivers-develop.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-system-message': minor
+---
+
+Мелкий рефакторинг внутренних компонентов: сделан более сплит

packages/system-message/src/Components.responsive.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
+import { Title } from './components/title';
 import { SystemMessage } from './Component';
 import type { SystemMessageResponsiveProps } from './types';
 import { createCompound } from './utils';
@@ -22,4 +23,4 @@ const SystemMessageResponsiveComponent: React.FC<SystemMessageResponsiveProps> =
     );
 };
 
-export const SystemMessageResponsive = createCompound(SystemMessageResponsiveComponent);
+export const SystemMessageResponsive = createCompound(SystemMessageResponsiveComponent, { Title });

packages/system-message/src/Context.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { createContext } from 'react';
 
 import type { TSystemMessageContext } from './types';
 
-export const SystemMessageContext = React.createContext<TSystemMessageContext>({
+export const SystemMessageContext = createContext<TSystemMessageContext>({
     view: 'desktop',
 });

packages/system-message/src/components/title/Component.responsive.tsx

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+
+import { SystemMessageContext } from '../../Context';
+
+import { TitleDesktop } from './desktop/Component.desktop';
+import { TitleMobile } from './mobile/Component.mobile';
+import { type TitleProps } from './Component';
+
+export const TitleResponsive = ({ children, ...props }: TitleProps) => {
+    const { view } = useContext(SystemMessageContext);
+
+    const Title = view === 'desktop' ? TitleDesktop : TitleMobile;
+
+    return <Title {...props}>{children}</Title>;
+};

packages/system-message/src/components/title/Component.tsx

@@ -6,11 +6,12 @@ import { createPaddingStyle, getDataTestId } from '@alfalab/core-components-shar
 import { PaddingType } from '../../../../types';
 import { SystemMessageContext } from '../../Context';
 
-import desktopStyles from './desktop.module.css';
+import type desktopStyles from './desktop/desktop.module.css';
+import type mobileStyles from './mobile/mobile.module.css';
+
 import styles from './index.module.css';
-import mobileStyles from './mobile.module.css';
 
-type TitleProps = {
+export type TitleProps = {
     /**
      * Дополнительно имя класса
      */
@@ -33,27 +34,34 @@ type TitleProps = {
     padding?: PaddingType;
 };
 
-const DEFAULT_DESKTOP_PADDING = { bottom: 16 };
-const DEFAULT_MOBILE_PADDING = { bottom: 12 };
+type TitlePropsPrivate = {
+    /**
+     * Стили под д/м
+     */
+    stylesView: typeof desktopStyles | typeof mobileStyles;
+
+    /**
+     * Отступы под д/м
+     */
+    defaultPadding: Record<string, unknown>;
+};
 
-export const Title: React.FC<TitleProps> = ({
+export const Title: React.FC<TitleProps & TitlePropsPrivate> = ({
     tag = 'h3',
     className,
     children,
     padding: paddingProp,
+    stylesView,
+    defaultPadding,
 }) => {
-    const { dataTestId, view } = useContext(SystemMessageContext);
-    const padding =
-        paddingProp ?? (view === 'mobile' ? DEFAULT_MOBILE_PADDING : DEFAULT_DESKTOP_PADDING);
+    const { dataTestId } = useContext(SystemMessageContext);
+    const padding = paddingProp ?? defaultPadding;
 
     const Component = tag;
 
     return (
         <Component
-            className={cn(styles.component, className, {
-                [desktopStyles.component]: view === 'desktop',
-                [mobileStyles.component]: view === 'mobile',
-            })}
+            className={cn(styles.component, className, stylesView.component)}
             data-test-id={getDataTestId(dataTestId, 'title')}
             style={createPaddingStyle(padding)}
         >

packages/system-message/src/components/title/desktop/Component.desktop.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { type TitleProps, Title } from '../Component';
+
+import styles from './desktop.module.css';
+
+const DEFAULT_PADDING = { bottom: 16 };
+
+export const TitleDesktop = ({ children, ...props }: TitleProps) => (
+    <Title stylesView={styles} defaultPadding={DEFAULT_PADDING} {...props}>
+        {children}
+    </Title>
+);

packages/system-message/src/components/title/desktop.module.css → packages/system-message/src/components/title/desktop/desktop.module.css

@@ -1,4 +1,4 @@
-@import '../../../../vars/src/index.css';
+@import '../../../../../vars/src/index.css';
 
 :root {
     --sys-message-desktop-title-font-size: 22px;

packages/system-message/src/components/title/index.ts

@@ -1 +1,4 @@
-export * from './Component';
+export * from './desktop/Component.desktop';
+export * from './mobile/Component.mobile';
+export { TitleResponsive as Title } from './Component.responsive';
+export { type TitleProps } from './Component';

packages/system-message/src/components/title/mobile/Component.mobile.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { type TitleProps, Title } from '../Component';
+
+import styles from './mobile.module.css';
+
+const DEFAULT_PADDING = { bottom: 12 };
+
+export const TitleMobile = ({ children, ...props }: TitleProps) => (
+    <Title stylesView={styles} defaultPadding={DEFAULT_PADDING} {...props}>
+        {children}
+    </Title>
+);

packages/system-message/src/components/title/mobile.module.css → packages/system-message/src/components/title/mobile/mobile.module.css

@@ -1,4 +1,4 @@
-@import '../../../../vars/src/index.css';
+@import '../../../../../vars/src/index.css';
 
 :root {
     --sys-message-mobile-title-font-size: 20px;

packages/system-message/src/desktop/Component.desktop.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { SystemMessage } from '../Component';
+import { TitleDesktop } from '../components/title';
 import type { SystemMessageDesktopProps } from '../types';
 import { createCompound } from '../utils';
 
@@ -13,4 +14,6 @@ const SystemMessageDesktopComponent: React.FC<SystemMessageDesktopProps> = ({
     </SystemMessage>
 );
 
-export const SystemMessageDesktop = createCompound(SystemMessageDesktopComponent);
+export const SystemMessageDesktop = createCompound(SystemMessageDesktopComponent, {
+    Title: TitleDesktop,
+});

packages/system-message/src/mobile/Component.mobile.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { SystemMessage } from '../Component';
+import { TitleMobile } from '../components/title';
 import type { SystemMessageMobileProps } from '../types';
 import { createCompound } from '../utils';
 
@@ -13,4 +14,6 @@ const SystemMessageMobileComponent: React.FC<SystemMessageMobileProps> = ({
     </SystemMessage>
 );
 
-export const SystemMessageMobile = createCompound(SystemMessageMobileComponent);
+export const SystemMessageMobile = createCompound(SystemMessageMobileComponent, {
+    Title: TitleMobile,
+});

packages/system-message/src/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 
 import { PaddingType } from '../../types';
 

packages/system-message/src/utils.ts

@@ -4,9 +4,13 @@ import { Caption } from './components/caption';
 import { Controls } from './components/controls';
 import { Graphic } from './components/graphic';
 import { Subtitle } from './components/subtitle';
-import { Title } from './components/title';
+import { type Title } from './components/title';
 
-export function createCompound<T>(functionComponent: T) {
+type SubComponentsProps = {
+    Title: typeof Title;
+};
+
+export function createCompound<T>(functionComponent: T, { Title }: SubComponentsProps) {
     return Object.assign(functionComponent, {
         Graphic,
         Title,