docs. fill in jsdocs, replace interface to type, add eslint (#29)

Author: seungrodotlee

eslint.config.mjs

@@ -49,6 +49,7 @@ export default [
       ...hooksPlugin.configs.recommended.rules,
       '@typescript-eslint/no-explicit-any': 'warn',
       '@typescript-eslint/strict-boolean-expressions': 'error',
+      '@typescript-eslint/consistent-type-definitions': ['warn', 'type'],
       'react/react-in-jsx-scope': 'off',
       'import/extensions': [
         'error',

src/components/Separated/Separated.md

@@ -12,7 +12,7 @@
 ```tsx
 <Separated with={<Border type="padding24" />}>
   {LIST.map(item => (
-    <div>item.title</div>
+    <div>{item.title}</div>
   ))}
 </Separated>
 ```

src/components/Separated/Separated.tsx

@@ -5,6 +5,31 @@ interface Props {
   children: ReactNode;
 }
 
+/**
+ * @description
+ * `Separated` is a component that can be used when you want to insert a component that repeats between each element.
+ *
+ * @param children - The component to insert between each element.
+ * @param with - The child elements to render.Each child will be filtered using `React.isValidElement` function.
+ * @returns A React component that separates children with a separator
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <Separated with={<Border type="padding24" />}>
+ *       {['hello', 'react', 'world'].map(item => (
+ *         <div>{item}</div>
+ *       ))}
+ *     </Separated>
+ *   );
+ *   // expected output:
+ *   // <div>hello</div>
+ *   // <Border type="padding24" />
+ *   // <div>react</div>
+ *   // <Border type="padding24" />
+ *   // <div>world</div>
+ * }
+ */
 export function Separated({ children, with: separator }: Props) {
   const childrenArray = Children.toArray(children).filter(isValidElement);
 

src/components/SwitchCase/SwitchCase.tsx

@@ -14,6 +14,30 @@ interface Props<Case> {
   defaultComponent?: () => ReactNode;
 }
 
+/**
+ * @description
+ * `SwitchCase` is a component that allows you to use switch-case statements declaratively.
+ *
+ * @param value - The case value
+ * @param caseBy - An object that defines the components to render based on the case.
+ * @param defaultComponent - The component to render if the case does not match.
+ * @returns A React component that conditionally rendered based on cases
+ *
+ * @example
+ * function App() {
+ *   return <SwitchCase
+ *     value={status}
+ *     // component is rendered based on the status value
+ *     caseBy={{
+ *       a: <TypeA />,
+ *       b: <TypeB />,
+ *       c: <TypeC />,
+ *     }}
+ *     // component is rendered when the status value is not matched
+ *     defaultComponent={<Default />}
+ *   />;
+ * }
+ */
 export function SwitchCase<Case>({ value, caseBy, defaultComponent = () => null }: Props<Case>) {
   const stringifiedValue = String(value) as StringifiedValue<Case>;
   return (caseBy[stringifiedValue] ?? defaultComponent)();

src/hooks/useAsyncEffect/useAsyncEffect.ts

@@ -5,6 +5,9 @@ import { DependencyList, useEffect } from 'react';
  * useAsyncEffect is a hook for handling async effects in React components.
  * Follows the same cleanup pattern as useEffect.
  *
+ * @param effect - An async function to be executed in useEffect pattern.
+ * @param deps - A dependency array.
+ *
  * @example
  * useAsyncEffect(async () => {
  *   const data = await fetchData();

src/hooks/useBooleanState/useBooleanState.ts

@@ -3,11 +3,16 @@ import { useCallback, useState } from 'react';
 /**
  *
  * @description
- * boolean 타입으로 useState를 쉽게 사용할 수 있는 hook 입니다.
+ * useBooleanState is a React hook that helps manage a boolean state easily. It provides functionalities to set the state to true, set it to false, and toggle the state.
  *
- * ```ts
- * function useBooleanState(defaultValue = false): readonly [bool, setTrue, setFalse, toggle];
- * ```
+ * @param defaultValue - It's the initial value of the state. The default value is false.
+ *
+ * @returns Returns a `readonly [boolean, () => void, () => void, () => void]` tuple:
+ *
+ * 1. boolean: The current state value
+ * 2. () => void: A function to set the state to true
+ * 3. () => void: A function to set the state to false  
+ * 4. () => void: A function to toggle the state
  *
  * @example
  * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);

src/hooks/useCallbackOnce/useCallbackOnce.ts

@@ -4,6 +4,7 @@ import { DependencyList, useEffect, useRef } from 'react';
 import { usePreservedCallback } from '../usePreservedCallback/index.ts';
 
 /**
+ * @descrption
  * A React hook that ensures a callback function is executed only once, regardless of
  * how many times it's called. This is useful for one-time operations that should not
  * be repeated, even if the component re-renders.

src/hooks/useDebounce/debounce.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // Simplified version of https://github.com/toss/es-toolkit/blob/main/src/function/debounce.ts
 
-export interface DebouncedFunction<F extends (...args: any[]) => void> {
+export type DebouncedFunction<F extends (...args: any[]) => void> = {
   (...args: Parameters<F>): void;
   cancel: () => void;
 }

src/hooks/useDebounce/useDebounce.ts

@@ -5,17 +5,19 @@ import { usePreservedCallback } from '../usePreservedCallback/index.ts';
 
 import { debounce } from './debounce.ts';
 
-interface DebounceOptions {
+type DebounceOptions = {
   leading?: boolean;
   trailing?: boolean;
-}
+};
 
 /**
+ * @description
  * `useDebounce` is a hook that returns a debounced version of the provided callback function
  *
  * @param callback Function to debounce
  * @param wait Time in milliseconds to delay
  * @param options Configuration options for debounce behavior
+ *
  * @returns Debounced function that will delay invoking the callback
  *
  * @example
@@ -46,7 +48,7 @@ export function useDebounce<F extends (...args: unknown[]) => unknown>(
 ) {
   const preservedCallback = usePreservedCallback(callback);
 
-  const { leading = true, trailing = true } = options;
+  const { leading = false, trailing = true } = options;
 
   const edges = useMemo(() => {
     const _edges: Array<'leading' | 'trailing'> = [];

src/hooks/useInterval/useInterval.ts

@@ -10,6 +10,33 @@ type IntervalOptions =
       enabled?: boolean;
     };
 
+/**
+ * @description
+ * `useInterval` is a React hook that executes a function periodically.
+ *
+ * @param callback - The function to be executed periodically.
+ * @param options - Configure the interval timing and behavior.
+ * @param options.delay - The interval duration in milliseconds. When null, the interval won't be executed.
+ * @param options.immediate - When true, executes immediately. When false, waits for the first delay before execution.
+ * @param options.enabled - When false, the interval won't be executed.
+ *
+ * @example
+ * import { useInterval } from 'reactive-kit';
+ *
+ * function Timer() {
+ *   const [time, setTime] = useState(0);
+ *
+ *   useInterval(() => {
+ *     setTime(prev => prev + 1);
+ *   }, 1000);
+ *
+ *   return (
+ *     <div>
+ *       <p>{time} seconds</p>
+ *     </div>
+ *   );
+ * }
+ */
 export function useInterval(callback: () => void, options: IntervalOptions) {
   const delay = typeof options === 'number' ? options : options.delay;
   const immediate = typeof options === 'number' ? false : options.immediate;