Merge pull request #179 from hackdays-io/feature/dialog-chakra

ChakraUI V3によるCommonDialogコンポーネント

pkgs/frontend/app/components/CommonDialog.tsx

@@ -0,0 +1,22 @@
+import {
+	DialogContent,
+	DialogRoot,
+	DialogTrigger,
+} from "~/components/ui/dialog";
+
+interface CommonDialogProps {
+	dialogTriggerReactNode?: React.ReactNode;
+	children?: React.ReactNode;
+}
+
+export const CommonDialog = ({
+	dialogTriggerReactNode,
+	children,
+}: CommonDialogProps) => {
+	return (
+		<DialogRoot>
+			<DialogTrigger asChild>{dialogTriggerReactNode}</DialogTrigger>
+			<DialogContent>{children}</DialogContent>
+		</DialogRoot>
+	);
+};

pkgs/frontend/app/components/CommonInput.tsx

@@ -0,0 +1,10 @@
+import { Input, InputProps } from "@chakra-ui/react";
+
+interface CommonInputProps extends Omit<InputProps, "value"> {
+	value: string | number;
+	onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const CommonInput = ({ value, onChange }: CommonInputProps) => {
+	return <Input value={value} onChange={onChange} />;
+};

pkgs/frontend/app/components/CommonTextarea.tsx

@@ -0,0 +1,10 @@
+import { Textarea, TextareaProps } from "@chakra-ui/react";
+
+interface CommonTextAreaProps extends Omit<TextareaProps, "value"> {
+	value: string;
+	onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+export const CommonTextArea = ({ value, onChange }: CommonTextAreaProps) => {
+	return <Textarea value={value} onChange={onChange} />;
+};

pkgs/frontend/app/routes/_index.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
 	Box,
 	Button,
@@ -11,11 +10,17 @@ import {
 	Skeleton,
 	VStack,
 } from "@chakra-ui/react";
+import {
+	DialogActionTrigger,
+	DialogBody,
+	DialogCloseTrigger,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "~/components/ui/dialog";
 import type { MetaFunction } from "@remix-run/node";
 import { ColorModeToggle } from "../components/color-mode-toggle";
-import { Input } from "~/components/Input";
-import { TextArea } from "~/components/TextArea";
-import { CommonButton } from "~/components/CommonButton";
+import { CommonDialog } from "~/components/CommonDialog";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -24,26 +29,36 @@ export const meta: MetaFunction = () => {
 	];
 };
 
-export default function Index() {
-	const [inputValue, setInputValue] = useState("Hello");
-	const [textareaValue, setTextareaValue] = useState("World");
+const dialogTriggerReactNode = <Button variant="outline">Open</Button>;
 
+export default function Index() {
 	return (
 		<Box textAlign="center" fontSize="xl" pt="30vh">
 			<VStack gap="8">
-				<Input
-					value={inputValue}
-					onChange={(e) => setInputValue(e.target.value)}
-				/>
-				<TextArea
-					value={textareaValue}
-					onChange={(e) => setTextareaValue(e.target.value)}
-				/>
 				<img alt="chakra logo" src="/static/logo.svg" width="80" height="80" />
 				<Heading size="2xl" letterSpacing="tight">
 					Welcome to Chakra UI v3 + Remix
 				</Heading>
 
+				<CommonDialog dialogTriggerReactNode={dialogTriggerReactNode}>
+					<DialogHeader>
+						<DialogTitle>Dialog Title</DialogTitle>
+					</DialogHeader>
+					<DialogBody>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+							eiusmod tempor incididunt ut labore et dolore magna aliqua.
+						</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogActionTrigger asChild>
+							<Button variant="outline">Cancel</Button>
+						</DialogActionTrigger>
+						<Button>Save</Button>
+					</DialogFooter>
+					<DialogCloseTrigger />
+				</CommonDialog>
+
 				<HStack gap="10">
 					<Checkbox.Root defaultChecked>
 						<Checkbox.HiddenInput />

pkgs/frontend/package.json

@@ -23,7 +23,8 @@
     "lucide-react": "^0.399.0",
     "next-themes": "^0.4.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.15.0",