Add modal component, story, and theme, update Drawer onClose

Update onClose in Modal and Drawer

Change name to toggleOpen

Include ModalBodyProps and export remaining sub components

src/components/Drawer/Drawer.stories.tsx

@@ -30,31 +30,22 @@ export const Base: Story = {
   args: {
     placement: "bottom",
     isOpen: false,
-    onClose: () => {
-      return;
-    },
+    onClose: () => {},
     children: "Content here",
   },
   render: function Render(args) {
-    const [{ onClose }, updateArgs] = useArgs();
-    function onClick() {
-      updateArgs({ isOpen: true });
+    const [{ isOpen }, updateArgs] = useArgs();
+    function onClose() {
+      updateArgs({ isOpen: !isOpen });
     }
     const btnRef = useRef(null);
 
     return (
       <>
-        <Button ref={btnRef} onClick={onClick}>
+        <Button ref={btnRef} onClick={onClose}>
           Open
         </Button>
-        <Drawer
-          {...args}
-          onClose={() => {
-            onClose();
-            updateArgs({ isOpen: false });
-          }}
-          finalFocusRef={btnRef}
-        >
+        <Drawer {...args} onClose={onClose} finalFocusRef={btnRef}>
           <DrawerOverlay />
           <DrawerContent>
             <DrawerCloseButton />

src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+} from "./Modal";
+import { getThemingArgTypes } from "@chakra-ui/storybook-addon";
+import { theme } from "../../theme";
+import { useArgs } from "@storybook/preview-api";
+import { useRef } from "react";
+import { Button } from "../Button";
+
+const meta = {
+  title: "Components/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  argTypes: {
+    ...getThemingArgTypes(theme, "Modal"),
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    isOpen: false,
+    children: "Lorem ipsum odor amet, consectetuer adipiscing elit.",
+    isCentered: true,
+  },
+  render: function Render(args) {
+    const [{ isOpen }, updateArgs] = useArgs();
+    function toggleOpen() {
+      updateArgs({ isOpen: !isOpen });
+    }
+    const btnRef = useRef(null);
+
+    return (
+      <>
+        <Button ref={btnRef} onClick={toggleOpen}>
+          Open
+        </Button>
+        <Modal {...args} onClose={toggleOpen} finalFocusRef={btnRef}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>Modal Title</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>{args.children}</ModalBody>
+            <ModalFooter>
+              <Button variant="primary" onClick={toggleOpen}>
+                Close
+              </Button>
+              <Button variant="secondary">Secondary action</Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </>
+    );
+  },
+};

src/components/Modal/Modal.tsx

@@ -0,0 +1,38 @@
+import { Modal as ChakraModal } from "@chakra-ui/react";
+import type { ModalProps as ChakraModalProps } from "@chakra-ui/react";
+
+export const Modal = ChakraModal;
+export interface ModalProps extends ChakraModalProps {}
+
+import { ModalBody as ChakraModalBody } from "@chakra-ui/react";
+import { ModalBodyProps as ChakraModalBodyProps } from "@chakra-ui/react";
+
+export const ModalBody = ChakraModalBody;
+export interface ModalBodyProps extends ChakraModalBodyProps {}
+
+import { ModalFooter as ChakraModalFooter } from "@chakra-ui/react";
+import { ModalFooterProps as ChakraModalFooterProps } from "@chakra-ui/react";
+
+export const ModalFooter = ChakraModalFooter;
+export interface ModalFooterProps extends ChakraModalFooterProps {}
+
+import { ModalHeader as ChakraModalHeader } from "@chakra-ui/react";
+import { ModalHeaderProps as ChakraModalHeaderProps } from "@chakra-ui/react";
+
+export const ModalHeader = ChakraModalHeader;
+export interface ModalHeaderProps extends ChakraModalHeaderProps {}
+
+import { ModalOverlay as ChakraModalOverlay } from "@chakra-ui/react";
+import { ModalOverlayProps as ChakraModalOverlayProps } from "@chakra-ui/react";
+
+export const ModalOverlay = ChakraModalOverlay;
+export interface ModalOverlayProps extends ChakraModalOverlayProps {}
+
+import { ModalContent as ChakraModalContent } from "@chakra-ui/react";
+import { ModalContentProps as ChakraModalContentProps } from "@chakra-ui/react";
+
+export const ModalContent = ChakraModalContent;
+export interface ModalContentProps extends ChakraModalContentProps {}
+
+import { ModalCloseButton as ChakraModalCloseButton } from "@chakra-ui/react";
+export const ModalCloseButton = ChakraModalCloseButton;

src/components/Modal/index.tsx

@@ -0,0 +1,18 @@
+export {
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+} from "./Modal";
+
+export type {
+  ModalProps,
+  ModalBodyProps,
+  ModalFooterProps,
+  ModalHeaderProps,
+  ModalOverlayProps,
+  ModalContentProps,
+} from "./Modal";

src/components/index.ts

@@ -9,3 +9,4 @@ export * from "./Select";
 export * from "./Drawer";
 export * from "./Table";
 export * from "./Transitions";
+export * from "./Modal";

src/theme/components/index.ts

@@ -10,6 +10,7 @@ import { selectTheme } from "./select";
 import { closeButtonTheme } from "./close-button";
 import { drawerTheme } from "./drawer";
 import { tableTheme } from "./table";
+import { modalTheme } from "./modal";
 
 export const components = {
   Accordion: accordionTheme,
@@ -24,4 +25,5 @@ export const components = {
   CloseButton: closeButtonTheme,
   Drawer: drawerTheme,
   Table: tableTheme,
+  Modal: modalTheme,
 };

src/theme/components/modal.ts

@@ -0,0 +1 @@
+export { modalTheme } from "@chakra-ui/theme/components/modal";