(components) feature: upgraded the Modal to @wethegit/react-modal v3

.changeset/ten-actors-perform.md

@@ -0,0 +1,5 @@
+---
+"@wethegit/components": major
+---
+
+Upgraded the Modal component to use the latest (v3) @wethegit/react-modal version and the documentation is updated. For more information on what has changed on the latest version, head over to [@wethegit/react-modal changelog](https://github.com/wethegit/react-modal/blob/main/CHANGELOG.md)

packages/wethegit-components/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@wethegit/react-hooks": "^3.0.1",
-    "@wethegit/react-modal": "^2.0.0",
+    "@wethegit/react-modal": "^3.0.0",
     "react": "17 - 18",
     "react-dom": "17 - 18",
     "typescript": "^5.2.2"
@@ -57,7 +57,7 @@
     "@storybook/manager-api": "^8.1.11",
     "@storybook/theming": "^8.1.11",
     "@wethegit/react-hooks": "^3.0.1",
-    "@wethegit/react-modal": "^2.0.0",
+    "@wethegit/react-modal": "^3.0.0",
     "eslint": "^8.15.0",
     "eslint-config-custom": "*",
     "eslint-plugin-storybook": "^0.8.0",
@@ -75,4 +75,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/wethegit-components/src/components/modal/modal.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { within, userEvent, waitFor , expect } from "@storybook/test"
+import { within, userEvent, waitFor, expect } from "@storybook/test"
 import { UserPreferencesProvider } from "@wethegit/react-hooks"
 import { useModal } from "@wethegit/react-modal"
 import { useRef } from "react"
@@ -29,20 +29,27 @@ type Story = StoryObj<typeof Modal>
 
 export const Default: Story = {
   render: (args) => {
+    const modalRootRef = useRef<HTMLDivElement>(null)
     return (
-      <Modal {...args} appendToBody={false}>
-        <p style={{ color: "black", margin: 0 }}>
-          <strong>Close</strong> button doesn't work becayse inside the story we use the{" "}
-          <code>isOpen</code> control.
-        </p>
-      </Modal>
+      <>
+        <div ref={modalRootRef}></div>
+        {modalRootRef.current && (
+          <Modal {...args} renderTo={modalRootRef.current}>
+            <p style={{ color: "black", margin: 0 }}>
+              <strong>Close</strong> button doesn't work because inside the story we use
+              the <code>isOpen</code> control.
+            </p>
+          </Modal>
+        )}
+      </>
     )
   },
 }
 
 export const WithButtonTrigger: Story = {
   render: () => {
     const triggerRef = useRef<HTMLButtonElement>(null)
+    const modalRootRef = useRef<HTMLDivElement>(null)
     const { isOpen, toggle } = useModal({
       triggerRef,
     })
@@ -69,9 +76,17 @@ export const WithButtonTrigger: Story = {
         >
           {isOpen ? "Close" : "Open"} Modal
         </button>
-        <Modal isOpen={isOpen} toggle={toggle} aria-label="My Modal">
-          <p style={{ color: "black", margin: 0 }}>Hey! The modal is open!</p>
-        </Modal>
+        <div ref={modalRootRef}></div>
+        {modalRootRef.current && (
+          <Modal
+            renderTo={modalRootRef.current}
+            isOpen={isOpen}
+            toggle={toggle}
+            aria-label="My Modal"
+          >
+            <p style={{ color: "black", margin: 0 }}>Hey! The modal is open!</p>
+          </Modal>
+        )}
       </div>
     )
   },

packages/wethegit-components/src/components/modal/modal.tsx

@@ -29,6 +29,10 @@ export interface ModalProps extends WTCModalProps {
    * The modal class name.
    */
   className?: string
+  /**
+   * The modal will be appended to the passed element instead of being rendered in place
+   **/
+  renderTo: HTMLElement
 }
 
 /**
@@ -41,6 +45,7 @@ export function Modal({
   toggle,
   className,
   contentClassName,
+  renderTo,
   ...props
 }: ModalProps) {
   const { prefersReducedMotion } = useUserPrefs()
@@ -59,6 +64,7 @@ export function Modal({
     <WTCModal
       style={stylesVars}
       className={classnames([styles.modal, animate && styles.modalOpen, className])}
+      renderTo={renderTo}
       {...props}
     >
       <ModalBackdrop className={styles.modalBackdrop} onClick={toggle} />

packages/wethegit-components/src/components/modal/readme.mdx

@@ -20,9 +20,24 @@ First, import the global modal styles from `@wethegit/react-modal` into your glo
 @import "@wethegit/react-modal/style.css";
 ```
 
-The `<Modal>` component takes a `trigger` prop that is a function which receives a `toggle` function as its only argument and should return the element that will trigger the modal.
+Modal Component Props
 
-It also handles reduced motion by default and because of that you are required to make sure that the modal component renders inside the [UserPreferencesProvider](https://wethegit.github.io/react-hooks/user-preferences-provider).
+Here are the props you can use with the Modal component:
+
+- isOpen: Whether the modal is open or not.
+- toggle: A function that toggles the modal.
+- children (optional): The modal content.
+- className (optional): The modal class name.
+- contentClassName (optional): The modal content class name.
+- renderTo: The modal will be appended to the passed element instead of being rendered in place
+
+Using the useModal Hook
+
+The `useModal` hook takes in an object with `triggerRef` or `hash` and returns `toggle` callback and `isOpen` boolean which can be passed directly to the `<Modal>` that are required by this component.
+
+Handling Reduced Motion
+
+The `Modal` also handles reduced motion by default and because of that you are required to make sure that the modal component renders inside the [UserPreferencesProvider](https://wethegit.github.io/react-hooks/user-preferences-provider).
 
 ```tsx
 import { useRef } from "react"
@@ -33,6 +48,8 @@ import { Modal } from "@local/components"
 
 function Page() {
   const triggerRef = useRef<HTMLButtonElement>(null)
+  const modalRootRef = useRef<HTMLDivElement>(null)
+
   const props = useModal({
     triggerRef,
   })
@@ -43,13 +60,16 @@ function Page() {
         Open Modal
       </button>
       <UserPreferencesProvider>
-        <Modal {...props}>
-          <h1>Modal Content</h1>
-          <p>
-            Pariatur occaecat quis aliquip excepteur adipisicing minim ipsum qui proident
-            qui voluptate ut sunt.
-          </p>
-        </Modal>
+        <div ref={modalRootRef}></div>
+        {modalRootRef.current && (
+          <Modal {...props} renderTo={modalRootRef.current}>
+            <h1>Modal Content</h1>
+            <p>
+              Pariatur occaecat quis aliquip excepteur adipisicing minim ipsum qui
+              proident qui voluptate ut sunt.
+            </p>
+          </Modal>
+        )}
       </UserPreferencesProvider>
     </>
   )