feat: universal modal atom export refactor

core-ds · Dec 13, 2024 · 2d88ef5 · 2d88ef5
1 parent 219ca8f
commit 2d88ef5
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 50 deletions.
diff --git a/packages/universal-modal/src/Component.responsive.tsx b/packages/universal-modal/src/Component.responsive.tsx
@@ -9,7 +9,7 @@ import { UniversalModalDesktop } from './desktop';
 import { UniversalModalMobile } from './mobile';
 import { UniversalModalResponsiveProps } from './typings';
 
-const UniversalModal = forwardRef<HTMLDivElement, UniversalModalResponsiveProps>(
+export const UniversalModal = forwardRef<HTMLDivElement, UniversalModalResponsiveProps>(
     ({ children, breakpoint, defaultMatchMediaValue, dataTestId, ...restProps }, ref) => {
         const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
 

diff --git a/packages/universal-modal/src/desktop/Component.desktop.tsx b/packages/universal-modal/src/desktop/Component.desktop.tsx
@@ -11,59 +11,60 @@ import { ModalByCenter } from './components/modal-by-center';
 import { ModalBySide } from './components/modal-by-side';
 import { UniversalModalDesktopProps } from './types/props';
 
-const UniversalModalDesktopComponent = forwardRef<HTMLDivElement, UniversalModalDesktopProps>(
-    ({ children, dataTestId, horizontalAlign = 'center', ...restProps }, ref) => {
-        const [modalWidth, setModalWidth] = useState<number>(0);
-        const [modalHeaderHighlighted, setModalHeaderHighlighted] = useState<boolean>(false);
-        const [modalFooterHighlighted, setModalFooterHighlighted] = useState<boolean>(false);
+export const UniversalModalDesktopComponent = forwardRef<
+    HTMLDivElement,
+    UniversalModalDesktopProps
+>(({ children, dataTestId, horizontalAlign = 'center', ...restProps }, ref) => {
+    const [modalWidth, setModalWidth] = useState<number>(0);
+    const [modalHeaderHighlighted, setModalHeaderHighlighted] = useState<boolean>(false);
+    const [modalFooterHighlighted, setModalFooterHighlighted] = useState<boolean>(false);
 
-        const contextValue = React.useMemo<TResponsiveModalContext>(
-            () => ({
-                view: 'desktop',
-                dataTestId,
-                modalWidth,
-                modalHeaderHighlighted,
-                modalFooterHighlighted,
-                setModalWidth,
-                setModalHeaderHighlighted,
-                setModalFooterHighlighted,
-            }),
-            [dataTestId, modalWidth, modalHeaderHighlighted, modalFooterHighlighted],
-        );
-
-        const renderContent = () => {
-            if (horizontalAlign === 'center') {
-                return (
-                    <ModalByCenter
-                        horizontalAlign={horizontalAlign}
-                        dataTestId={dataTestId}
-                        {...restProps}
-                        ref={ref}
-                    >
-                        {children}
-                    </ModalByCenter>
-                );
-            }
+    const contextValue = React.useMemo<TResponsiveModalContext>(
+        () => ({
+            view: 'desktop',
+            dataTestId,
+            modalWidth,
+            modalHeaderHighlighted,
+            modalFooterHighlighted,
+            setModalWidth,
+            setModalHeaderHighlighted,
+            setModalFooterHighlighted,
+        }),
+        [dataTestId, modalWidth, modalHeaderHighlighted, modalFooterHighlighted],
+    );
 
+    const renderContent = () => {
+        if (horizontalAlign === 'center') {
             return (
-                <ModalBySide
+                <ModalByCenter
                     horizontalAlign={horizontalAlign}
                     dataTestId={dataTestId}
                     {...restProps}
                     ref={ref}
                 >
                     {children}
-                </ModalBySide>
+                </ModalByCenter>
             );
-        };
+        }
 
         return (
-            <ResponsiveContext.Provider value={contextValue}>
-                {renderContent()}
-            </ResponsiveContext.Provider>
+            <ModalBySide
+                horizontalAlign={horizontalAlign}
+                dataTestId={dataTestId}
+                {...restProps}
+                ref={ref}
+            >
+                {children}
+            </ModalBySide>
         );
-    },
-);
+    };
+
+    return (
+        <ResponsiveContext.Provider value={contextValue}>
+            {renderContent()}
+        </ResponsiveContext.Provider>
+    );
+});
 
 export const UniversalModalDesktop = Object.assign(UniversalModalDesktopComponent, {
     Content,

diff --git a/packages/universal-modal/src/docs/development.mdx b/packages/universal-modal/src/docs/development.mdx
@@ -4,24 +4,47 @@ import { UniversalModalDesktop } from '../desktop';
 import { UniversalModalResponsive } from '..';
 import vars from '!!raw-loader!../vars.css';
 
-## Подключение
+## Подключение Responsive
 
 ```jsx
-// Responsive компонент
+// atom
+import { UniversalModal } from '@alfalab/core-components/universal-modal';
+
+// compound
 import { UniversalModalResponsive } from '@alfalab/core-components/universal-modal';
+
 import type {UniversalModalResponsiveProps } from '@alfalab/core-components/universal-modal';
+```
+
+## Подключение Desktop
 
-// Desktop компонент
+```jsx
+// atom
+import { UniversalModalDesktopComponent } from '@alfalab/core-components/universal-modal';
+
+// compound
 import { UniversalModalDesktop } from '@alfalab/core-components/universal-modal';
+
 import type { UniversalModalDesktopProps } from '@alfalab/core-components/universal-modal';
 import { ArrowButtonDesktop, CrossButtonDesktop } from '@alfalab/core-components/universal-modal';
+```
 
-// Mobile компонент
+## Подключение Mobile
+
+```jsx
+// atom
+import { UniversalModalMobileComponent } from '@alfalab/core-components/universal-modal';
+
+// compound
 import { UniversalModalMobile } from '@alfalab/core-components/universal-modal';
+
 import type { UniversalModalMobileProps } from '@alfalab/core-components/universal-modal';
 import { ArrowButtonDesktopMobile, CrossButtonDesktopMobile } from '@alfalab/core-components/universal-modal';
+```
+
+## Атомарный импорт внутренних компонентов
 
-// Атомарный импорт внутренних компонентов
+```jsx
 import { ContentDesktop, ContentMobile } from '@alfalab/core-components/universal-modal';
 import type { ContentDesktopProps, ContentMobileProps } from '@alfalab/core-components/universal-modal';
 

diff --git a/packages/universal-modal/src/index.ts b/packages/universal-modal/src/index.ts
@@ -1,12 +1,12 @@
-export { UniversalModalResponsive } from './Component.responsive';
+export { UniversalModalResponsive, UniversalModal } from './Component.responsive';
 export type { UniversalModalResponsiveProps } from './typings';
 
-export { UniversalModalDesktop } from './desktop/Component.desktop';
+export { UniversalModalDesktop, UniversalModalDesktopComponent } from './desktop/Component.desktop';
 export type { UniversalModalDesktopProps } from './desktop/types/props';
 export { ArrowButtonDesktop } from './desktop/components/buttons/arrow-button';
 export { CrossButtonDesktop } from './desktop/components/buttons/cross-button';
 
-export { UniversalModalMobile } from './mobile/Component.mobile';
+export { UniversalModalMobile, UniversalModalMobileComponent } from './mobile/Component.mobile';
 export type { UniversalModalMobileProps } from './mobile/types/props';
 export { ArrowButtonMobile } from './mobile/components/buttons/arrow-button';
 export { CrossButtonMobile } from './mobile/components/buttons/cross-button';

diff --git a/packages/universal-modal/src/mobile/Component.mobile.tsx b/packages/universal-modal/src/mobile/Component.mobile.tsx
@@ -16,7 +16,7 @@ import styles from './mobile.module.css';
 import rightSideTransitions from './transitions/right-side-transitions.mobile.module.css';
 import transitions from './transitions/transitions.mobile.module.css';
 
-const UniversalModalMobileComponent = forwardRef<HTMLDivElement, UniversalModalMobileProps>(
+export const UniversalModalMobileComponent = forwardRef<HTMLDivElement, UniversalModalMobileProps>(
     ({ children, className, dataTestId, onClose, appearance = 'bottom', ...restProps }, ref) => {
         const [modalHeaderHighlighted, setModalHeaderHighlighted] = useState<boolean>(false);
         const contextValue = useMemo<TResponsiveModalContext>(