From c8be9deee4caf2a83333333436ddc827ad0fbfcf Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:37:12 +0900
Subject: [PATCH 1/3] feat: added original button component

---
 pkgs/frontend/app/components/button.tsx |  35 ++++++
 pkgs/frontend/app/routes/_index.tsx     | 137 ++++++++++++------------
 2 files changed, 105 insertions(+), 67 deletions(-)
 create mode 100644 pkgs/frontend/app/components/button.tsx

diff --git a/pkgs/frontend/app/components/button.tsx b/pkgs/frontend/app/components/button.tsx
new file mode 100644
index 0000000..ec0e6c7
--- /dev/null
+++ b/pkgs/frontend/app/components/button.tsx
@@ -0,0 +1,35 @@
+import {
+	Button as ChakraButton,
+	ButtonProps as ChakraButtonProps,
+} from "@chakra-ui/react";
+
+interface ButtonProps extends Omit<ChakraButtonProps, "width"> {
+	children: React.ReactNode;
+	width?: "full" | number;
+	size?: "sm" | "md" | "lg";
+	backgroundColor?: string;
+	color?: string;
+}
+
+export const Button = ({
+	children,
+	width = "full",
+	size = "md",
+	backgroundColor,
+	color,
+	...props
+}: ButtonProps) => {
+	return (
+		<ChakraButton
+			w={width === "full" ? "100%" : width}
+			size={size}
+			backgroundColor={backgroundColor}
+			color={color}
+			{...props}
+		>
+			{children}
+		</ChakraButton>
+	);
+};
+
+export default Button;
diff --git a/pkgs/frontend/app/routes/_index.tsx b/pkgs/frontend/app/routes/_index.tsx
index 3e050f4..c8d067b 100644
--- a/pkgs/frontend/app/routes/_index.tsx
+++ b/pkgs/frontend/app/routes/_index.tsx
@@ -1,79 +1,82 @@
 import {
-  Box,
-  Button,
-  Checkbox,
-  ClientOnly,
-  HStack,
-  Heading,
-  Progress,
-  RadioGroup,
-  Skeleton,
-  VStack,
-} from "@chakra-ui/react"
-import type { MetaFunction } from "@remix-run/node"
-import { ColorModeToggle } from "../components/color-mode-toggle"
+	Box,
+	Checkbox,
+	ClientOnly,
+	HStack,
+	Heading,
+	Progress,
+	RadioGroup,
+	Skeleton,
+	VStack,
+} from "@chakra-ui/react";
+import type { MetaFunction } from "@remix-run/node";
+import { ColorModeToggle } from "../components/color-mode-toggle";
+import { Button } from "~/components/button";
 
 export const meta: MetaFunction = () => {
-  return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
-  ]
-}
+	return [
+		{ title: "New Remix App" },
+		{ name: "description", content: "Welcome to Remix!" },
+	];
+};
 
 export default function Index() {
-  return (
-    <Box textAlign="center" fontSize="xl" pt="30vh">
-      <VStack gap="8">
-        <img alt="chakra logo" src="/static/logo.svg" width="80" height="80" />
-        <Heading size="2xl" letterSpacing="tight">
-          Welcome to Chakra UI v3 + Remix
-        </Heading>
+	return (
+		<Box textAlign="center" fontSize="xl" pt="30vh">
+			<Button width="full" backgroundColor="red" size="lg" color="blue">
+				<>Click me</>
+			</Button>
+			<VStack gap="8">
+				<img alt="chakra logo" src="/static/logo.svg" width="80" height="80" />
+				<Heading size="2xl" letterSpacing="tight">
+					Welcome to Chakra UI v3 + Remix
+				</Heading>
 
-        <HStack gap="10">
-          <Checkbox.Root defaultChecked>
-            <Checkbox.HiddenInput />
-            <Checkbox.Control>
-              <Checkbox.Indicator />
-            </Checkbox.Control>
-            <Checkbox.Label>Checkbox</Checkbox.Label>
-          </Checkbox.Root>
+				<HStack gap="10">
+					<Checkbox.Root defaultChecked>
+						<Checkbox.HiddenInput />
+						<Checkbox.Control>
+							<Checkbox.Indicator />
+						</Checkbox.Control>
+						<Checkbox.Label>Checkbox</Checkbox.Label>
+					</Checkbox.Root>
 
-          <RadioGroup.Root display="inline-flex" defaultValue="1">
-            <RadioGroup.Item value="1" mr="2">
-              <RadioGroup.ItemHiddenInput />
-              <RadioGroup.ItemControl>
-                <RadioGroup.ItemIndicator />
-              </RadioGroup.ItemControl>
-              <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
-            </RadioGroup.Item>
+					<RadioGroup.Root display="inline-flex" defaultValue="1">
+						<RadioGroup.Item value="1" mr="2">
+							<RadioGroup.ItemHiddenInput />
+							<RadioGroup.ItemControl>
+								<RadioGroup.ItemIndicator />
+							</RadioGroup.ItemControl>
+							<RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
+						</RadioGroup.Item>
 
-            <RadioGroup.Item value="2">
-              <RadioGroup.ItemHiddenInput />
-              <RadioGroup.ItemControl>
-                <RadioGroup.ItemIndicator />
-              </RadioGroup.ItemControl>
-              <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
-            </RadioGroup.Item>
-          </RadioGroup.Root>
-        </HStack>
+						<RadioGroup.Item value="2">
+							<RadioGroup.ItemHiddenInput />
+							<RadioGroup.ItemControl>
+								<RadioGroup.ItemIndicator />
+							</RadioGroup.ItemControl>
+							<RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
+						</RadioGroup.Item>
+					</RadioGroup.Root>
+				</HStack>
 
-        <Progress.Root width="300px" value={65} striped animated>
-          <Progress.Track>
-            <Progress.Range />
-          </Progress.Track>
-        </Progress.Root>
+				<Progress.Root width="300px" value={65} striped animated>
+					<Progress.Track>
+						<Progress.Range />
+					</Progress.Track>
+				</Progress.Root>
 
-        <HStack>
-          <Button>Lets go</Button>
-          <Button variant="outline">bun install @chakra-ui/react</Button>
-        </HStack>
-      </VStack>
+				<HStack>
+					<Button>Lets go</Button>
+					<Button variant="outline">bun install @chakra-ui/react</Button>
+				</HStack>
+			</VStack>
 
-      <Box pos="absolute" top="4" right="4">
-        <ClientOnly fallback={<Skeleton w="10" h="10" rounded="md" />}>
-          <ColorModeToggle />
-        </ClientOnly>
-      </Box>
-    </Box>
-  )
+			<Box pos="absolute" top="4" right="4">
+				<ClientOnly fallback={<Skeleton w="10" h="10" rounded="md" />}>
+					<ColorModeToggle />
+				</ClientOnly>
+			</Box>
+		</Box>
+	);
 }

