From cc3e83196c754e0106f2f9b10d3449dab1aac89a Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Mon, 25 Nov 2024 20:55:46 +0900
Subject: [PATCH 1/2] fix: component names of Input and Textarea

---
 pkgs/frontend/app/components/CommonInput.tsx    | 10 ++++++++++
 pkgs/frontend/app/components/CommonTextarea.tsx | 10 ++++++++++
 pkgs/frontend/app/components/Input.tsx          | 13 -------------
 pkgs/frontend/app/components/TextArea.tsx       | 13 -------------
 pkgs/frontend/app/routes/_index.tsx             | 15 ---------------
 5 files changed, 20 insertions(+), 41 deletions(-)
 create mode 100644 pkgs/frontend/app/components/CommonInput.tsx
 create mode 100644 pkgs/frontend/app/components/CommonTextarea.tsx
 delete mode 100644 pkgs/frontend/app/components/Input.tsx
 delete mode 100644 pkgs/frontend/app/components/TextArea.tsx

diff --git a/pkgs/frontend/app/components/CommonInput.tsx b/pkgs/frontend/app/components/CommonInput.tsx
new file mode 100644
index 0000000..df992c5
--- /dev/null
+++ b/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} />;
+};
diff --git a/pkgs/frontend/app/components/CommonTextarea.tsx b/pkgs/frontend/app/components/CommonTextarea.tsx
new file mode 100644
index 0000000..5704cad
--- /dev/null
+++ b/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} />;
+};
diff --git a/pkgs/frontend/app/components/Input.tsx b/pkgs/frontend/app/components/Input.tsx
deleted file mode 100644
index fdce19d..0000000
--- a/pkgs/frontend/app/components/Input.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {
-	Input as ChakraInput,
-	InputProps as ChakraInputProps,
-} from "@chakra-ui/react";
-
-interface InputProps extends Omit<ChakraInputProps, "value"> {
-	value: string | number;
-	onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const Input = ({ value, onChange }: InputProps) => {
-	return <ChakraInput value={value} onChange={onChange} />;
-};
diff --git a/pkgs/frontend/app/components/TextArea.tsx b/pkgs/frontend/app/components/TextArea.tsx
deleted file mode 100644
index 12257f7..0000000
--- a/pkgs/frontend/app/components/TextArea.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {
-	Textarea as ChakraTextarea,
-	TextareaProps as ChakraTextareaProps,
-} from "@chakra-ui/react";
-
-interface TextAreaProps extends Omit<ChakraTextareaProps, "value"> {
-	value: string;
-	onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}
-
-export const TextArea = ({ value, onChange }: TextAreaProps) => {
-	return <ChakraTextarea value={value} onChange={onChange} />;
-};
diff --git a/pkgs/frontend/app/routes/_index.tsx b/pkgs/frontend/app/routes/_index.tsx
index ef132ae..c0d811e 100644
--- a/pkgs/frontend/app/routes/_index.tsx
+++ b/pkgs/frontend/app/routes/_index.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
 	Box,
 	Button,
@@ -13,9 +12,6 @@ import {
 } from "@chakra-ui/react";
 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";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -25,20 +21,9 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
-	const [inputValue, setInputValue] = useState("Hello");
-	const [textareaValue, setTextareaValue] = useState("World");
-
 	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

From 47605ca723507639d2faeed78447f250ac92ecce Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Mon, 25 Nov 2024 21:37:32 +0900
Subject: [PATCH 2/2] feat: CommonDialog

---
 pkgs/frontend/app/components/CommonDialog.tsx | 22 ++++++++++++++
 pkgs/frontend/app/routes/_index.tsx           | 30 +++++++++++++++++++
 pkgs/frontend/package.json                    |  3 +-
 yarn.lock                                     |  5 ++++
 4 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 pkgs/frontend/app/components/CommonDialog.tsx

diff --git a/pkgs/frontend/app/components/CommonDialog.tsx b/pkgs/frontend/app/components/CommonDialog.tsx
new file mode 100644
index 0000000..b1d2730
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/pkgs/frontend/app/routes/_index.tsx b/pkgs/frontend/app/routes/_index.tsx
index c0d811e..b1c370e 100644
--- a/pkgs/frontend/app/routes/_index.tsx
+++ b/pkgs/frontend/app/routes/_index.tsx
@@ -10,8 +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 { CommonDialog } from "~/components/CommonDialog";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -20,6 +29,8 @@ export const meta: MetaFunction = () => {
 	];
 };
 
+const dialogTriggerReactNode = <Button variant="outline">Open</Button>;
+
 export default function Index() {
 	return (
 		<Box textAlign="center" fontSize="xl" pt="30vh">
@@ -29,6 +40,25 @@ export default function Index() {
 					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 />
diff --git a/pkgs/frontend/package.json b/pkgs/frontend/package.json
index b856e95..95ea5d5 100644
--- a/pkgs/frontend/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 74bf2ab..4954257 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9051,6 +9051,11 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-icons@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
+  integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"