ReactでStoryBookを利用する(Dialogを呼び出し)

はじめに

前回までの続きです。今回はStoryBookでDialogを呼び出す事を試してみたいと思います。

成果物

ソースコード

src/components/Button.tsx

import type React from "react";
import { useState } from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";

type Props = {
	label: string;
};

const MyButton: React.FC<Props> = ({ label }) => {
	const [open, setOpen] = useState(false);

	const handleClickOpen = () => {
		setOpen(true);
	};

	const handleClose = () => {
		setOpen(false);
	};

	return (
		<>
			<Button variant="contained" onClick={handleClickOpen}>
				{label}
			</Button>
			<Dialog open={open} onClose={handleClose}>
				<DialogTitle>Dialog Title</DialogTitle>
				<DialogContent>
					<DialogContentText>This is a simple dialog.</DialogContentText>
				</DialogContent>
				<DialogActions>
					<Button onClick={handleClose}>Close</Button>
				</DialogActions>
			</Dialog>
		</>
	);
};

export default MyButton;

src/components/Button.stories.tsx

import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import MyButton from "./Button";

export default {
	title: "Example/Button",
	component: MyButton,
} as Meta<typeof MyButton>;

type Story = StoryObj<typeof MyButton>;

export const Primary: Story = {
	args: {
		label: "Open Dialog",
	},
};

リファクタリング

src/components/Button.tsx

import type React from "react";
import { useState } from "react";
import Button from "@mui/material/Button";
import MyDialog from "./MyDialog";

type Props = {
	label: string;
};

const MyButton: React.FC<Props> = ({ label }) => {
	const [open, setOpen] = useState(false);

	const handleClickOpen = () => {
		setOpen(true);
	};

	const handleClose = () => {
		setOpen(false);
	};

	return (
		<>
			<Button variant="contained" onClick={handleClickOpen}>
				{label}
			</Button>
			<MyDialog open={open} onClose={handleClose} />
		</>
	);
};

export default MyButton;

src/components/MyDialog.tsx

import type React from "react";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Button from "@mui/material/Button";

type Props = {
	open: boolean;
	onClose: () => void;
};

const MyDialog: React.FC<Props> = ({ open, onClose }) => {
	return (
		<Dialog open={open} onClose={onClose}>
			<DialogTitle>Dialog Title</DialogTitle>
			<DialogContent>
				<DialogContentText>This is a simple dialog.</DialogContentText>
			</DialogContent>
			<DialogActions>
				<Button onClick={onClose}>Close</Button>
			</DialogActions>
		</Dialog>
	);
};

export default MyDialog;