From fe7754e3b7cd0884ffa43f79991ba46e12e93ae3 Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Mon, 25 Nov 2024 19:21:07 +0900
Subject: [PATCH 2/3] refactor: rename CommonButton

---
 .../components/{button.tsx => CommonButton.tsx} | 17 +++++++----------
 pkgs/frontend/app/routes/_index.tsx             |  7 ++++---
 2 files changed, 11 insertions(+), 13 deletions(-)
 rename pkgs/frontend/app/components/{button.tsx => CommonButton.tsx} (58%)

diff --git a/pkgs/frontend/app/components/button.tsx b/pkgs/frontend/app/components/CommonButton.tsx
similarity index 58%
rename from pkgs/frontend/app/components/button.tsx
rename to pkgs/frontend/app/components/CommonButton.tsx
index ec0e6c7..bc1dc6d 100644
--- a/pkgs/frontend/app/components/button.tsx
+++ b/pkgs/frontend/app/components/CommonButton.tsx
@@ -1,9 +1,6 @@
-import {
-	Button as ChakraButton,
-	ButtonProps as ChakraButtonProps,
-} from "@chakra-ui/react";
+import { Button, ButtonProps } from "@chakra-ui/react";
 
-interface ButtonProps extends Omit<ChakraButtonProps, "width"> {
+interface CommonButtonProps extends Omit<ButtonProps, "width"> {
 	children: React.ReactNode;
 	width?: "full" | number;
 	size?: "sm" | "md" | "lg";
@@ -11,16 +8,16 @@ interface ButtonProps extends Omit<ChakraButtonProps, "width"> {
 	color?: string;
 }
 
-export const Button = ({
+export const CommonButton = ({
 	children,
 	width = "full",
 	size = "md",
 	backgroundColor,
 	color,
 	...props
-}: ButtonProps) => {
+}: CommonButtonProps) => {
 	return (
-		<ChakraButton
+		<Button
 			w={width === "full" ? "100%" : width}
 			size={size}
 			backgroundColor={backgroundColor}
@@ -28,8 +25,8 @@ export const Button = ({
 			{...props}
 		>
 			{children}
-		</ChakraButton>
+		</Button>
 	);
 };
 
-export default Button;
+export default CommonButton;
diff --git a/pkgs/frontend/app/routes/_index.tsx b/pkgs/frontend/app/routes/_index.tsx
index c8d067b..fef0165 100644
--- a/pkgs/frontend/app/routes/_index.tsx
+++ b/pkgs/frontend/app/routes/_index.tsx
@@ -1,5 +1,6 @@
 import {
 	Box,
+	Button,
 	Checkbox,
 	ClientOnly,
 	HStack,
@@ -11,7 +12,7 @@ import {
 } from "@chakra-ui/react";
 import type { MetaFunction } from "@remix-run/node";
 import { ColorModeToggle } from "../components/color-mode-toggle";
-import { Button } from "~/components/button";
+import { CommonButton } from "~/components/CommonButton";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -23,9 +24,9 @@ export const meta: MetaFunction = () => {
 export default function Index() {
 	return (
 		<Box textAlign="center" fontSize="xl" pt="30vh">
-			<Button width="full" backgroundColor="red" size="lg" color="blue">
+			<CommonButton width="full" backgroundColor="red" size="lg" color="blue">
 				<>Click me</>
-			</Button>
+			</CommonButton>
 			<VStack gap="8">
 				<img alt="chakra logo" src="/static/logo.svg" width="80" height="80" />
 				<Heading size="2xl" letterSpacing="tight">

From 8007d34d180c2057d18f708af3a702f9767d033c Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Mon, 25 Nov 2024 19:21:52 +0900
Subject: [PATCH 3/3] refactor: update CommonButton import path

---
 pkgs/frontend/app/components/CommonButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkgs/frontend/app/components/CommonButton.tsx b/pkgs/frontend/app/components/CommonButton.tsx
index bc1dc6d..337cab6 100644
--- a/pkgs/frontend/app/components/CommonButton.tsx
+++ b/pkgs/frontend/app/components/CommonButton.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonProps } from "@chakra-ui/react";
+import { Button, ButtonProps } from "~/components/ui/button";
 
 interface CommonButtonProps extends Omit<ButtonProps, "width"> {
 	children: React.ReactNode;