Merge pull request #14163 from TylerAPfledderer/feat/shadcn-modal

[ShadCN] Migrate Modal component to ShadCN/Tailwind

Author: pettinarip

src/components/FileContributors.tsx

@@ -12,12 +12,15 @@ import type { ChildOnlyProp, FileContributor } from "@/lib/types"
 
 import { Button } from "@/components/Buttons"
 import InlineLink from "@/components/Link"
-import Modal from "@/components/Modal"
 import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import Modal from "./ui/dialog-modal"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
 const ContributorList = ({ children }: Required<ChildOnlyProp>) => (
   <UnorderedList maxH="2xs" m={0} mt={6} overflowY="scroll">
     {children}
@@ -61,12 +64,14 @@ const FileContributors = ({
         date: Date.now().toString(),
       } as FileContributor)
 
+  const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
+
   return (
     <>
       <Modal
-        isOpen={isModalOpen}
-        onClose={() => setModalOpen(false)}
-        size={{ base: "full", md: "xl" }}
+        open={isModalOpen}
+        onOpenChange={(open) => setModalOpen(open)}
+        size={modalSize}
         title={<Translation id="contributors" />}
       >
         <Translation id="contributors-thanks" />

src/components/Modal/index.tsx

@@ -1,11 +1,13 @@
 import { QuizStatus } from "@/lib/types"
 
-import Modal from "../Modal"
+import Modal, { type ModalProps } from "../ui/dialog-modal"
 import { Center } from "../ui/flex"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
 type QuizzesModalProps = {
   isQuizModalOpen: boolean
-  onQuizModalClose: () => void
+  onQuizModalOpenChange: (open: boolean) => void
   children: React.ReactNode
   quizStatus: QuizStatus
 }
@@ -14,7 +16,7 @@ const QuizzesModal = ({
   children,
   quizStatus,
   isQuizModalOpen,
-  onQuizModalClose,
+  onQuizModalOpenChange,
   ...props
 }: QuizzesModalProps) => {
   // TODO: remove bang in utility class names when Modal is migrated
@@ -25,11 +27,13 @@ const QuizzesModal = ({
     return "!bg-error-light dark:!bg-error-dark"
   }
 
+  const size = useBreakpointValue<ModalProps["size"]>({ base: "xl", md: "md" })!
+
   return (
     <Modal
-      isOpen={isQuizModalOpen}
-      onClose={onQuizModalClose}
-      size={{ base: "full", md: "xl" }}
+      open={isQuizModalOpen}
+      onOpenChange={onQuizModalOpenChange}
+      size={size}
       contentProps={{ className: getStatusColorClass() }}
       {...props}
     >

src/components/Quiz/QuizzesModal.tsx

@@ -17,7 +17,7 @@ const meta = {
   args: {
     isQuizModalOpen: true,
     quizStatus: "neutral",
-    onQuizModalClose: fn(),
+    onQuizModalOpenChange: fn(),
     children: "",
     widgetProps: {
       quizKey: LAYER_2_QUIZ_KEY,

src/components/Quiz/stories/QuizModal.stories.tsx

@@ -1,35 +1,9 @@
 import React from "react"
-import {
-  type ModalContentProps,
-  type ModalProps,
-  UseDisclosureReturn,
-} from "@chakra-ui/react"
 
-import Modal from "../Modal"
+import Modal, { type ModalProps } from "../ui/dialog-modal"
 
-type SimulatorModalProps = ModalContentProps &
-  Pick<ModalProps, "size"> & {
-    isOpen: UseDisclosureReturn["isOpen"]
-    onClose: UseDisclosureReturn["onClose"]
-    children?: React.ReactNode
-  }
+type SimulatorModalProps = Omit<ModalProps, "size">
 
-export const SimulatorModal = ({
-  isOpen,
-  onClose,
-  children,
-  ...restProps
-}: SimulatorModalProps) => {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      isCentered
-      size="full"
-      scrollBehavior="outside"
-      contentProps={restProps}
-    >
-      {children}
-    </Modal>
-  )
+export const SimulatorModal = (props: SimulatorModalProps) => {
+  return <Modal size="xl" {...props} isSimulator />
 }

src/components/Simulator/SimulatorModal.tsx

@@ -4,6 +4,8 @@ import { Flex, type FlexProps, Grid } from "@chakra-ui/react"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import type { ModalProps } from "../ui/dialog-modal"
+
 import { PATH_ID_QUERY_PARAM, SIMULATOR_ID } from "./constants"
 import { Explanation } from "./Explanation"
 import type {
@@ -41,14 +43,16 @@ export const Simulator = ({ children, data }: SimulatorProps) => {
   }
 
   // When simulator closed: log event, clear URL params and close modal
-  const onClose = (): void => {
-    trackCustomEvent({
-      eventCategory: "simulator",
-      eventAction: `${pathId}_click`,
-      eventName: `close-from-step-${step + 1}`,
-    })
-    // Clearing URL Params will reset pathId, and close modal
-    clearUrlParams()
+  const onClose: ModalProps["onOpenChange"] = (open) => {
+    if (!open) {
+      trackCustomEvent({
+        eventCategory: "simulator",
+        eventAction: `${pathId}_click`,
+        eventName: `close-from-step-${step + 1}`,
+      })
+      // Clearing URL Params will reset pathId, and close modal
+      clearUrlParams()
+    }
   }
 
   // Remove URL search param if invalid pathId
@@ -181,7 +185,7 @@ export const Simulator = ({ children, data }: SimulatorProps) => {
           })}
         </Flex>
       </Flex>
-      <SimulatorModal isOpen={isOpen} onClose={onClose}>
+      <SimulatorModal open={isOpen} onOpenChange={onClose}>
         <Template>
           {explanation ? (
             <Explanation

src/components/Simulator/index.tsx

@@ -1,18 +1,20 @@
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 
-import ModalComponent from "."
+import ModalComponent from "../dialog-modal"
 
 const meta = {
   title: "Molecules/Overlay Content/Modal",
   component: ModalComponent,
   args: {
-    isOpen: true,
+    defaultOpen: true,
     title: "Modal Title",
     children:
       "This is the base component to be used in the modal window. Please change the text to preview final content for ethereum.org",
-    actionButtonLabel: "Save",
-    // Required prop, but not used in the current stories
-    onClose: () => {},
+    actionButton: {
+      label: "Save",
+      onClick: fn(),
+    },
   },
 } satisfies Meta<typeof ModalComponent>
 
@@ -22,8 +24,8 @@ type Story = StoryObj<typeof meta>
 
 export const Modal: Story = {}
 
-export const Full: Story = {
+export const Xl: Story = {
   args: {
-    size: "full",
+    size: "xl",
   },
 }