refactor: use modal header and modal footer as compound components

Author: abelflopes

packages/components/modal/specs/index.snapshot.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Modal, ModalFooter, ModalHeader } from "../src/index";
+import { Modal } from "../src/index";
 import { LayersProvider } from "@react-ck/layers";
 import { getActRender } from "@react-ck/jest-config";
 
@@ -8,8 +8,8 @@ describe("snapshot Modal", () => {
     const component = await getActRender(
       <LayersProvider>
         <Modal>
-          <ModalHeader heading="Heading" />
-          <ModalFooter>Footer</ModalFooter>
+          <Modal.Header heading="Heading" />
+          <Modal.Footer>Footer</Modal.Footer>
         </Modal>
       </LayersProvider>,
     );

packages/components/modal/specs/index.unit.test.tsx

@@ -9,7 +9,9 @@ describe("unit Modal", () => {
     const content = "Modal";
     render(
       <LayersProvider>
-        <Modal>{content}</Modal>
+        <Modal.Header heading="Heading" />
+        {content}
+        <Modal.Footer>Footer</Modal.Footer>
       </LayersProvider>,
     );
     const find = await screen.findByText(content);

packages/components/modal/src/index.ts

@@ -8,6 +8,8 @@ import { Icon } from "@react-ck/icon";
 import { Button } from "@react-ck/button";
 import { Text } from "@react-ck/text";
 import { Layer } from "@react-ck/layers";
+import { ModalHeader } from "./ModalHeader";
+import { ModalFooter } from "./ModalFooter";
 
 /**
  * ModalProps interface represents the properties for the Modal component.
@@ -32,7 +34,7 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
  * @returns a React element
  */
 
-export const Modal = ({
+const Modal = ({
   open = true,
   dismissable = true,
   children,
@@ -120,3 +122,9 @@ export const Modal = ({
     )
   );
 };
+
+Modal.Header = ModalHeader;
+
+Modal.Footer = ModalFooter;
+
+export { Modal, type ModalProps };

packages/components/modal/src/Modal.tsx renamed to packages/components/modal/src/index.tsx

@@ -4,7 +4,7 @@ import { Manager } from "@react-ck/manager";
 import { faker } from "@faker-js/faker";
 import { Text } from "@react-ck/text/src";
 import { configureStory } from "@react-ck/story-config";
-import { Modal, ModalHeader, ModalFooter } from "@react-ck/modal/src";
+import { Modal } from "@react-ck/modal/src";
 import { Button } from "@react-ck/button";
 
 type Story = StoryObj<typeof Modal>;
@@ -33,13 +33,13 @@ export const Component: Story = {
   args: {
     children: (
       <>
-        <ModalHeader heading={faker.lorem.sentence(4)} />
+        <Modal.Header heading={faker.lorem.sentence(4)} />
 
         <Text>{faker.lorem.sentence(6)}</Text>
 
-        <ModalFooter>
+        <Modal.Footer>
           <Button>{faker.lorem.word()}</Button>
-        </ModalFooter>
+        </Modal.Footer>
       </>
     ),
   },