From 1ac6658515d0564b93c49909169a1915905f2ad7 Mon Sep 17 00:00:00 2001
From: jiyeon <jy7828@gmail.com>
Date: Fri, 22 Sep 2023 00:50:32 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20follow=20code=20convent?=
 =?UTF-8?q?ion=20and=20eslint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/checkbox/src/components/Checkbox.tsx | 21 +++++++++++--------
 .../checkbox/src/components/CheckboxGroup.tsx | 11 +++++++---
 packages/checkbox/src/context.ts              |  1 +
 .../checkbox/src/hooks/useKeyboardHandler.ts  | 17 ---------------
 packages/checkbox/src/styles.ts               | 10 +++------
 packages/checkbox/src/types/base.ts           |  2 ++
 packages/checkbox/src/types/index.ts          |  2 ++
 .../checkbox/src/{types.ts => types/props.ts} |  5 +----
 8 files changed, 29 insertions(+), 40 deletions(-)
 delete mode 100644 packages/checkbox/src/hooks/useKeyboardHandler.ts
 create mode 100644 packages/checkbox/src/types/base.ts
 create mode 100644 packages/checkbox/src/types/index.ts
 rename packages/checkbox/src/{types.ts => types/props.ts} (73%)

diff --git a/packages/checkbox/src/components/Checkbox.tsx b/packages/checkbox/src/components/Checkbox.tsx
index 618c85e0..d3f7bbcc 100644
--- a/packages/checkbox/src/components/Checkbox.tsx
+++ b/packages/checkbox/src/components/Checkbox.tsx
@@ -1,12 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { createClassVariant } from '@jdesignlab/theme';
 import { ThemeContext } from '@jdesignlab/j-provider';
-import type { CheckboxProps } from '../types';
 import { useId, useRef, useContext, useEffect, forwardRef } from 'react';
