chore: react/utils modern-kit/types 의존성 제거

.changeset/moody-taxis-smash.md

@@ -0,0 +1,6 @@
+---
+'@modern-kit/react': patch
+'@modern-kit/utils': patch
+---
+
+chore: react/utils modern-kit/types 의존성 제거 - @ssi02014

packages/react/package.json

@@ -26,7 +26,6 @@
   "author": "ssi02014 <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@modern-kit/types": "workspace:*",
     "@modern-kit/utils": "workspace:*",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",

packages/react/src/_internal/test/mockIntersectionObserver.ts

@@ -1,4 +1,3 @@
-import { Nullable } from '@modern-kit/types';
 import { noop } from '@modern-kit/utils';
 
 const defaultIntersectionObserver = window.IntersectionObserver;
@@ -42,7 +41,7 @@ export const mockIntersecting = ({
   type: 'view' | 'hide';
 }) => {
   const observer = new window.IntersectionObserver(noop);
-  let current: Nullable<HTMLElement> = element;
+  let current: HTMLElement | null = element;
 
   while (current != null) {
     const handler = handlers.get(current);

packages/react/src/components/Portal/Portal.spec.tsx

@@ -3,7 +3,6 @@ import { screen, waitFor } from '@testing-library/react';
 import { useRef, useState } from 'react';
 import { Portal } from '.';
 import { renderSetup } from '../../_internal/test/renderSetup';
-import { Nullable } from '@modern-kit/types';
 
 const DefaultTestComponent = () => {
   const [isOpen, setIsOpen] = useState(true);
@@ -26,7 +25,7 @@ const DefaultTestComponent = () => {
 };
 
 const ContainerTestComponent = () => {
-  const ref = useRef<Nullable<HTMLDivElement>>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
 
   return (
     <div id="parent">
@@ -40,7 +39,7 @@ const ContainerTestComponent = () => {
 };
 
 const NestedTestComponent = () => {
-  const ref = useRef<Nullable<HTMLDivElement>>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
 
   return (
     <div id="parent">

packages/react/src/components/Portal/index.tsx

@@ -2,7 +2,6 @@ import { createContext, useCallback, useContext, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { useIsMounted } from '../../hooks/useIsMounted';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
-import { Nullable } from '@modern-kit/types';
 
 interface PortalProps {
   children: React.ReactNode;
@@ -11,7 +10,7 @@ interface PortalProps {
 }
 
 const PortalContext = createContext<{
-  parentPortalElement: Nullable<HTMLElement>;
+  parentPortalElement: HTMLElement | null;
 }>({
   parentPortalElement: null,
 });

packages/react/src/hooks/useAsyncProcessQueue/index.ts

@@ -1,4 +1,3 @@
-import { Nullable } from '@modern-kit/types';
 import { useCallback, useState, useRef } from 'react';
 
 type RequestFunction<T> = (...args: any[]) => Promise<T>;
@@ -12,8 +11,8 @@ export function useAsyncProcessQueue<T = unknown, E = unknown>({
 }: UseAsyncProcessQueueOptions = {}) {
   const requestQueue = useRef<RequestFunction<T>[]>([]);
 
-  const [data, setData] = useState<Nullable<T>>(null);
-  const [error, setError] = useState<Nullable<E>>(null);
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState<E | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const handleRequestQueue = useCallback(async () => {

packages/react/src/hooks/useFileReader/useFileReader.utils.ts

@@ -1,9 +1,7 @@
-import { Nullable } from '@modern-kit/types';
-
 export interface FileContent {
   status: 'fulfilled' | 'rejected';
   readValue: string | ArrayBuffer;
-  originFile: Nullable<File>;
+  originFile: File | null;
 }
 
 export function isFile(file: FileList | File): file is File {
@@ -27,7 +25,7 @@ export function getFiles(file: File | FileList, accepts: string[]) {
 }
 
 export function getReaderPromise(reader: FileReader, file: File) {
-  return new Promise<Nullable<FileContent['readValue']>>((resolve, reject) => {
+  return new Promise<FileContent['readValue'] | null>((resolve, reject) => {
     reader.onload = () => {
       resolve(reader.result);
     };

packages/react/src/hooks/useIntersectionObserver/index.ts

@@ -1,6 +1,5 @@
 import { useCallback, useRef } from 'react';
 import { usePreservedCallback } from '../usePreservedCallback';
-import { Nullable } from '@modern-kit/types';
 import { noop } from '@modern-kit/utils';
 
 export interface UseIntersectionObserverProps extends IntersectionObserverInit {
@@ -51,7 +50,7 @@ export function useIntersectionObserver<T extends HTMLElement>({
 }: UseIntersectionObserverProps): { ref: React.RefCallback<T> } {
   const calledCount = useRef(0);
   const isVisible = useRef(false);
-  const intersectionObserverRef = useRef<Nullable<IntersectionObserver>>(null);
+  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
 
   const intersectionObserverCallback = usePreservedCallback(
     ([entry]: IntersectionObserverEntry[], observer: IntersectionObserver) => {

packages/react/src/hooks/useMergeRefs/useMergeRefs.spec.tsx

@@ -3,12 +3,10 @@ import { useRef, useState } from 'react';
 import { useMergeRefs } from '.';
 import { screen, waitFor } from '@testing-library/react';
 import { renderSetup } from '../../_internal/test/renderSetup';
-import { Nullable } from '@modern-kit/types';
 
 const TestComponent = () => {
   const [result, setResult] = useState(false);
-  const [ref3Element, setRef3Element] =
-    useState<Nullable<HTMLDivElement>>(null);
+  const [ref3Element, setRef3Element] = useState<HTMLDivElement | null>(null);
 
   const ref1 = useRef<HTMLDivElement>(null);
   const ref2 = useRef<HTMLDivElement>(null);

packages/react/src/hooks/useScrollLock/index.ts

@@ -1,6 +1,5 @@
 import { useCallback, useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
-import { Nullable } from '@modern-kit/types';
 
 interface UseScrollLockProps {
   autoLock?: boolean;
@@ -9,9 +8,8 @@ interface UseScrollLockProps {
 export function useScrollLock<T extends HTMLElement>({
   autoLock = true,
 }: UseScrollLockProps = {}) {
-  const ref = useRef<Nullable<T>>(null);
-  const originalOverflow =
-    useRef<Nullable<CSSStyleDeclaration['overflow']>>(null);
+  const ref = useRef<T | null>(null);
+  const originalOverflow = useRef<CSSStyleDeclaration['overflow'] | null>(null);
 
   const lock = useCallback(() => {
     const targetElement = ref.current as T;

packages/utils/package.json

@@ -44,9 +44,6 @@
     "typescript": "^5.1.6",
     "vitest": "^2.1.3"
   },
-  "dependencies": {
-    "@modern-kit/types": "workspace:^"
-  },
   "keywords": [
     "react",
     "next",

packages/utils/src/array/flatMapDeep/index.ts

@@ -1,6 +1,9 @@
-import { ExtractNestedArrayType } from '@modern-kit/types';
 import { flattenDeep } from '../../array';
 
+type ExtractNestedArrayType<T> = T extends readonly (infer U)[]
+  ? ExtractNestedArrayType<U>
+  : T;
+
 /**
  * 주어진 iteratee 함수로 배열의 각 요소를 재귀적으로 매핑한 후, 결과 배열을 깊게 평탄화합니다.
  *

packages/utils/src/array/flattenDeep/index.ts

@@ -1,6 +1,9 @@
-import { ExtractNestedArrayType } from '@modern-kit/types';
 import { flatten } from '../../array/flatten';
 
+export type ExtractNestedArrayType<T> = T extends readonly (infer U)[]
+  ? ExtractNestedArrayType<U>
+  : T;
+
 /**
  * @description 주어진 중첩 배열의 `모든 깊이`를 `평탄화`해주는 함수입니다.
  *

packages/utils/src/array/flattenDeepThenMap/index.ts

@@ -1,5 +1,7 @@
-import { ExtractNestedArrayType } from '@modern-kit/types';
-import { flattenDeep } from '../../array/flattenDeep';
+import {
+  type ExtractNestedArrayType,
+  flattenDeep,
+} from '../../array/flattenDeep';
 
 /**
  * @description 중첩 배열의 모든 깊이를 평탄화 한 후 제공된 iteratee 함수를 사용하여 각 요소를 매핑합니다.

packages/utils/src/object/objectEntries/index.ts

@@ -1,4 +1,4 @@
-import { ObjectKeys } from '@modern-kit/types';
+import { type ObjectKeys } from '../../object/objectKeys';
 
 /**
  * @description `Object.entries()`와 동일하게 동작하지만 `key` 타입을 지켜주는 함수입니다.

packages/utils/src/object/objectKeys/index.ts

@@ -1,4 +1,7 @@
-import { ObjectKeys } from '@modern-kit/types';
+export type ObjectKeys<T extends Record<PropertyKey, any>> = Exclude<
+  keyof T,
+  symbol
+>;
 
 /**
  * @description `Object.keys()`와 동일하게 동작하지만 `key` 타입을 지켜주는 함수입니다.

packages/utils/src/object/objectValues/index.ts

@@ -1,4 +1,4 @@
-import { ObjectKeys } from '@modern-kit/types';
+import { type ObjectKeys } from '../../object/objectKeys';
 
 /**
  * @description `Object.values()`와 동일하게 동작하는 함수입니다.

packages/utils/src/storage/getStorageItem/index.ts

@@ -1,13 +1,12 @@
 import { StorageType } from '../types';
 import { isClient } from '../../device';
 import { isFunction } from '../../validator/isFunction';
-import { Nullable } from '@modern-kit/types';
 import { parseJSON } from '../../common';
 
 export function getStorageItem<T>(
   type: StorageType,
   key: string,
-  initialValue: Nullable<T | (() => T)> = null
+  initialValue: T | (() => T) | null = null
 ) {
   if (!isClient()) {
     throw new Error('Cannot be executed unless it is a client environment.');