feat(components/Popover): import components via Popover.Header, Popover.Body, Popover.Footer

Author: KamilEmeleev

packages/components/src/components/Popover/Popover.mdx

@@ -16,12 +16,7 @@ import * as Stories from './Popover.stories';
 Popover component as an overlay whose position is anchored to an element in the user interface.
 
 ```tsx
-import {
-  Popover,
-  PopoverHeader,
-  PopoverContent,
-  PopoverFooter,
-} from '@koobiq/react-components';
+import { Popover } from '@koobiq/react-components';
 ```
 
 <Story of={Stories.Base} />
@@ -34,9 +29,9 @@ import {
 
 The component has the following helper components:
 
-- `PopoverHeader` — header of the popover
-- `PopoverContent` — content area of the component for placing the main information
-- `PopoverFooter` — footer of the component, can contain various actions.
+- `Popover.Header` — header of the popover
+- `Popover.Body` — body of the component for placing the main information
+- `Popover.Footer` — footer of the component, can contain various actions.
 
 ## Usage
 
@@ -60,22 +55,16 @@ The `children` prop can be `ReactNode` or a render function with the `PopoverPro
 The render function can help pass a function to close the popover.
 
 ```tsx
-import {
-  Button,
-  Popover,
-  PopoverHeader,
-  PopoverContent,
-  PopoverFooter,
-} from '@koobiq/react-components';
+import { Button, Popover } from '@koobiq/react-components';
 
 <Popover control={(props) => <Button {...props}>Open</Button>}>
   {({ close }) => (
     <>
-      <PopoverHeader>Title</PopoverHeader>
-      <PopoverContent>Content</PopoverContent>
-      <PopoverFooter>
+      <Popover.Header>Title</Popover.Header>
+      <Popover.Body>Content</Popover.Body>
+      <Popover.Footer>
         <Button onClick={close}>Close</Button>
-      </PopoverFooter>
+      </Popover.Footer>
     </>
   )}
 </Popover>;

packages/components/src/components/Popover/Popover.stories.tsx

@@ -13,20 +13,17 @@ import { spacing } from '../layout';
 import { Typography } from '../Typography';
 
 import image from './__stories__/img.webp';
-import {
-  Popover,
-  PopoverContent,
-  PopoverFooter,
-  PopoverHeader,
-  type PopoverPropPlacement,
-  popoverPropSize,
-} from './index';
+import { Popover, type PopoverPropPlacement, popoverPropSize } from './index';
 import type { PopoverProps } from './index.js';
 
 const meta = {
   title: 'Components/Popover',
   component: Popover,
-  subcomponents: { PopoverHeader, PopoverContent, PopoverFooter },
+  subcomponents: {
+    'Popover.Header': Popover.Header,
+    'Popover.Body': Popover.Body,
+    'Popover.Footer': Popover.Footer,
+  },
   parameters: {
     layout: 'centered',
   },
@@ -43,7 +40,7 @@ export const Base: Story = {
       hideCloseButton
       {...args}
     >
-      <PopoverHeader>I&#39;m a popover!</PopoverHeader>
+      <Popover.Header>I&#39;m a popover!</Popover.Header>
     </Popover>
   ),
 };
@@ -57,7 +54,7 @@ export const Arrow: Story = {
       hideArrow
       {...args}
     >
-      <PopoverHeader>I&#39;m a popover!</PopoverHeader>
+      <Popover.Header>I&#39;m a popover!</Popover.Header>
     </Popover>
   ),
 };
@@ -77,7 +74,7 @@ export const Offsets: Story = {
           hideCloseButton
           {...args}
         >
-          <PopoverHeader>I&#39;m a popover!</PopoverHeader>
+          <Popover.Header>I&#39;m a popover!</Popover.Header>
         </Popover>
         <FlexBox gap="m">
           <InputNumber
@@ -118,11 +115,11 @@ export const Size: Story = {
           >
             {({ close }) => (
               <>
-                <PopoverHeader>{capitalizeFirstLetter(size)}</PopoverHeader>
-                <PopoverContent>{text}</PopoverContent>
-                <PopoverFooter>
+                <Popover.Header>{capitalizeFirstLetter(size)}</Popover.Header>
+                <Popover.Body>{text}</Popover.Body>
+                <Popover.Footer>
                   <Button onPress={close}>Ok</Button>
-                </PopoverFooter>
+                </Popover.Footer>
               </>
             )}
           </Popover>
@@ -134,11 +131,11 @@ export const Size: Story = {
         >
           {({ close }) => (
             <>
-              <PopoverHeader>Custom size = 50%</PopoverHeader>
-              <PopoverContent>{text}</PopoverContent>
-              <PopoverFooter>
+              <Popover.Header>Custom size = 50%</Popover.Header>
+              <Popover.Body>{text}</Popover.Body>
+              <Popover.Footer>
                 <Button onPress={close}>Ok</Button>
-              </PopoverFooter>
+              </Popover.Footer>
             </>
           )}
         </Popover>
@@ -279,7 +276,7 @@ export const Placement: Story = {
           hideCloseButton
           {...args}
         >
-          <PopoverContent>Check out my placement</PopoverContent>
+          <Popover.Body>Check out my placement</Popover.Body>
         </Popover>
       </Grid>
     );
@@ -313,7 +310,7 @@ export const ControlledOpen: Story = {
           hideCloseButton
           {...args}
         >
-          <PopoverHeader>I&#39;m a popover!</PopoverHeader>
+          <Popover.Header>I&#39;m a popover!</Popover.Header>
         </Popover>
       </>
     );

packages/components/src/components/Popover/Popover.tsx

@@ -13,7 +13,7 @@ import {
 import { Transition } from 'react-transition-group';
 import type { TransitionProps } from 'react-transition-group/Transition';
 
-import { Dialog } from '../Dialog';
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from '../Dialog';
 
 import s from './Popover.module.css';
 import type { PopoverInnerProps, PopoverProps } from './types';
@@ -174,7 +174,7 @@ export const PopoverInner: FC<PopoverInnerProps> = (props) => {
   );
 };
 
-export const Popover = forwardRef<ComponentRef<'div'>, PopoverProps>(
+const PopoverComponent = forwardRef<ComponentRef<'div'>, PopoverProps>(
   (props, ref) => {
     const { open, onOpenChange, defaultOpen, ...other } = props;
 
@@ -189,4 +189,16 @@ export const Popover = forwardRef<ComponentRef<'div'>, PopoverProps>(
   }
 );
 
-Popover.displayName = 'Popover';
+PopoverComponent.displayName = 'Popover';
+
+type CompoundedComponent = typeof PopoverComponent & {
+  Header: typeof DialogHeader;
+  Body: typeof DialogContent;
+  Footer: typeof DialogFooter;
+};
+
+export const Popover = PopoverComponent as CompoundedComponent;
+
+Popover.Header = DialogHeader;
+Popover.Body = DialogContent;
+Popover.Footer = DialogFooter;

packages/components/src/components/Popover/index.ts

@@ -1,9 +1,20 @@
+import { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
+
 export * from './Popover';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
 
-export {
-  DialogHeader as PopoverHeader,
-  DialogContent as PopoverContent,
-  DialogFooter as PopoverFooter,
-} from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Header` instead.
+ */
+export const PopoverHeader = DialogHeader;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Body` instead.
+ */
+export const PopoverContent = DialogContent;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Footer` instead.
+ */
+export const PopoverFooter = DialogFooter;