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

Author: KamilEmeleev

packages/components/src/components/Modal/Modal.mdx

@@ -17,12 +17,7 @@ Modal is a window that appears in front of app content to provide critical
 information or ask for a decision.
 
 ```tsx
-import {
-  Modal,
-  ModalHeader,
-  ModalContent,
-  ModalFooter,
-} from '@koobiq/react-components';
+import { Modal } from '@koobiq/react-components';
 ```
 
 <Story of={Stories.Base} />
@@ -35,9 +30,9 @@ import {
 
 The component has the following helper components:
 
-- `ModalHeader` — header of the modal window
-- `ModalContent` — content area of the component for placing the main information
-- `ModalFooter` — footer of the component, can contain various actions.
+- `Modal.Header` — header of the modal window
+- `Modal.Body` — body of the component for placing the main information
+- `Modal.Footer` — footer of the component, can contain various actions.
 
 ## Usage
 
@@ -59,22 +54,16 @@ The `children` prop can be `ReactNode` or a render function with the `ModalPropC
 The render function can help pass a function to close the modal window.
 
 ```tsx
-import {
-  Button,
-  Modal,
-  ModalHeader,
-  ModalContent,
-  ModalFooter,
-} from '@koobiq/react-components';
+import { Button, Modal } from '@koobiq/react-components';
 
 <Modal control={(props) => <Button {...props}>Open</Button>}>
   {({ close }) => (
     <>
-      <ModalHeader>Title</ModalHeader>
-      <ModalContent>Content</ModalContent>
-      <ModalFooter>
-        <Button onClick={close}>Close</Button>
-      </ModalFooter>
+      <Modal.Header>Title</Modal.Header>
+      <Modal.Body>Content</Modal.Body>
+      <Modal.Footer>
+        <Button onPress={close}>Close</Button>
+      </Modal.Footer>
     </>
   )}
 </Modal>;

packages/components/src/components/Modal/Modal.stories.tsx

@@ -8,19 +8,17 @@ import { spacing } from '../layout';
 import { Textarea } from '../Textarea';
 import { Toggle } from '../Toggle';
 
-import {
-  Modal,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  type ModalProps,
-} from './index';
+import { Modal, type ModalProps } from './index';
 import { modalPropSize } from './index.js';
 
 const meta = {
   title: 'Components/Modal',
   component: Modal,
-  subcomponents: { ModalHeader, ModalContent, ModalFooter },
+  subcomponents: {
+    'Modal.Header': Modal.Header,
+    'Modal.Body': Modal.Body,
+    'Modal.Footer': Modal.Footer,
+  },
   parameters: {
     layout: 'centered',
   },
@@ -39,8 +37,8 @@ export const Base: Story = {
       >
         {({ close }) => (
           <>
-            <ModalHeader>Create access group</ModalHeader>
-            <ModalContent>
+            <Modal.Header>Create access group</Modal.Header>
+            <Modal.Body>
               <Input
                 label="Name"
                 placeholder="Enter a name"
@@ -53,13 +51,13 @@ export const Base: Story = {
                 label="Description"
                 rows={3}
               />
-            </ModalContent>
-            <ModalFooter>
+            </Modal.Body>
+            <Modal.Footer>
               <Button onPress={close}>Ok</Button>
-              <Button variant="fade-contrast-filled" onPress={close}>
+              <Button onPress={close} variant="fade-contrast-filled">
                 Cancel
               </Button>
-            </ModalFooter>
+            </Modal.Footer>
           </>
         )}
       </Modal>
@@ -80,11 +78,11 @@ export const Size: Story = {
           >
             {({ close }) => (
               <>
-                <ModalHeader>I have a {size} size</ModalHeader>
-                <ModalContent>But there&#39;s nothing to say…</ModalContent>
-                <ModalFooter>
+                <Modal.Header>I have a {size} size</Modal.Header>
+                <Modal.Body>But there&#39;s nothing to say…</Modal.Body>
+                <Modal.Footer>
                   <Button onPress={close}>Ok</Button>
-                </ModalFooter>
+                </Modal.Footer>
               </>
             )}
           </Modal>
@@ -103,8 +101,8 @@ export const ControlledOpen: Story = {
       <>
         <Button onPress={on}>Open</Button>
         <Modal open={open} size="small" onOpenChange={set} {...args}>
-          <ModalHeader>Create access group</ModalHeader>
-          <ModalContent>
+          <Modal.Header>Create access group</Modal.Header>
+          <Modal.Body>
             <Input
               label="Name"
               placeholder="Enter a name"
@@ -117,13 +115,13 @@ export const ControlledOpen: Story = {
               label="Description"
               rows={3}
             />
-          </ModalContent>
-          <ModalFooter>
+          </Modal.Body>
+          <Modal.Footer>
             <Button onPress={off}>Ok</Button>
             <Button variant="fade-contrast-filled" onPress={off}>
               Cancel
             </Button>
-          </ModalFooter>
+          </Modal.Footer>
         </Modal>
       </>
     );
@@ -152,8 +150,8 @@ export const Settings: Story = {
       >
         {({ close }) => (
           <>
-            <ModalHeader>Adjust me</ModalHeader>
-            <ModalContent>
+            <Modal.Header>Adjust me</Modal.Header>
+            <Modal.Body>
               <FlexBox gap="l" direction="column">
                 <Toggle
                   checked={hideBackdrop}
@@ -180,10 +178,10 @@ export const Settings: Story = {
                   Disable the exit by pressing ESC key
                 </Toggle>
               </FlexBox>
-            </ModalContent>
-            <ModalFooter>
+            </Modal.Body>
+            <Modal.Footer>
               <Button onPress={close}>Ok</Button>
-            </ModalFooter>
+            </Modal.Footer>
           </>
         )}
       </Modal>

packages/components/src/components/Modal/Modal.tsx

@@ -13,11 +13,12 @@ import { Transition } from 'react-transition-group';
 
 import { Backdrop } from '../Backdrop';
 import { Dialog, type DialogProps } from '../Dialog';
+import { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
 
 import s from './Modal.module.css';
 import type { ModalProps, ModalRef } from './types';
 
-export const Modal = forwardRef<ModalRef, ModalProps>((props, ref) => {
+const ModalComponent = forwardRef<ModalRef, ModalProps>((props, ref) => {
   const {
     size = 'medium',
     hideCloseButton = false,
@@ -144,4 +145,16 @@ export const Modal = forwardRef<ModalRef, ModalProps>((props, ref) => {
   );
 });
 
-Modal.displayName = 'Modal';
+ModalComponent.displayName = 'Modal';
+
+type CompoundedComponent = typeof ModalComponent & {
+  Header: typeof DialogHeader;
+  Body: typeof DialogContent;
+  Footer: typeof DialogFooter;
+};
+
+export const Modal = ModalComponent as CompoundedComponent;
+
+Modal.Header = DialogHeader;
+Modal.Body = DialogContent;
+Modal.Footer = DialogFooter;

packages/components/src/components/Modal/index.ts

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