chore(new-hope): CSF 3 for Modal

salute-developers · Nov 15, 2023 · e8e0e6e · e8e0e6e
1 parent 476f170
commit e8e0e6e
Show file tree

Hide file tree

Showing 17 changed files with 167 additions and 80 deletions.
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -145,7 +145,6 @@ import { MediaQueryFunction } from '@salutejs/plasma-hope';
 import { Modal } from '@salutejs/plasma-hope';
 import { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
-import { modalTokens as modalBaseTokens } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps } from '@salutejs/plasma-hope';
 import { ModalsProvider } from '@salutejs/plasma-hope';
 import { ModalView } from '@salutejs/plasma-hope';
@@ -177,7 +176,6 @@ import { PopupProps as PopupBaseProps } from '@salutejs/plasma-new-hope/styled-c
 import { PopupProvider as PopupBaseProvider } from '@salutejs/plasma-new-hope/styled-components';
 import { PopupInfo } from '@salutejs/plasma-new-hope/styled-components';
 import { PopupProps } from '@salutejs/plasma-hope';
-import { PopupProps as PopupProps_2 } from '@salutejs/plasma-new-hope';
 import { PreviewGallery } from '@salutejs/plasma-hope';
 import { PreviewGalleryItemProps } from '@salutejs/plasma-hope';
 import { PreviewGalleryProps } from '@salutejs/plasma-hope';
@@ -597,14 +595,12 @@ export { MediaQueryFunction }
 export { Modal }
 
 // @public
-export const ModalBase: React_2.ForwardRefExoticComponent<ModalBaseProps & React_2.RefAttributes<HTMLDivElement>>;
+export const ModalBase: ForwardRefExoticComponent<ModalBaseProps & RefAttributes<HTMLDivElement>>;
 
 export { modalBaseClasses }
 
 export { ModalBaseProps }
 
-export { modalBaseTokens }
-
 export { ModalProps }
 
 export { ModalsProvider }
@@ -659,7 +655,7 @@ export { PopoverTrigger }
 export { Popup }
 
 // @public
-export const PopupBase: FunctionComponent<PropsType<Record<string, Variant>> & PopupProps_2 & RefAttributes<HTMLDivElement>>;
+export const PopupBase: ForwardRefExoticComponent<PopupBaseProps & RefAttributes<HTMLDivElement>>;
 
 export { popupBaseClasses }
 

