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";