feat: isolate image with modal

apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx

@@ -1,13 +1,5 @@
 import { useRouter } from "next/router";
-import {
-  Box,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs,
-  tabClasses,
-  tabPanelClasses,
-} from "@mui/joy";
+import { Box, Tab, TabList, TabPanel, Tabs, tabClasses } from "@mui/joy";
 import { AppHead } from "@chair-flight/react/components";
 import {
   LayoutModule,
@@ -61,11 +53,6 @@ const Page: NextPage<PageProps> = ({
     questionId,
   ] as Breadcrumbs;
 
-  console.log({
-    tabClasses,
-    tabPanelClasses,
-  });
-
   return (
     <LayoutModule
       questionBank={questionBank}

libs/react/components/src/image-with-modal/image-with-modal.stories.tsx

@@ -0,0 +1,38 @@
+import { ImageWithModal } from "./image-with-modal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof ImageWithModal>;
+
+const prefix =
+  "https://www.chair-flight.com/content/content-question-bank-atpl/media";
+
+export const Playground: Story = {
+  args: {
+    href: "image 1",
+    width: 200,
+    height: 200,
+  },
+  argTypes: {
+    href: {
+      defaultValue: "image 1",
+      options: ["image 1", "image 2", "image 3", "image 4"],
+      mapping: {
+        "image 1": `${prefix}/facd988e59bbec4bfd2c2ab4427a45ed.jpg`,
+        "image 2": `${prefix}/ede35b3c1eb70d78a1ed95c8d1410148.jpg`,
+        "image 3": `${prefix}/eb38917314ded07e0c84adfe1a2c84c1.jpg`,
+        "Not Found Image": `${prefix}/potato.jpg`,
+      },
+      control: {
+        type: "select",
+      },
+    },
+  },
+};
+
+const meta: Meta<typeof ImageWithModal> = {
+  title: "Components/ImageWithModal",
+  component: ImageWithModal,
+  tags: ["autodocs"],
+};
+
+export default meta;

libs/react/components/src/image-with-modal/image-with-modal.tsx

@@ -0,0 +1,88 @@
+import { forwardRef, useState } from "react";
+import { default as Image } from "next/image";
+import { Sheet, Modal, ModalClose, ModalDialog, Stack } from "@mui/joy";
+import { useDisclose } from "../hooks/use-disclose";
+import { Ups } from "../ups";
+import type { SxProps } from "@mui/joy/styles/types";
+
+export type ImageWithModalProps = {
+  href: string;
+  alt: string;
+  width: number;
+  height: number;
+  sx?: SxProps;
+};
+
+/**
+ * Image component that, when clicks, pops out a modal with an image as big
+ * as it can possibly be.
+ */
+export const ImageWithModal = forwardRef<HTMLDivElement, ImageWithModalProps>(
+  ({ href, alt, width, height, sx }, ref) => {
+    const [error, setError] = useState(false);
+    const imageModal = useDisclose();
+
+    return (
+      <Sheet
+        ref={ref}
+        sx={{
+          width,
+          height,
+          p: 0.5,
+          cursor: "pointer",
+          backgroundColor: "background.paper",
+          "& > img": { objectFit: "contain" },
+          ...sx,
+        }}
+      >
+        {error ? (
+          <Ups
+            sx={{
+              flex: "initial",
+              width: "100%",
+              height: "100%",
+              minHeight: 0,
+              "& svg": {
+                width: width / 2,
+                height: height / 2,
+              },
+              "& h3": {
+                fontSize: "18px",
+              },
+            }}
+            message="Not Found"
+          />
+        ) : (
+          <Image
+            onClick={imageModal.open}
+            src={href}
+            alt={alt}
+            width={width - 10}
+            height={height - 10}
+            onError={() => setError(true)}
+          />
+        )}
+        <Modal open={imageModal.isOpen} onClose={imageModal.close}>
+          <ModalDialog>
+            <ModalClose variant="solid" />
+            <Stack>
+              <img
+                src={href}
+                alt={alt}
+                style={{
+                  objectFit: "contain",
+                  maxWidth: "90vw",
+                  maxHeight: "90vh",
+                  width: "auto",
+                  height: "auto",
+                }}
+              />
+            </Stack>
+          </ModalDialog>
+        </Modal>
+      </Sheet>
+    );
+  },
+);
+
+ImageWithModal.displayName = "ImageWithModal";

libs/react/components/src/image-with-modal/index.ts

@@ -0,0 +1 @@
+export { ImageWithModal } from "./image-with-modal";

libs/react/components/src/index.ts

@@ -11,7 +11,8 @@ export * from "./hook-form";
 export * from "./hooks/use-disclose";
 export * from "./hooks/use-media-query";
 export * from "./hooks/use-window-resize";
-export * from "./image-viewer/image-viewer";
+export * from "./image-viewer";
+export * from "./image-with-modal";
 export * from "./input-slider";
 export * from "./learning-objectives-list";
 export * from "./markdown";