+import { arrowKeyNavigationHandler, spaceKeyToggleHandler } from '@jdesignlab/react-utils';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from '../context';
 import { checkboxWrapperStyle, checkboxInputStyle, checkboxLabelStyle } from '../styles';
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
+import type { CheckboxProps } from '../types';
 
 type ExtendedInputProps = CheckboxProps & { Group?: typeof CheckboxGroup };
 export const Checkbox = Object.assign(
@@ -19,11 +19,15 @@ export const Checkbox = Object.assign(
 
     const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (!checkboxRef.current) return;
-      useKeyboardHandler({
-        event,
-        parentScope: '[role="group"]',
-        selectorOfList: 'input[type="checkbox"]'
-      });
+      const el = event.target as HTMLInputElement;
+      const spaceKeyAction = () => {
+        el.checked = !el.checked;
+      };
+      const parentScope = '[role="group"]';
+      const selectorOfList = 'input[type="checkbox"]';
+
+      spaceKeyToggleHandler({ event, action: spaceKeyAction });
+      arrowKeyNavigationHandler({ event, parentScope, selectorOfList });
     };
 
     useEffect(() => {
@@ -33,7 +37,7 @@ export const Checkbox = Object.assign(
           checkboxRef.current.checked = initialCheck;
         }
       }
-    }, [defaultValues, checkboxRef]);
+    }, [defaultValues, value, checkboxRef]);
 
     return (
       <label
@@ -44,7 +48,6 @@ export const Checkbox = Object.assign(
       >
         <input
           type="checkbox"
-          role="checkbox"
           id={id}
           className={createClassVariant('checkbox', 'input')}
           css={checkboxInputStyle(themePreset, color)}
diff --git a/packages/checkbox/src/components/CheckboxGroup.tsx b/packages/checkbox/src/components/CheckboxGroup.tsx
index e5bae12d..60bcb3f3 100644
--- a/packages/checkbox/src/components/CheckboxGroup.tsx
+++ b/packages/checkbox/src/components/CheckboxGroup.tsx
@@ -1,13 +1,18 @@
 /** @jsxImportSource @emotion/react */
 import { createClassVariant } from '@jdesignlab/theme';
+import { useMemo } from 'react';
 import { CheckboxGroupContext } from '../context';
 import type { CheckboxGroupProps } from '../types';
 
 export const CheckboxGroup = (props: CheckboxGroupProps) => {
   const { children, defaultValue, ...otherProps } = props;
-  const contextValue = {
-    defaultValues: props.defaultValue ?? []
-  };
+
+  const contextValue = useMemo(
+    () => ({
+      defaultValues: defaultValue ?? []
+    }),
+    [defaultValue]
+  );
 
   return (
     <CheckboxGroupContext.Provider value={contextValue}>
diff --git a/packages/checkbox/src/context.ts b/packages/checkbox/src/context.ts
index 3f340af9..ed672ad2 100644
--- a/packages/checkbox/src/context.ts
+++ b/packages/checkbox/src/context.ts
@@ -1,5 +1,6 @@
 import { createContext } from 'react';
 import type { CheckboxValue } from './types';
+
 export const CheckboxGroupContext = createContext({
   defaultValues: undefined as CheckboxValue
 });
diff --git a/packages/checkbox/src/hooks/useKeyboardHandler.ts b/packages/checkbox/src/hooks/useKeyboardHandler.ts
deleted file mode 100644
index 2ca28b1d..00000000
--- a/packages/checkbox/src/hooks/useKeyboardHandler.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { spaceKeyToggleHandler, arrowKeyNavigationHandler } from '@jdesignlab/react-utils';
-
-export const useKeyboardHandler = (props: {
-  event: React.KeyboardEvent<HTMLElement>;
-  parentScope: string;
-  selectorOfList: string;
-}) => {
-  const { event, parentScope, selectorOfList } = props;
-  const el = event.target as HTMLInputElement;
-
-  const spaceKeyAction = () => {
-    el.checked = !el.checked;
-  };
-
-  spaceKeyToggleHandler({ event, action: spaceKeyAction });
-  arrowKeyNavigationHandler({ event, parentScope, selectorOfList });
-};
diff --git a/packages/checkbox/src/styles.ts b/packages/checkbox/src/styles.ts
index 7d7cbdea..101e4c75 100644
--- a/packages/checkbox/src/styles.ts
+++ b/packages/checkbox/src/styles.ts
@@ -1,10 +1,9 @@
 import { css } from '@emotion/react';
 import { ThemePreset } from '@jdesignlab/j-provider';
-import type { ColorToken } from '@jdesignlab/theme';
 import { getColorByToken, setTextColorByBackground } from '@jdesignlab/theme';
+import type { ColorToken } from '@jdesignlab/theme';
 
-export const checkboxWrapperStyle = () => {
-  return css({
+export const checkboxWrapperStyle = () => css({
     position: 'relative',
     display: 'inline-block',
     marginRight: '6px',
@@ -15,7 +14,6 @@ export const checkboxWrapperStyle = () => {
       }
     }
   });
-};
 
 export const checkboxInputStyle = (themePreset: ThemePreset, color?: ColorToken) => {
   const parsedColor = color ? getColorByToken(color) : themePreset.color.primary;
@@ -72,8 +70,7 @@ export const checkboxInputStyle = (themePreset: ThemePreset, color?: ColorToken)
   });
 };
 
-export const checkboxLabelStyle = () => {
-  return css({
+export const checkboxLabelStyle = () => css({
     display: 'inline-flex',
     alignItems: 'center',
     width: '100%',
@@ -105,4 +102,3 @@ export const checkboxLabelStyle = () => {
       transform: 'translate(3px, 4px) rotate(-45deg)'
     }
   });
-};
diff --git a/packages/checkbox/src/types/base.ts b/packages/checkbox/src/types/base.ts
new file mode 100644
index 00000000..c96e2aaf
--- /dev/null
+++ b/packages/checkbox/src/types/base.ts
@@ -0,0 +1,2 @@
+export type CheckboxSize = 'sm' | 'md' | 'lg' | 'xl';
+export type CheckboxValue = number[] | string[] | undefined;
diff --git a/packages/checkbox/src/types/index.ts b/packages/checkbox/src/types/index.ts
new file mode 100644
index 00000000..76ca4784
--- /dev/null
+++ b/packages/checkbox/src/types/index.ts
@@ -0,0 +1,2 @@
+export * from './base';
+export * from './props';
diff --git a/packages/checkbox/src/types.ts b/packages/checkbox/src/types/props.ts
similarity index 73%
rename from packages/checkbox/src/types.ts
rename to packages/checkbox/src/types/props.ts
index 13059397..7e7dc646 100644
--- a/packages/checkbox/src/types.ts
+++ b/packages/checkbox/src/types/props.ts
@@ -1,14 +1,11 @@
 import type { ColorToken } from '@jdesignlab/theme';
 
-export type CheckboxSize = 'sm' | 'md' | 'lg' | 'xl';
-export type CheckboxValue = number[] | string[] | undefined;
-
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   children?: React.ReactNode;
   color?: ColorToken;
   value?: string | number;
+  // onChange?: () => {};
 }
-
 export interface CheckboxGroupProps {
   children?: React.ReactNode;
   defaultValue?: string[] | number[];