feat(plasma-web, plasma-b2c): ModalBase, PopupBase on new-hope

salute-developers · Nov 2, 2023 · 84a0bd9 · 84a0bd9
1 parent a33ebaa
commit 84a0bd9
Show file tree

Hide file tree

Showing 25 changed files with 168 additions and 223 deletions.
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
diff --git a/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts
@@ -0,0 +1,15 @@
+import { css } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+    },
+    variations: {
+        view: {
+            default: css`
+                --plasma-modal-overlay-with-blur-color: rgba(35, 35, 35, 0.2);
+                --plasma-modal-overlay-color: rgba(8, 8, 8, 0.56);
+            `,
+        },
+    },
+};
diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
+import styled from 'styled-components';
 import { Story, Meta } from '@storybook/react';
-import { surfaceSolid02, darkOverlayBlur, overlaySoft } from '@salutejs/plasma-tokens-web';
+import { surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { SSRProvider } from '../SSRProvider';
 import { Button } from '../Button';
-import { PopupBaseProvider, endAnimationClass, popupBaseRootClass } from '../PopupBase';
+import { PopupBaseProvider, popupBaseClasses } from '../PopupBase';
 
-import { ModalBase, modalBaseOverlayClass } from '.';
+import { ModalBase, modalBaseClasses } from '.';
 
 export default {
     title: 'Controls/ModalBase',
@@ -51,29 +51,21 @@ const StyledWrapper = styled.div`
     height: 1200px;
 `;
 
-// TODO: новый отдельный оверлей #778
-const ModalOverlayVariables = createGlobalStyle`
-    body {
-        --plasma-modal-blur-overlay-color: ${darkOverlayBlur};
-        --plasma-modal-overlay-color: ${overlaySoft};
-    }
-`;
-
 const Content = styled.div`
     background: ${surfaceSolid02};
     padding: 1rem;
 `;
 
 const StyledModal = styled(ModalBase)`
-    && > .${popupBaseRootClass}, .${modalBaseOverlayClass} {
+    && > .${popupBaseClasses.root}, .${modalBaseClasses.overlay} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endAnimation} .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${modalBaseOverlayClass} {
+    &&.${popupBaseClasses.endAnimation} .${modalBaseClasses.overlay} {
         animation: fadeOut 1s forwards;
     }
 
@@ -106,7 +98,6 @@ export const ModalBaseDemo: Story<ModalBaseStoryProps> = ({ placement, offsetX,
     return (
         <SSRProvider>
             <StyledWrapper>
-                <ModalOverlayVariables />
                 <PopupBaseProvider>
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />

diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx
@@ -0,0 +1,14 @@
+import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Modal.config';
+
+const mergedConfig = mergeConfig(modalConfig, config);
+const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
+    ModalProps & React.RefAttributes<HTMLDivElement>
+>;
+
+/**
+ * Модальное окно.
+ */
+export const ModalBase = ModalBaseComponent;
diff --git a/packages/plasma-b2c/src/components/ModalBase/index.ts b/packages/plasma-b2c/src/components/ModalBase/index.ts
@@ -1,2 +1,4 @@
-export { ModalBase, ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-hope';
-export type { ModalBaseProps, ModalBaseRootProps, ModalOverlayProps } from '@salutejs/plasma-hope';
+export { ModalBase } from './ModalBase';
+export { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
+
+export type { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
diff --git a/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx b/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx
@@ -7,7 +7,7 @@ import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 import { SSRProvider } from '../SSRProvider';
 import { Button } from '../Button';
 
-import { PopupBase, PopupBaseProvider, endAnimationClass, endTransitionClass, popupBaseRootClass } from '.';
+import { PopupBase, popupBaseClasses, PopupBaseProvider } from '.';
 
 export default {
     title: 'Controls/PopupBase',
@@ -65,11 +65,11 @@ const Content = styled.div`
 `;
 
 const StyledPopupAnimation = styled(PopupBase)`
-    && > .${popupBaseRootClass} {
+    && .${popupBaseClasses.root} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endAnimation} .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
@@ -95,12 +95,12 @@ const StyledPopupAnimation = styled(PopupBase)`
 `;
 
 const StyledPopupTransition = styled(PopupBase)`
-    && > .${popupBaseRootClass} {
+    && .${popupBaseClasses.root} {
         opacity: 1;
         transition: opacity 0.5s 0.1s;
     }
 
-    &&.${endTransitionClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endTransition} .${popupBaseClasses.root} {
         opacity: 0;
         transition: opacity 0.5s 0.1s;
     }

diff --git a/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx b/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx
@@ -0,0 +1,8 @@
+import { popupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+const mergedConfig = mergeConfig(popupConfig);
+
+/**
+ * Базовый компонент PopupBase.
+ */
+export const PopupBase = component(mergedConfig);
diff --git a/packages/plasma-b2c/src/components/PopupBase/index.ts b/packages/plasma-b2c/src/components/PopupBase/index.ts
@@ -1,16 +1,13 @@
 export {
-    PopupBaseProvider,
-    usePopupBaseContext,
-    PopupBase,
-    popupBaseRootClass,
-    endAnimationClass,
-    endTransitionClass,
-} from '@salutejs/plasma-hope';
+    usePopupContext as usePopupBaseContext,
+    PopupProvider as PopupBaseProvider,
+    popupClasses as popupBaseClasses,
+} from '@salutejs/plasma-new-hope/styled-components';
+
+export { PopupBase } from './PopupBase';
 
 export type {
-    PopupBasePlacement,
+    PopupPlacement as PopupBasePlacement,
     PopupInfo,
-    PopupContextType,
-    PopupBaseProps,
-    PopupRootProps,
-} from '@salutejs/plasma-hope';
+    PopupProps as PopupBaseProps,
+} from '@salutejs/plasma-new-hope/styled-components';
diff --git a/packages/plasma-hope/api/plasma-hope.api.md b/packages/plasma-hope/api/plasma-hope.api.md
@@ -63,8 +63,6 @@ import { DisabledProps } from '@salutejs/plasma-core';
 import { DsplL } from '@salutejs/plasma-typo';
 import { DsplM } from '@salutejs/plasma-typo';
 import { DsplS } from '@salutejs/plasma-typo';
-import { endAnimationClass } from '@salutejs/plasma-core';
-import { endTransitionClass } from '@salutejs/plasma-core';
 import { extractTextFrom } from '@salutejs/plasma-core';
 import { FC } from 'react';
 import type { FieldProps as FieldProps_2 } from '@salutejs/plasma-core';
@@ -96,12 +94,6 @@ import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { LineSkeleton } from '@salutejs/plasma-core';
 import { LineSkeletonProps } from '@salutejs/plasma-core';
 import { MaxLinesProps } from '@salutejs/plasma-core';
-import { ModalBase } from '@salutejs/plasma-core';
-import { modalBaseOverlayClass } from '@salutejs/plasma-core';
-import { ModalBaseProps } from '@salutejs/plasma-core';
-import { ModalBaseRootProps } from '@salutejs/plasma-core';
-import { ModalOverlay } from '@salutejs/plasma-core';
-import { ModalOverlayProps } from '@salutejs/plasma-core';
 import { monthLongName } from '@salutejs/plasma-core';
 import { monthShortName } from '@salutejs/plasma-core';
 import { MutableRefObject } from 'react';
@@ -118,15 +110,7 @@ import { ParagraphText2 } from '@salutejs/plasma-core';
 import { PickOptional } from '@salutejs/plasma-core';
 import { PinProps } from '@salutejs/plasma-core';
 import { Popup } from '@salutejs/plasma-core';
-import { PopupBase } from '@salutejs/plasma-core';
-import { PopupBasePlacement } from '@salutejs/plasma-core';
-import { PopupBaseProps } from '@salutejs/plasma-core';
-import { PopupBaseProvider } from '@salutejs/plasma-core';
-import { popupBaseRootClass } from '@salutejs/plasma-core';
-import { PopupContextType } from '@salutejs/plasma-core';
-import { PopupInfo } from '@salutejs/plasma-core';
 import { PopupProps } from '@salutejs/plasma-core';
-import { PopupRootProps } from '@salutejs/plasma-core';
 import type { PriceProps as PriceProps_2 } from '@salutejs/plasma-core';
 import { PropsWithChildren } from 'react';
 import { radiuses } from '@salutejs/plasma-core';
@@ -181,7 +165,6 @@ import { useDebouncedFunction } from '@salutejs/plasma-core';
 import { useFocusTrap } from '@salutejs/plasma-core';
 import { useForkRef } from '@salutejs/plasma-core';
 import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core';
-import { usePopupBaseContext } from '@salutejs/plasma-core';
 import { useResizeObserver } from '@salutejs/plasma-core';
 import { useToast } from '@salutejs/plasma-core';
 import { View } from '@salutejs/plasma-core';
@@ -684,10 +667,6 @@ export interface ElasticGridProps {
     minColWidth: number;
 }
 
-export { endAnimationClass }
-
-export { endTransitionClass }
-
 export { extractTextFrom }
 
 // @public (undocumented)
@@ -913,18 +892,6 @@ export type MediaQueryFunction = (content: FlattenSimpleInterpolation | string)
 // @public
 export const Modal: FC<ModalProps>;
 
-export { ModalBase }
-
-export { modalBaseOverlayClass }
-
-export { ModalBaseProps }
-
-export { ModalBaseRootProps }
-
-export { ModalOverlay }
-
-export { ModalOverlayProps }
-
 // @public (undocumented)
 export interface ModalProps extends ModalViewProps {
     closeOnEsc?: boolean;
@@ -1015,24 +982,8 @@ export type Placement = BasePlacement | VariationPlacement;
 
 export { Popup }
 
-export { PopupBase }
-
-export { PopupBasePlacement }
-
-export { PopupBaseProps }
-
-export { PopupBaseProvider }
-
-export { popupBaseRootClass }
-
-export { PopupContextType }
-
-export { PopupInfo }
-
 export { PopupProps }
 
-export { PopupRootProps }
-
 // @public
 export const PreviewGallery: FC<PreviewGalleryProps & HTMLAttributes<HTMLDivElement> & SortableContainerProps>;
 
@@ -1370,8 +1321,6 @@ export { useForkRef }
 
 export { useIsomorphicLayoutEffect }
 
-export { usePopupBaseContext }
-
 export { useResizeObserver }
 
 export { useToast }

diff --git a/packages/plasma-hope/src/components/ModalBase/index.ts b/packages/plasma-hope/src/components/ModalBase/index.ts
diff --git a/packages/plasma-hope/src/components/PopupBase/index.ts b/packages/plasma-hope/src/components/PopupBase/index.ts
diff --git a/packages/plasma-hope/src/index.ts b/packages/plasma-hope/src/index.ts
@@ -12,11 +12,9 @@ export * from './components/Grid';
 export * from './components/Image';
 export * from './components/List';
 export * from './components/Modal';
-export * from './components/ModalBase';
 export * from './components/Notification';
 export * from './components/PaginationDots';
 export * from './components/Popup';
-export * from './components/PopupBase';
 export * from './components/Price';
 export * from './components/Progress';
 export * from './components/PreviewGallery';

diff --git a/packages/plasma-new-hope/src/components/Modal/index.ts b/packages/plasma-new-hope/src/components/Modal/index.ts
@@ -1,4 +1,2 @@
 export { modalConfig, modalRoot } from './Modal';
-export { classes as modalClasses } from './Modal.tokens'
-
-export type { ModalProps } from './Modal.types';
+export { classes as modalClasses } from './Modal.tokens';
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@linaria/react';
 import { Story, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 

diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@linaria/react';
 import { Story, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 

diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@linaria/react';
 import { Story, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 

diff --git a/packages/plasma-new-hope/src/index.ts b/packages/plasma-new-hope/src/index.ts
@@ -8,3 +8,7 @@ export * from './components/Checkbox';
 export * from './components/Radiobox';
 export * from './components/Popover';
 export * from './components/Tabs';
+export * from './components/Popup';
+export * from './components/Popup/Popup.types';
+export * from './components/Modal';
+export * from './components/Modal/Modal.types';