diff --git a/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts
@@ -1,6 +1,4 @@
-import { css } from '@salutejs/plasma-new-hope/styled-components';
-
-import { modalBaseTokens } from '.';
+import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components';
 
 export const config = {
     defaults: {
@@ -9,8 +7,8 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${modalBaseTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
-                ${modalBaseTokens.modalOverlayColor}: rgba(8, 8, 8, 0.56);
+                ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
+                ${modalTokens.modalOverlayColor}: var(--overlay-soft);
             `,
         },
     },

diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx
@@ -1,5 +1,5 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 import { config } from './Modal.config';
 

diff --git a/packages/plasma-b2c/src/components/ModalBase/index.ts b/packages/plasma-b2c/src/components/ModalBase/index.ts
@@ -1,7 +1,4 @@
 export { ModalBase } from './ModalBase';
-export {
-    modalClasses as modalBaseClasses,
-    modalTokens as modalBaseTokens,
-} from '@salutejs/plasma-new-hope/styled-components';
+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.tsx b/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx
@@ -1,5 +1,5 @@
 import { popupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 import { PopupBaseProps } from '.';
 

diff --git a/...rc/components/Modal/Modal/Modal.tokens.ts → ...hope/src/components/Modal/Modal.tokens.ts b/...rc/components/Modal/Modal/Modal.tokens.ts → ...hope/src/components/Modal/Modal.tokens.ts
diff --git a/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.styles.ts b/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.styles.ts
@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 
 import { DEFAULT_Z_INDEX } from '../../Popup/utils';
-import { tokens } from '../Modal/Modal.tokens';
+import { tokens } from '../Modal.tokens';
 
 // TODO: новый отдельный оверлей #778
 export const Overlay = styled.div<{

diff --git a/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.tsx b/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.tsx
@@ -3,7 +3,7 @@ import React, { FC, useCallback, useMemo } from 'react';
 import { usePopupContext } from '../../Popup';
 import { getIdLastModal } from '../Modal/ModalContext';
 import { ModalOverlayProps } from '../Modal/Modal.types';
-import { classes } from '../Modal/Modal.tokens';
+import { classes } from '../Modal.tokens';
 
 import { Overlay } from './ModalOverlay.styles';
 

diff --git a/packages/plasma-new-hope/src/components/Modal/index.ts b/packages/plasma-new-hope/src/components/Modal/index.ts
@@ -1,2 +1,3 @@
 export { modalConfig, modalRoot } from './Modal/Modal';
-export { classes as modalClasses, tokens as modalTokens } from './Modal/Modal.tokens';
+export { classes as modalClasses, tokens as modalTokens } from './Modal.tokens';
+export type { ModalProps, ModalOverlayProps } from './Modal/Modal.types';
diff --git a/packages/plasma-new-hope/src/components/Popup/index.ts b/packages/plasma-new-hope/src/components/Popup/index.ts
@@ -2,3 +2,4 @@ export { PopupProvider, usePopupContext } from './PopupContext';
 export { popupRoot, popupConfig } from './Popup';
 export { usePopup } from './hooks';
 export { classes as popupClasses } from './Popup.tokens';
+export type { PopupPlacement, PopupInfo, PopupProps } from './Popup.types';
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,6 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import { styled } from '@linaria/react';
-import { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
@@ -28,11 +29,42 @@ export default {
             control: {
                 type: 'select',
             },
+            table: { defaultValue: { summary: 'center' } },
+        },
+        offsetX: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        offsetY: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        closeOnEsc: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closeOnOverlayClick: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
         },
     },
 } as Meta;
 
-type ModalStoryProps = {
+type StoryModalProps = ComponentProps<typeof Modal> & {
     placement: string;
     offsetX: number;
     offsetY: number;
@@ -89,10 +121,10 @@ const StyledModal = styled(Modal)`
     }
 `;
 
-export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY, ...rest }) => {
-    const [isOpenA, setIsOpenA] = React.useState(false);
-    const [isOpenB, setIsOpenB] = React.useState(false);
-    const [isOpenC, setIsOpenC] = React.useState(false);
+const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+    const [isOpenC, setIsOpenC] = useState(false);
 
     return (
         <SSRProvider>
@@ -158,11 +190,14 @@ export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY,
     );
 };
 
-ModalDemo.args = {
-    placement: 'center',
-    withBlur: false,
-    closeOnEsc: true,
-    closeOnOverlayClick: true,
-    offsetX: 0,
-    offsetY: 0,
+export const ModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalDemo {...args} />,
 };
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,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { styled } from '@linaria/react';
-import { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
@@ -28,11 +29,42 @@ export default {
             control: {
                 type: 'select',
             },
+            table: { defaultValue: { summary: 'center' } },
+        },
+        offsetX: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        offsetY: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        closeOnEsc: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closeOnOverlayClick: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
         },
     },
 } as Meta;
 
-type ModalStoryProps = {
+type StoryModalProps = ComponentProps<typeof Modal> & {
     placement: string;
     offsetX: number;
     offsetY: number;
@@ -89,10 +121,10 @@ const StyledModal = styled(Modal)`
     }
 `;
 
-export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY, ...rest }) => {
-    const [isOpenA, setIsOpenA] = React.useState(false);
-    const [isOpenB, setIsOpenB] = React.useState(false);
-    const [isOpenC, setIsOpenC] = React.useState(false);
+const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+    const [isOpenC, setIsOpenC] = useState(false);
 
     return (
         <SSRProvider>
@@ -158,11 +190,14 @@ export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY,
     );
 };
 
-ModalDemo.args = {
-    placement: 'center',
-    withBlur: false,
-    closeOnEsc: true,
-    closeOnOverlayClick: true,
-    offsetX: 0,
-    offsetY: 0,
+export const ModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalDemo {...args} />,
 };
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,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { styled } from '@linaria/react';
-import { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
@@ -28,11 +29,42 @@ export default {
             control: {
                 type: 'select',
             },
+            table: { defaultValue: { summary: 'center' } },
+        },
+        offsetX: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        offsetY: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        closeOnEsc: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closeOnOverlayClick: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
         },
     },
 } as Meta;
 
-type ModalStoryProps = {
+type StoryModalProps = ComponentProps<typeof Modal> & {
     placement: string;
     offsetX: number;
     offsetY: number;
@@ -89,10 +121,10 @@ const StyledModal = styled(Modal)`
     }
 `;
 
-export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY, ...rest }) => {
-    const [isOpenA, setIsOpenA] = React.useState(false);
-    const [isOpenB, setIsOpenB] = React.useState(false);
-    const [isOpenC, setIsOpenC] = React.useState(false);
+const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+    const [isOpenC, setIsOpenC] = useState(false);
 
     return (
         <SSRProvider>
@@ -158,11 +190,14 @@ export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY,
     );
 };
 
-ModalDemo.args = {
-    placement: 'center',
-    withBlur: false,
-    closeOnEsc: true,
-    closeOnOverlayClick: true,
-    offsetX: 0,
-    offsetY: 0,
+export const ModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalDemo {...args} />,
 };
diff --git a/packages/plasma-new-hope/src/index.ts b/packages/plasma-new-hope/src/index.ts
@@ -10,8 +10,6 @@ export * from './components/Popover';
 export * from './components/Tabs';
 export * from './components/Calendar';
 export * from './components/Typography';
-export * from './mixins';
 export * from './components/Popup';
-export * from './components/Popup/Popup.types';
 export * from './components/Modal';
-export * from './components/Modal/Modal/Modal.types';
+export * from './mixins';