chore: model style && ts import adjust

src/components/AlertBar/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import { buildLog } from '@/utils'
 
@@ -14,7 +14,7 @@ import { Wrapper } from './styles'
 const log = buildLog('c:AlertBar:index')
 
 type TProps = {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const AlertBar: FC<TProps> = ({ children }) => {

src/components/Buttons/ArrowButton.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, useRef, useState, useEffect } from 'react'
+import React, { FC, ReactNode, useRef, useState, useEffect } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON } from '@/config'
@@ -17,7 +17,7 @@ import { Wrapper, Text, LeftIcon, RightIcon } from './styles/arrow_button'
 const log = buildLog('c:Buttons:ArrowButton')
 
 type TProps = {
-  children?: React.ReactNode
+  children?: ReactNode
   onClick?: () => void
   size?: TSIZE
   direction?: 'left' | 'right'

src/components/Buttons/ArrowLink.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON_CMD } from '@/config'
@@ -18,7 +18,7 @@ const log = buildLog('c:Buttons:ArrowLink')
 
 type TProps = {
   className?: string
-  children?: React.ReactNode
+  children?: ReactNode
   size?: TSIZE
   href: string
   target?: '_blank' | ''

src/components/Buttons/Button.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { FC, ReactNode, useEffect, useState } from 'react'
 
 import type { TSIZE_TSM } from '@/spec'
 import { SIZE } from '@/constant'
@@ -21,7 +21,7 @@ const clearTimerIfNeed = (timerId: number): void => {
 }
 
 type TProps = {
-  children?: React.ReactNode
+  children?: ReactNode
   className?: string
   ghost?: boolean
   type?: 'primary' | 'red' | 'ghost'

src/components/Checker/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSIZE_SM } from '@/spec'
 import { ICON } from '@/config'
@@ -17,7 +17,7 @@ import { Wrapper, IconWrapper, Icon, ChildWrapper } from './styles'
 const log = buildLog('c:Checker:index')
 
 type TProps = {
-  children?: React.ReactNode | null
+  children?: ReactNode | null
   checked?: boolean
   hiddenMode?: boolean
   size?: TSIZE_SM

src/components/CustomScroller/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSIZE_SML } from '@/spec'
 import type { TDirection, TScrollDirection } from './spec'
@@ -8,7 +8,7 @@ import VerticalScroller from './VerticalScroller'
 
 export type TProps = {
   direction: TDirection
-  children: React.ReactNode
+  children: ReactNode
   height?: string
   innerHeight?: string
   width?: string

src/components/DigestSentence/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import { ICON } from '@/config'
 import { buildLog } from '@/utils'
@@ -26,12 +26,12 @@ const log = buildLog('c:DigestSentence:index')
 
 type TProps = {
   testid?: string
-  children: React.ReactNode
-  onPreview: () => void
+  children: ReactNode
   top?: number
   bottom?: number
   left?: number
   right?: number
+  onPreview: () => void
 }
 
 const DigestSentence: FC<TProps> = ({

src/components/IconText/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { buildLog, nilOrEmpty } from '@/utils'
@@ -18,7 +18,7 @@ const log = buildLog('c:IconText:index')
 type TProps = {
   iconSrc: string
   round?: boolean
-  children: React.ReactNode
+  children: ReactNode
   size?: TSIZE
   margin?: string
 }

src/components/Img/index.tsx

@@ -5,7 +5,7 @@
  * Renders an image, enforcing the usage of the alt="" tag
  */
 
-import React from 'react'
+import React, { ReactNode } from 'react'
 import { ReactSVG } from 'react-svg'
 
 import { buildLog } from '@/utils'
@@ -21,7 +21,7 @@ type IProps = {
   alt?: string
   className?: string
   loading?: boolean
-  fallback?: React.ReactNode | null
+  fallback?: ReactNode | null
   noLazy?: boolean
   scrollPosition?: any
   // see https://www.npmjs.com/package/react-lazy-load-image-component

src/components/MasonryCards/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import Masonry from 'react-masonry-css'
 
 import { buildLog } from '@/utils'
@@ -17,7 +17,7 @@ const log = buildLog('c:MasonryCards:index')
 type TProps = {
   testid?: string
   column?: number
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const MasonryCards: FC<TProps> = ({

src/components/Modal/index.js → src/components/Modal/index.tsx

@@ -4,30 +4,41 @@
  *
  */
 
-import React, { useEffect } from 'react'
-import T from 'prop-types'
+import React, { FC, ReactNode, useEffect } from 'react'
 import usePortal from 'react-useportal'
 
 import { ICON_CMD } from '@/config'
 import { buildLog, toggleGlobalBlur } from '@/utils'
 
 import Belt from './Belt'
 
-import { Mask, Wrapper, CloseBtn, ChildrenWrapper } from './styles'
+import { Mask, Wrapper, CloseBtn, EscHint, ChildrenWrapper } from './styles'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:Modal:index')
 
-const Modal = ({
+type TProps = {
+  children: ReactNode
+  show?: boolean
+  showBelt?: boolean
+  width?: string
+  showCloseBtn?: boolean
+  mode?: 'default' | 'error'
+  background?: 'default' | 'preview'
+  offsetTop?: string
+  onClose?: () => void
+}
+
+const Modal: FC<TProps> = ({
   children,
-  show,
-  showBelt,
-  width,
-  showCloseBtn,
-  onClose,
-  mode,
-  background,
-  offsetTop,
+  show = false,
+  showBelt = false,
+  width = '600px',
+  showCloseBtn = false,
+  onClose = log,
+  mode = 'default',
+  background = 'default',
+  offsetTop = '13%',
 }) => {
   const { Portal } = usePortal()
 
@@ -51,6 +62,7 @@ const Modal = ({
                 show={showCloseBtn}
                 onClick={onClose}
               />
+              <EscHint>ESC</EscHint>
               <ChildrenWrapper onClick={(e) => e.stopPropagation()}>
                 {children}
               </ChildrenWrapper>
@@ -62,28 +74,4 @@ const Modal = ({
   )
 }
 
-Modal.propTypes = {
-  // https://www.npmjs.com/package/prop-types
-  children: T.node.isRequired,
-  show: T.bool,
-  showBelt: T.bool,
-  onClose: T.func,
-  width: T.string,
-  showCloseBtn: T.bool,
-  mode: T.oneOf(['default', 'error']),
-  background: T.oneOf(['default', 'preview']),
-  offsetTop: T.string,
-}
-
-Modal.defaultProps = {
-  show: false,
-  showBelt: false,
-  onClose: log,
-  width: '600px',
-  showCloseBtn: false,
-  mode: 'default',
-  background: 'default',
-  offsetTop: '13%',
-}
-
 export default React.memo(Modal)

src/components/Modal/styles/index.ts

@@ -55,7 +55,7 @@ export const CloseBtn = styled(Img)<TCloseBtn>`
     mode === 'default' ? theme('font') : theme('baseColor.red')};
   position: absolute;
   top: 0;
-  right: -45px;
+  right: -48px;
   ${css.size(30)};
   display: ${({ show }) => (show ? 'block' : 'none')};
   z-index: ${css.zIndex.modalCloseBtn};
@@ -66,3 +66,11 @@ export const CloseBtn = styled(Img)<TCloseBtn>`
     cursor: pointer;
   }
 `
+export const EscHint = styled.div`
+  color: ${theme('font')};
+  opacity: 0.7;
+  position: absolute;
+  top: 38px;
+  right: -46px;
+  font-size: 13px;
+`

src/components/Switcher/IconSwitcher.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import { findIndex, propEq } from 'ramda'
 
 import { buildLog, nilOrEmpty } from '@/utils'
@@ -25,16 +25,11 @@ const log = buildLog('c:IconSwitcher:index')
 
 type TItem = {
   iconSrc?: string
-  localIcon?: React.ReactNode
+  localIcon?: ReactNode
   key: string
   desc?: string
 }
 
-type TIconComp = {
-  item: TItem
-  activeKey: string
-}
-
 type TTabLabel = {
   item: TItem
   activeKey: string

src/components/Tooltip/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, useState, useRef } from 'react'
+import React, { FC, ReactNode, useState, useRef } from 'react'
 
 import type { TTooltipPlacement, TTooltipAnimation } from '@/spec'
 import { css, buildLog, isDescendant } from '@/utils'
@@ -26,8 +26,8 @@ import {
 const log = buildLog('c:Tooltip:index')
 
 type TProps = {
-  children: React.ReactNode
-  content: string | React.ReactNode
+  children: ReactNode
+  content: string | ReactNode
   animation?: TTooltipAnimation
   placement?: TTooltipPlacement
   // more options see: https://atomiks.github.io/tippyjs/all-options/

src/containers/layout/GlobalLayout/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, useEffect } from 'react'
+import React, { FC, ReactNode, useEffect } from 'react'
 
 import type { Nullable, TSEO } from '@/spec'
 import { ANCHOR, SIZE } from '@/constant'
@@ -36,7 +36,7 @@ import {
 
 type TProps = {
   globalLayout?: TStore
-  children: React.ReactNode
+  children: ReactNode
   seoConfig: TSEO
   errorCode?: number // 400 | 500 | 404
   errorPath?: Nullable<string>

src/containers/layout/GlobalLayout/logic.ts

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { ReactNode, useEffect } from 'react'
 
 import type { TScrollDirection } from '@/spec'
 import { buildLog } from '@/utils'
@@ -54,9 +54,9 @@ export const logBuddha = (): void => {
 // cloning children with new props
 // see detail: https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children
 export const childrenWithProps = (
-  children: React.ReactNode,
+  children: ReactNode,
   props: Record<string, unknown>,
-): React.ReactNode => {
+): ReactNode => {
   return React.Children.map(children, (child) => {
     // checking isValidElement is the safe way and avoids a typescript error too
     if (React.isValidElement(child)) {

src/containers/tool/Drawer/Viewer/DesktopView.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSwipeOption } from '../spec'
 import AddOn from '../AddOn'
@@ -13,7 +13,7 @@ type TProps = {
   rightOffset: string
   type: string
   imageUploading: boolean
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const DesktopView: FC<TProps> = ({