refactor(useCounter): modify useCounter props structure (#222)

Co-authored-by: seungrodotlee <seungrodotlee@gmail.com>

Author: JeongHwan-dev

src/hooks/useCounter/ko/useCounter.md

@@ -5,24 +5,28 @@
 ## Interface
 
 ```ts
-function useCounter(options: UseCounterOptions): UseCounterReturn;
+function useCounter(
+  initialValue?: number,
+  options?: UseCounterOptions
+): UseCounterReturn;
 ```
 
 ### 파라미터
 
 <Interface
-  required
+  name="initialValue"
+  type="number"
+  required={false}
+  defaultValue="0"
+  description="카운터의 초기값이에요. 기본값은 0이에요."
+/>
+
+<Interface
   name="options"
   type="UseCounterOptions"
+  required={false}
   description="카운터의 옵션이에요."
   :nested="[
-    {
-      name: 'options.initialValue',
-      type: 'number',
-      required: false,
-      defaultValue: '0',
-      description: '카운터의 초기값이에요. 기본값은 0이에요.',
-    },
     {
       name: 'options.min',
       type: 'number',
@@ -94,8 +98,7 @@ function useCounter(options: UseCounterOptions): UseCounterReturn;
 import { useCounter } from 'react-simplikit';
 
 function ShoppingCart() {
-  const { count, increment, decrement, reset } = useCounter({
-    initialValue: 1,
+  const { count, increment, decrement, reset } = useCounter(1, {
     min: 1,
     max: 10,
   });

src/hooks/useCounter/useCounter.md

@@ -5,24 +5,28 @@
 ## Interface
 
 ```ts
-function useCounter(options: UseCounterOptions): UseCounterReturn;
+function useCounter(
+  initialValue?: number,
+  options?: UseCounterOptions
+): UseCounterReturn;
 ```
 
 ### Parameters
 
 <Interface
-  required
+  name="initialValue"
+  type="number"
+  required={false}
+  defaultValue="0"
+  description="Initial value for the counter. Defaults to 0."
+/>
+
+<Interface
   name="options"
   type="UseCounterOptions"
+  required={false}
   description="The options for the counter."
   :nested="[
-    {
-      name: 'options.initialValue',
-      type: 'number',
-      required: false,
-      defaultValue: '0',
-      description: 'Initial value for the counter. Defaults to 0.',
-    },
     {
       name: 'options.min',
       type: 'number',
@@ -94,8 +98,7 @@ function useCounter(options: UseCounterOptions): UseCounterReturn;
 import { useCounter } from 'react-simplikit';
 
 function ShoppingCart() {
-  const { count, increment, decrement, reset } = useCounter({
-    initialValue: 1,
+  const { count, increment, decrement, reset } = useCounter(1, {
     min: 1,
     max: 10,
   });

src/hooks/useCounter/useCounter.spec.ts

@@ -11,21 +11,13 @@ describe('useCounter', () => {
   });
 
   it('should initialize with provided initial value', () => {
-    const { result } = renderHook(() =>
-      useCounter({
-        initialValue: 10,
-      })
-    );
+    const { result } = renderHook(() => useCounter(10));
 
     expect(result.current.count).toBe(10);
   });
 
   it('should increment the counter', () => {
-    const { result } = renderHook(() =>
-      useCounter({
-        initialValue: 5,
-      })
-    );
+    const { result } = renderHook(() => useCounter(5));
 
     act(() => {
       result.current.increment();
@@ -35,11 +27,7 @@ describe('useCounter', () => {
   });
 
   it('should decrement the counter', () => {
-    const { result } = renderHook(() =>
-      useCounter({
-        initialValue: 5,
-      })
-    );
+    const { result } = renderHook(() => useCounter(5));
 
     act(() => {
       result.current.decrement();
@@ -49,11 +37,7 @@ describe('useCounter', () => {
   });
 
   it('should reset the counter to initial value', () => {
-    const { result } = renderHook(() =>
-      useCounter({
-        initialValue: 5,
-      })
-    );
+    const { result } = renderHook(() => useCounter(5));
 
     act(() => {
       result.current.increment();
@@ -71,8 +55,7 @@ describe('useCounter', () => {
 
   it('should not go below minimum value', () => {
     const { result } = renderHook(() =>
-      useCounter({
-        initialValue: 5,
+      useCounter(5, {
         min: 3,
       })
     );
@@ -88,8 +71,7 @@ describe('useCounter', () => {
 
   it('should not go above maximum value', () => {
     const { result } = renderHook(() =>
-      useCounter({
-        initialValue: 5,
+      useCounter(5, {
         max: 7,
       })
     );
@@ -105,8 +87,7 @@ describe('useCounter', () => {
 
   it('should use the provided step value for increment and decrement', () => {
     const { result } = renderHook(() =>
-      useCounter({
-        initialValue: 5,
+      useCounter(5, {
         step: 2,
       })
     );
@@ -126,17 +107,15 @@ describe('useCounter', () => {
 
   it('should adjust initial value to match constraints', () => {
     const { result } = renderHook(() =>
-      useCounter({
-        initialValue: 1,
+      useCounter(1, {
         min: 3,
       })
     );
 
     expect(result.current.count).toBe(3);
 
     const { result: result2 } = renderHook(() =>
-      useCounter({
-        initialValue: 10,
+      useCounter(10, {
         max: 8,
       })
     );
@@ -146,7 +125,7 @@ describe('useCounter', () => {
 
   it('should allow setting arbitrary value within constraints', () => {
     const { result } = renderHook(() =>
-      useCounter({
+      useCounter(0, {
         min: 3,
         max: 8,
       })
@@ -172,11 +151,7 @@ describe('useCounter', () => {
   });
 
   it('should work with updater function for setCount', () => {
-    const { result } = renderHook(() =>
-      useCounter({
-        initialValue: 5,
-      })
-    );
+    const { result } = renderHook(() => useCounter(5));
 
     act(() => {
       result.current.setCount(prev => prev + 3);

src/hooks/useCounter/useCounter.ts

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 
 type UseCounterOptions = {
-  initialValue?: number;
   min?: number;
   max?: number;
   step?: number;
@@ -20,8 +19,8 @@ type UseCounterReturn = {
  * `useCounter` is a React hook that manages a numeric counter state with increment, decrement, and reset capabilities.
  * Optionally, you can provide minimum and maximum values to constrain the counter's range.
  *
+ * @param {number} [initialValue=0] - Initial value for the counter. Defaults to 0.
  * @param {UseCounterOptions} options - The options for the counter.
- * @param {number} [options.initialValue=0] - Initial value for the counter. Defaults to 0.
  * @param {number} [options.min] - Minimum value the counter can reach. If not provided, there is no lower limit.
  * @param {number} [options.max] - Maximum value the counter can reach. If not provided, there is no upper limit.
  * @param {number} [options.step=1] - Value to increment or decrement by. Defaults to 1.
@@ -37,8 +36,7 @@ type UseCounterReturn = {
  * import { useCounter } from 'react-simplikit';
  *
  * function ShoppingCart() {
- *   const { count, increment, decrement, reset } = useCounter({
- *     initialValue: 1,
+ *   const { count, increment, decrement, reset } = useCounter(1, {
  *     min: 1,
  *     max: 10,
  *   });
@@ -53,7 +51,7 @@ type UseCounterReturn = {
  *   );
  * }
  */
-export function useCounter({ initialValue = 0, min, max, step = 1 }: UseCounterOptions = {}): UseCounterReturn {
+export function useCounter(initialValue = 0, { min, max, step = 1 }: UseCounterOptions = {}): UseCounterReturn {
   const validateValue = (value: number): number => {
     let validatedValue = value;