From 5619a859e012a1e969870723207e9fe647221373 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Tue, 16 Jul 2024 20:52:08 +0900 Subject: [PATCH 1/2] refactor: #28 remove Pascal folders --- src/component/common/CheckBox/CheckBox.tsx | 46 -------------- .../common/CheckBox/CheckBoxGroup.tsx | 29 --------- src/component/common/Input/Input.tsx | 34 ---------- .../common/Input/InputLabelContainer.tsx | 27 -------- src/component/common/Input/Label.tsx | 63 ------------------- src/component/common/Input/index.ts | 3 - src/component/common/RadioButton/Radio.tsx | 47 -------------- .../common/RadioButton/RadioButtonGroup.tsx | 30 --------- 8 files changed, 279 deletions(-) delete mode 100644 src/component/common/CheckBox/CheckBox.tsx delete mode 100644 src/component/common/CheckBox/CheckBoxGroup.tsx delete mode 100644 src/component/common/Input/Input.tsx delete mode 100644 src/component/common/Input/InputLabelContainer.tsx delete mode 100644 src/component/common/Input/Label.tsx delete mode 100644 src/component/common/Input/index.ts delete mode 100644 src/component/common/RadioButton/Radio.tsx delete mode 100644 src/component/common/RadioButton/RadioButtonGroup.tsx diff --git a/src/component/common/CheckBox/CheckBox.tsx b/src/component/common/CheckBox/CheckBox.tsx deleted file mode 100644 index 8118a9c8..00000000 --- a/src/component/common/CheckBox/CheckBox.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { css } from "@emotion/react"; -import { useContext } from "react"; - -import { CheckBoxContext } from "./CheckBoxGroup"; - -import ListItemCard from "@/component/common/Card/ListItemCard"; - -type CheckBoxProps = { - value: string; - children: React.ReactNode; -}; - -const CheckBox = ({ value, children }: CheckBoxProps) => { - const checkboxContext = useContext(CheckBoxContext); - return ( - - - { - checkboxContext?.onChange && checkboxContext.onChange(e.target.value); - }} - css={css` - display: none; - `} - /> - - ); -}; - -export default CheckBox; diff --git a/src/component/common/CheckBox/CheckBoxGroup.tsx b/src/component/common/CheckBox/CheckBoxGroup.tsx deleted file mode 100644 index 0bb6e58c..00000000 --- a/src/component/common/CheckBox/CheckBoxGroup.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { css } from "@emotion/react"; -import { createContext } from "react"; - -export type CheckBoxContextState = { - isChecked: (value: string) => boolean; - onChange: (value: string) => void; -}; - -export const CheckBoxContext = createContext(undefined); - -type CheckBoxGroupProps = { - children: React.ReactNode; -} & CheckBoxContextState; - -const CheckBoxGroup = ({ children, ...props }: CheckBoxGroupProps) => { - return ( -
- {children} -
- ); -}; - -export default CheckBoxGroup; diff --git a/src/component/common/Input/Input.tsx b/src/component/common/Input/Input.tsx deleted file mode 100644 index 7fc19dcd..00000000 --- a/src/component/common/Input/Input.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { css } from "@emotion/react"; -import { forwardRef, useContext } from "react"; - -import { InputContext } from "./InputLabelContainer"; - -type InputProps = { - width?: string; -} & React.InputHTMLAttributes; - -export const Input = forwardRef(function ({ id, width = "100%", ...props }: InputProps) { - const inputContext = useContext(InputContext); - return ( -
-
- -
-
- ); -}); - -Input.displayName = "Input"; diff --git a/src/component/common/Input/InputLabelContainer.tsx b/src/component/common/Input/InputLabelContainer.tsx deleted file mode 100644 index c868b195..00000000 --- a/src/component/common/Input/InputLabelContainer.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { css } from "@emotion/react"; -import { createContext } from "react"; - -type InputLabelContainerProps = { - id: string; - children: React.ReactNode; -}; - -export const InputContext = createContext<{ id: string } | undefined>(undefined); - -export function InputLabelContainer({ id, children }: InputLabelContainerProps) { - return ( - -
- {children} -
- - ); -} diff --git a/src/component/common/Input/Label.tsx b/src/component/common/Input/Label.tsx deleted file mode 100644 index 1c7486a5..00000000 --- a/src/component/common/Input/Label.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { css, Interpolation, Theme } from "@emotion/react"; -import { useContext } from "react"; - -import { InputContext } from "./InputLabelContainer"; - -type LabelProps = { - order?: number; - styles?: Interpolation; -} & React.LabelHTMLAttributes; - -export function Label({ id, children, order, styles }: LabelProps) { - const inputContext = useContext(InputContext); - - return ( - - ); -} diff --git a/src/component/common/Input/index.ts b/src/component/common/Input/index.ts deleted file mode 100644 index 836ad51f..00000000 --- a/src/component/common/Input/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { Input } from "./Input"; -export { Label } from "./Label"; -export { InputLabelContainer } from "./InputLabelContainer"; diff --git a/src/component/common/RadioButton/Radio.tsx b/src/component/common/RadioButton/Radio.tsx deleted file mode 100644 index 1b129636..00000000 --- a/src/component/common/RadioButton/Radio.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { css } from "@emotion/react"; -import { useContext } from "react"; - -import { RadioContext } from "./RadioButtonGroup"; - -import ListItemCard from "@/component/common/Card/ListItemCard"; - -type RadioProps = { - value: string; - children: React.ReactNode; -}; - -const Radio = ({ value, children }: RadioProps) => { - const radioContext = useContext(RadioContext); - return ( - - - { - radioContext?.onChange && radioContext.onChange(e.target.value); - }} - css={css` - display: none; - `} - /> - - ); -}; - -export default Radio; diff --git a/src/component/common/RadioButton/RadioButtonGroup.tsx b/src/component/common/RadioButton/RadioButtonGroup.tsx deleted file mode 100644 index a009bea0..00000000 --- a/src/component/common/RadioButton/RadioButtonGroup.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { css } from "@emotion/react"; -import { createContext } from "react"; - -export type RadioContextState = { - radioName: string; - isChecked: (value: string) => boolean; - onChange: (value: string) => void; -}; - -export const RadioContext = createContext(undefined); - -type RadioButtonGroupProps = { - children: React.ReactNode; -} & RadioContextState; - -const RadioButtonGroup = ({ children, ...props }: RadioButtonGroupProps) => { - return ( -
- {children} -
- ); -}; - -export default RadioButtonGroup; From 9545fd68a25d569a94a4472220a3e8aebdd83d3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Tue, 16 Jul 2024 20:55:08 +0900 Subject: [PATCH 2/2] refactor: #28 folder camel, add index --- src/app/test/Staging.tsx | 8 +-- src/component/common/checkBox/CheckBox.tsx | 44 +++++++++++++ .../common/checkBox/CheckBoxGroup.tsx | 27 ++++++++ src/component/common/checkBox/index.ts | 2 + src/component/common/input/Input.tsx | 34 ++++++++++ .../common/input/InputLabelContainer.tsx | 27 ++++++++ src/component/common/input/Label.tsx | 63 +++++++++++++++++++ src/component/common/input/index.ts | 3 + src/component/common/radioButton/Radio.tsx | 45 +++++++++++++ .../common/radioButton/RadioButtonGroup.tsx | 28 +++++++++ src/component/common/radioButton/index.ts | 2 + 11 files changed, 278 insertions(+), 5 deletions(-) create mode 100644 src/component/common/checkBox/CheckBox.tsx create mode 100644 src/component/common/checkBox/CheckBoxGroup.tsx create mode 100644 src/component/common/checkBox/index.ts create mode 100644 src/component/common/input/Input.tsx create mode 100644 src/component/common/input/InputLabelContainer.tsx create mode 100644 src/component/common/input/Label.tsx create mode 100644 src/component/common/input/index.ts create mode 100644 src/component/common/radioButton/Radio.tsx create mode 100644 src/component/common/radioButton/RadioButtonGroup.tsx create mode 100644 src/component/common/radioButton/index.ts diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx index 7b5f5dec..18bd04ea 100644 --- a/src/app/test/Staging.tsx +++ b/src/app/test/Staging.tsx @@ -2,11 +2,9 @@ import { useEffect } from "react"; import Button from "@/component/Button/Button.tsx"; import { ButtonProvider } from "@/component/Button/ButtonProvider.tsx"; -import CheckBox from "@/component/common/CheckBox/CheckBox"; -import CheckBoxGroup from "@/component/common/CheckBox/CheckBoxGroup"; -import { Input, InputLabelContainer, Label } from "@/component/common/Input"; -import Radio from "@/component/common/RadioButton/Radio"; -import RadioButtonGroup from "@/component/common/RadioButton/RadioButtonGroup"; +import { CheckBox, CheckBoxGroup } from "@/component/common/checkBox"; +import { Input, InputLabelContainer, Label } from "@/component/common/input"; +import { Radio, RadioButtonGroup } from "@/component/common/radioButton"; import { useCheckBox } from "@/hooks/useCheckBox"; import { useInput } from "@/hooks/useInput"; import { useRadioButton } from "@/hooks/useRadioButton"; diff --git a/src/component/common/checkBox/CheckBox.tsx b/src/component/common/checkBox/CheckBox.tsx new file mode 100644 index 00000000..3b982d4c --- /dev/null +++ b/src/component/common/checkBox/CheckBox.tsx @@ -0,0 +1,44 @@ +import { css } from "@emotion/react"; +import { useContext } from "react"; + +import { CheckBoxContext } from "./CheckBoxGroup"; + +import ListItemCard from "@/component/common/Card/ListItemCard"; + +type CheckBoxProps = { + value: string; + children: React.ReactNode; +}; + +export function CheckBox({ value, children }: CheckBoxProps) { + const checkboxContext = useContext(CheckBoxContext); + return ( + + + { + checkboxContext?.onChange && checkboxContext.onChange(e.target.value); + }} + css={css` + display: none; + `} + /> + + ); +} diff --git a/src/component/common/checkBox/CheckBoxGroup.tsx b/src/component/common/checkBox/CheckBoxGroup.tsx new file mode 100644 index 00000000..32e0fbf9 --- /dev/null +++ b/src/component/common/checkBox/CheckBoxGroup.tsx @@ -0,0 +1,27 @@ +import { css } from "@emotion/react"; +import { createContext } from "react"; + +export type CheckBoxContextState = { + isChecked: (value: string) => boolean; + onChange: (value: string) => void; +}; + +export const CheckBoxContext = createContext(undefined); + +type CheckBoxGroupProps = { + children: React.ReactNode; +} & CheckBoxContextState; + +export function CheckBoxGroup({ children, ...props }: CheckBoxGroupProps) { + return ( +
+ {children} +
+ ); +} diff --git a/src/component/common/checkBox/index.ts b/src/component/common/checkBox/index.ts new file mode 100644 index 00000000..1c96a44e --- /dev/null +++ b/src/component/common/checkBox/index.ts @@ -0,0 +1,2 @@ +export { CheckBox } from "./CheckBox"; +export { CheckBoxGroup } from "./CheckBoxGroup"; diff --git a/src/component/common/input/Input.tsx b/src/component/common/input/Input.tsx new file mode 100644 index 00000000..7fc19dcd --- /dev/null +++ b/src/component/common/input/Input.tsx @@ -0,0 +1,34 @@ +import { css } from "@emotion/react"; +import { forwardRef, useContext } from "react"; + +import { InputContext } from "./InputLabelContainer"; + +type InputProps = { + width?: string; +} & React.InputHTMLAttributes; + +export const Input = forwardRef(function ({ id, width = "100%", ...props }: InputProps) { + const inputContext = useContext(InputContext); + return ( +
+
+ +
+
+ ); +}); + +Input.displayName = "Input"; diff --git a/src/component/common/input/InputLabelContainer.tsx b/src/component/common/input/InputLabelContainer.tsx new file mode 100644 index 00000000..c868b195 --- /dev/null +++ b/src/component/common/input/InputLabelContainer.tsx @@ -0,0 +1,27 @@ +import { css } from "@emotion/react"; +import { createContext } from "react"; + +type InputLabelContainerProps = { + id: string; + children: React.ReactNode; +}; + +export const InputContext = createContext<{ id: string } | undefined>(undefined); + +export function InputLabelContainer({ id, children }: InputLabelContainerProps) { + return ( + +
+ {children} +
+ + ); +} diff --git a/src/component/common/input/Label.tsx b/src/component/common/input/Label.tsx new file mode 100644 index 00000000..1c7486a5 --- /dev/null +++ b/src/component/common/input/Label.tsx @@ -0,0 +1,63 @@ +import { css, Interpolation, Theme } from "@emotion/react"; +import { useContext } from "react"; + +import { InputContext } from "./InputLabelContainer"; + +type LabelProps = { + order?: number; + styles?: Interpolation; +} & React.LabelHTMLAttributes; + +export function Label({ id, children, order, styles }: LabelProps) { + const inputContext = useContext(InputContext); + + return ( + + ); +} diff --git a/src/component/common/input/index.ts b/src/component/common/input/index.ts new file mode 100644 index 00000000..836ad51f --- /dev/null +++ b/src/component/common/input/index.ts @@ -0,0 +1,3 @@ +export { Input } from "./Input"; +export { Label } from "./Label"; +export { InputLabelContainer } from "./InputLabelContainer"; diff --git a/src/component/common/radioButton/Radio.tsx b/src/component/common/radioButton/Radio.tsx new file mode 100644 index 00000000..6c668d62 --- /dev/null +++ b/src/component/common/radioButton/Radio.tsx @@ -0,0 +1,45 @@ +import { css } from "@emotion/react"; +import { useContext } from "react"; + +import { RadioContext } from "./RadioButtonGroup"; + +import ListItemCard from "@/component/common/Card/ListItemCard"; + +type RadioProps = { + value: string; + children: React.ReactNode; +}; + +export function Radio({ value, children }: RadioProps) { + const radioContext = useContext(RadioContext); + return ( + + + { + radioContext?.onChange && radioContext.onChange(e.target.value); + }} + css={css` + display: none; + `} + /> + + ); +} diff --git a/src/component/common/radioButton/RadioButtonGroup.tsx b/src/component/common/radioButton/RadioButtonGroup.tsx new file mode 100644 index 00000000..1093bc5d --- /dev/null +++ b/src/component/common/radioButton/RadioButtonGroup.tsx @@ -0,0 +1,28 @@ +import { css } from "@emotion/react"; +import { createContext } from "react"; + +export type RadioContextState = { + radioName: string; + isChecked: (value: string) => boolean; + onChange: (value: string) => void; +}; + +export const RadioContext = createContext(undefined); + +type RadioButtonGroupProps = { + children: React.ReactNode; +} & RadioContextState; + +export function RadioButtonGroup({ children, ...props }: RadioButtonGroupProps) { + return ( +
+ {children} +
+ ); +} diff --git a/src/component/common/radioButton/index.ts b/src/component/common/radioButton/index.ts new file mode 100644 index 00000000..054777c4 --- /dev/null +++ b/src/component/common/radioButton/index.ts @@ -0,0 +1,2 @@ +export { Radio } from "./Radio"; +export { RadioButtonGroup } from "./RadioButtonGroup";