Add Toast

src/components/toast/Toast.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { toast } from "react-toastify";
+import { Toast } from "./Toast";
+import { Toaster } from "./Toaster";
+
+export default {
+  component: Toast,
+  title: "toast/Toast",
+};
+
+export const Default = (): JSX.Element => {
+  return (
+    <div>
+      <button onClick={() => toast(<Toast>test</Toast>)}>toaster</button>
+      <Toaster />
+    </div>
+  );
+};

src/components/toast/Toast.test.tsx

@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom/extend-expect";
+import { screen } from "@testing-library/react";
+import React from "react";
+import { render } from "../../test-utils";
+import { Default } from "./Toast.stories";
+
+describe("Toast", () => {
+  test("should toast alert", async () => {
+    render(<Default />);
+    expect(screen.queryAllByRole("alert")).toHaveLength(0);
+    screen.getByRole("button").click();
+    await expect(screen.findAllByRole("alert")).resolves.toBeDefined();
+  });
+});

src/components/toast/Toast.tsx

@@ -0,0 +1,13 @@
+import Alert, { AlertProps } from "@mui/material/Alert";
+import React from "react";
+
+export type ToastProps = AlertProps;
+export const Toast = ({ sx, ...delegated }: ToastProps): JSX.Element => {
+  return (
+    <Alert
+      icon={false}
+      sx={{ backgroundColor: "inherit", color: "inherit", ...sx }}
+      {...delegated}
+    />
+  );
+};

src/components/toast/ToastHavingDetailInfo.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { toast } from "react-toastify";
+import { ErrorMessage } from "../ErrorMessage";
+import { ToastHavingDetailModal } from "./ToastHavingDetailInfo";
+import { Toaster } from "./Toaster";
+
+export default {
+  component: ToastHavingDetailModal,
+  title: "toast/ToastHavingDetailModal",
+};
+
+export const Default = (): JSX.Element => {
+  return (
+    <div>
+      <button
+        onClick={() =>
+          toast(
+            <ToastHavingDetailModal
+              detailContent={
+                <ErrorMessage
+                  reason="This is test"
+                  instruction="Don't worry!"
+                />
+              }
+            >
+              test
+            </ToastHavingDetailModal>
+          )
+        }
+      >
+        toaster
+      </button>
+      <Toaster />
+    </div>
+  );
+};

src/components/toast/ToastHavingDetailInfo.test.tsx

@@ -0,0 +1,19 @@
+import "@testing-library/jest-dom/extend-expect";
+import { getByRole } from "@testing-library/dom";
+import { screen } from "@testing-library/react";
+import React from "react";
+import { render } from "../../test-utils";
+import { Default } from "./ToastHavingDetailInfo.stories";
+
+describe("Toast", () => {
+  test("should toast alert having button that display alert dialog", async () => {
+    render(<Default />);
+    expect(screen.queryAllByRole("alert")).toHaveLength(0);
+    screen.getByRole("button").click();
+    await expect(screen.findAllByRole("alert")).resolves.toBeDefined();
+
+    const toast = screen.getAllByRole("alert")[0];
+    getByRole(toast, "button").click();
+    expect(screen.getByRole("alertdialog")).toBeDefined();
+  });
+});

src/components/toast/ToastHavingDetailInfo.tsx

@@ -0,0 +1,44 @@
+import Button, { ButtonProps } from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import React, { useState, ReactNode } from "react";
+import { DialogCloseButton } from "../dialog/DialogCloseButton";
+import { DialogWrapper } from "../dialog/DialogWrapper";
+import { Toast, ToastProps } from "./Toast";
+
+export type ToastHavingDetailModalProps = {
+  detailContent: ReactNode;
+  detailButtonProps?: Omit<ButtonProps, "onClick">;
+} & Omit<ToastProps, "action">;
+export const ToastHavingDetailModal = ({
+  detailContent,
+  detailButtonProps,
+  ...delegated
+}: ToastHavingDetailModalProps): JSX.Element => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Toast
+        {...delegated}
+        action={
+          <Button
+            onClick={(e) => {
+              e.stopPropagation();
+              setOpen(true);
+            }}
+            color="inherit"
+            variant="text"
+            {...detailButtonProps}
+          >
+            {detailButtonProps?.children ?? "Detail"}
+          </Button>
+        }
+      />
+      <Dialog open={open} onClose={() => setOpen(false)} role="alertdialog">
+        <DialogWrapper>
+          <DialogCloseButton onClick={() => setOpen(false)} />
+          {detailContent}
+        </DialogWrapper>
+      </Dialog>
+    </>
+  );
+};

src/components/toast/Toaster.tsx

@@ -0,0 +1,27 @@
+import { useTheme } from "@mui/material/styles";
+import React from "react";
+import { ToastContainer, ToastContainerProps } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+export type ToasterProps = ToastContainerProps;
+export const Toaster = ({
+  position,
+  theme,
+  progressStyle,
+  limit,
+  ...delegated
+}: ToasterProps): JSX.Element => {
+  const muiTheme = useTheme();
+  return (
+    <ToastContainer
+      position={position ?? "bottom-left"}
+      limit={limit ?? 3}
+      theme={theme ?? "colored"}
+      progressStyle={{
+        backgroundColor: muiTheme.palette.grey[600],
+        ...progressStyle,
+      }}
+      {...delegated}
+    />
+  );
+};