refac: applied @modern-kit/types Nullable (#65)

.changeset/curvy-ghosts-fry.md

@@ -0,0 +1,7 @@
+---
+'@modern-kit/react': patch
+'@modern-kit/types': patch
+'@modern-kit/utils': patch
+---
+
+refac: applied @modern-kit/types Nullable

packages/react/package.json

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

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

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

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

@@ -2,6 +2,7 @@ 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;
@@ -10,7 +11,7 @@ interface PortalProps {
 }
 
 const PortalContext = createContext<{
-  parentPortalElement: HTMLElement | null;
+  parentPortalElement: Nullable<HTMLElement>;
 }>({
   parentPortalElement: null,
 });

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

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

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

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 import { usePreservedCallback } from '../usePreservedCallback';
 import { noop } from '@modern-kit/utils';
+import { Nullable } from '@modern-kit/types';
 
 export interface UseIntersectionObserverProps extends IntersectionObserverInit {
   action: (entry: IntersectionObserverEntry) => void;
@@ -14,7 +15,7 @@ export const useIntersectionObserver = <T extends HTMLElement>({
   threshold = [0],
   rootMargin = '0px 0px 0px 0px',
 }: UseIntersectionObserverProps) => {
-  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
+  const intersectionObserverRef = useRef<Nullable<IntersectionObserver>>(null);
 
   const callbackAction = usePreservedCallback(action ?? noop);
 

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

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

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

@@ -1,10 +1,11 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
 import { useDebounce } from '../useDebounce';
+import { Nullable } from '@modern-kit/types';
 
 interface WindowSize {
-  width: number | null;
-  height: number | null;
+  width: Nullable<number>;
+  height: Nullable<number>;
 }
 
 interface useWindowSizeProps {

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

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

packages/types/src/Nullable/index.ts

@@ -1 +1 @@
-export type Nullable<T> = T | null | undefined;
+export type Nullable<T> = T | null;

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

@@ -1,6 +1,7 @@
-import { Nullable, StorageType } from '../types';
+import { StorageType } from '../types';
 import { isClient } from '../../device';
 import { isFunction } from '../../validator/isFunction';
+import { Nullable } from '@modern-kit/types';
 
 export const getStorageItem = <T>(
   type: StorageType,

packages/utils/src/storage/types.ts

@@ -1,2 +1 @@
 export type StorageType = 'localStorage' | 'sessionStorage';
-export type Nullable<T> = T | null;

yarn.lock

@@ -4298,6 +4298,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@modern-kit/react@workspace:packages/react"
   dependencies:
+    "@modern-kit/types": "workspace:*"
     "@modern-kit/utils": "workspace:*"
     "@rollup/plugin-commonjs": "npm:^25.0.4"
     "@rollup/plugin-node-resolve": "npm:^15.1.0"