chore(ts-workflow): move js files -> ts

config/next_offline.js

@@ -1,5 +1,6 @@
 // Cache strategies
-// By default next-offline will precache all the Next.js webpack emitted files and the user-defined static ones (inside /static)
+// By default next-offline will precache all the Next.js webpack emitted
+// files and the user-defined static ones (inside /static)
 // see more: https://github.com/hanford/next-offline
 
 module.exports = {

package.json

@@ -140,6 +140,8 @@
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@groupher/eslint-config-web": "2.0.9",
+    "@types/jest": "^26.0.20",
+    "@types/mocha": "^8.2.1",
     "@types/ramda": "^0.27.38",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",

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

@@ -5,7 +5,6 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { buildLog } from '@/utils'
 
@@ -14,14 +13,12 @@ import { Wrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:AlertBar:index')
 
-const AlertBar = ({ children }) => {
-  return <Wrapper testid="alertBar">{children}</Wrapper>
+type IProps = {
+  children: React.ReactNode
 }
 
-AlertBar.propTypes = {
-  children: T.oneOfType([T.string, T.node]).isRequired,
+const AlertBar: React.FC<IProps> = ({ children }) => {
+  return <Wrapper testid="alertBar">{children}</Wrapper>
 }
 
-AlertBar.defaultProps = {}
-
 export default React.memo(AlertBar)

src/components/AvatarsRow/styles/metric.js → src/components/AvatarsRow/styles/metric.ts

@@ -3,7 +3,7 @@ import { SIZE } from '@/constant'
  * NOTE:  Li size should always smaller than the avatar size
  */
 
-export const getLiSize = (size) => {
+export const getLiSize = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
       return '15px'
@@ -19,7 +19,10 @@ export const getLiSize = (size) => {
   }
 }
 
-export const getAvatarSize = (size, fmt = 'string') => {
+export const getAvatarSize = (
+  size: string,
+  fmt = 'string',
+): string | number => {
   switch (size) {
     case SIZE.SMALL: {
       return fmt === 'string' ? '24px' : 24
@@ -35,21 +38,21 @@ export const getAvatarSize = (size, fmt = 'string') => {
   }
 }
 
-export const getTotalCountSize = (total) => {
+export const getTotalCountSize = (total: number): string => {
   if (total < 99) return '13px'
   if (total >= 100 && total <= 999) return '12px'
   return '10px'
 }
 
-export const getMoreTextWidth = (total) => {
+export const getMoreTextWidth = (total: number): string => {
   if (total < 10) return '23px'
   if (total >= 10 && total <= 99) return '32px'
   if (total >= 100 && total <= 999) return '44px'
 
   return '52px'
 }
 
-export const getUlMarginRight = (total) => {
+export const getUlMarginRight = (total: number): string => {
   if (total < 10) return '-8px'
   if (total >= 10 && total <= 99) return '-2px'
   if (total >= 100 && total <= 999) return '10px'

src/components/Buttons/styles/button.js → src/components/Buttons/styles/button.ts

@@ -41,7 +41,7 @@ export const Wrapper = styled.button`
   opacity: ${({ noBorder }) => (noBorder ? '0.7' : 1)};
 
   &:hover {
-    color: ${({ ghost, disabled }) => getColor(ghost, disabled, true)};
+    color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
     border-color: ${({ noBorder, disabled }) =>
       getBorderColor(noBorder, disabled, true)};
     background-color: ${({ ghost, disabled }) =>
@@ -51,7 +51,7 @@ export const Wrapper = styled.button`
   }
 
   &:focus {
-    color: ${({ ghost, disabled }) => getColor(ghost, disabled, true)};
+    color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
     border-color: ${({ noBorder, disabled }) =>
       getBorderColor(noBorder, disabled, true)};
     background-color: ${({ ghost, disabled }) =>
@@ -60,7 +60,7 @@ export const Wrapper = styled.button`
   }
 
   &:active {
-    color: ${({ ghost, disabled }) => getColor(ghost, disabled, true)};
+    color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
     background-color: ${({ ghost, disabled }) =>
       getBackgroundColor(ghost, disabled, true)};
     opacity: 1;

src/components/Buttons/styles/metircs/arrow_button.js → src/components/Buttons/styles/metircs/arrow_button.ts

@@ -19,7 +19,7 @@ const LARGE_MARGIN_HOVER = 10
 
 // arrow button should have width
 // otherwise the arrow will jump
-export const getWidth = (size, width = 30) => {
+export const getWidth = (size: string, width = 30): string => {
   switch (size) {
     case SIZE.TINY: {
       return `${width + TINY_SIZE + TINY_MARGIN_HOVER}px`
@@ -36,7 +36,7 @@ export const getWidth = (size, width = 30) => {
   }
 }
 
-export const getIconSize = (size) => {
+export const getIconSize = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
       return `${TINY_SIZE}px`
@@ -53,7 +53,7 @@ export const getIconSize = (size) => {
   }
 }
 
-export const getFontSize = (size) => {
+export const getFontSize = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
       return `${TINY_SIZE}px`
@@ -70,7 +70,7 @@ export const getFontSize = (size) => {
   }
 }
 
-export const getMargin = (size, hover = false) => {
+export const getMargin = (size: string, hover = false): string => {
   switch (size) {
     case SIZE.TINY: {
       return !hover ? `${TINY_MARGIN}px` : `${TINY_MARGIN_HOVER}px`
@@ -87,7 +87,7 @@ export const getMargin = (size, hover = false) => {
   }
 }
 
-export const getSimpleMargin = (size, hover = false) => {
+export const getSimpleMargin = (size: string, hover = false): string => {
   switch (size) {
     case SIZE.TINY: {
       return !hover ? `${TINY_MARGIN}px` : `${TINY_MARGIN_HOVER}px`

src/components/Buttons/styles/metircs/arrow_link.js → src/components/Buttons/styles/metircs/arrow_link.ts

@@ -1,6 +1,6 @@
 import { SIZE } from '@/constant'
 
-export const getTextSize = (size) => {
+export const getTextSize = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
       return '12px'
@@ -20,4 +20,4 @@ export const getTextSize = (size) => {
   }
 }
 
-export const getIconSize = (size) => getTextSize(size)
+export const getIconSize = (size: string): string => getTextSize(size)

src/components/Buttons/styles/metircs/button.js → src/components/Buttons/styles/metircs/button.ts

@@ -1,7 +1,9 @@
 import { SIZE } from '@/constant'
 import { theme } from '@/utils'
 
-export const getColor = (ghost, disabled) => {
+import { TTheme } from '@/types'
+
+export const getColor = (ghost: boolean, disabled: boolean): TTheme => {
   if (ghost) {
     return theme('button.primary')
   }
@@ -12,7 +14,11 @@ export const getColor = (ghost, disabled) => {
   return theme('button.fg')
 }
 
-export const getBackgroundColor = (ghost, disabled, hover = false) => {
+export const getBackgroundColor = (
+  ghost: boolean,
+  disabled: boolean,
+  hover = false,
+): TTheme => {
   if (ghost) {
     return 'transparent'
   }
@@ -23,7 +29,11 @@ export const getBackgroundColor = (ghost, disabled, hover = false) => {
   return hover ? theme('button.hoverBg') : theme('button.primary')
 }
 
-export const getBorderColor = (noBorder, disabled, hover = false) => {
+export const getBorderColor = (
+  noBorder: boolean,
+  disabled: boolean,
+  hover = false,
+): TTheme => {
   if (noBorder) {
     return 'transparent'
   }
@@ -34,7 +44,7 @@ export const getBorderColor = (noBorder, disabled, hover = false) => {
   return hover ? theme('button.hoverBg') : theme('button.primary')
 }
 
-export const getHeight = (size) => {
+export const getHeight = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
       return '18px'
@@ -50,7 +60,7 @@ export const getHeight = (size) => {
   }
 }
 
-export const getPadding = (size) => {
+export const getPadding = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
       return '1px 5px'
@@ -66,7 +76,7 @@ export const getPadding = (size) => {
   }
 }
 
-export const getFontSize = (size) => {
+export const getFontSize = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
       return '11px'

src/components/Checker/styles/metric.js → src/components/Checker/styles/metric.ts

@@ -1,6 +1,6 @@
 import { SIZE } from '@/constant'
 
-export const getIconSize = (size) => {
+export const getIconSize = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
       return '14px'
@@ -12,7 +12,7 @@ export const getIconSize = (size) => {
   }
 }
 
-export const getFontSize = (size) => {
+export const getFontSize = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
       return '12px'
@@ -24,7 +24,7 @@ export const getFontSize = (size) => {
   }
 }
 
-export const getBorderRadius = (size) => {
+export const getBorderRadius = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
       return '4px'

src/components/CustomScroller/styles/metrics.js → src/components/CustomScroller/styles/metrics.ts

@@ -2,7 +2,7 @@ import { SIZE } from '@/constant'
 
 const ShadowBgColor = '#022029'
 
-const horizontalShadowBg = (type) => {
+const horizontalShadowBg = (type: string): string => {
   switch (type) {
     case SIZE.SMALL: {
       return `-webkit-radial-gradient(
@@ -26,7 +26,7 @@ const horizontalShadowBg = (type) => {
     }
   }
 }
-const verticalShadowBg = (type) => {
+const verticalShadowBg = (type: string): string => {
   switch (type) {
     case SIZE.SMALL: {
       return `
@@ -44,14 +44,17 @@ const verticalShadowBg = (type) => {
 }
 
 // horizontal getShadowBackground
-export const getShadowBackground = (type, direction = 'horizontal') => {
+export const getShadowBackground = (
+  type: string,
+  direction = 'horizontal',
+): string => {
   return direction === 'horizontal'
     ? horizontalShadowBg(type)
     : verticalShadowBg(type)
 }
 
 // horizontal getShadowWidth
-export const getShadowSize = (type) => {
+export const getShadowSize = (type: string): string => {
   switch (type) {
     case SIZE.SMALL: {
       return '30px'
@@ -67,7 +70,7 @@ export const getShadowSize = (type) => {
 }
 
 // vertical getShadowWidth
-export const getShadowHeight = (type) => {
+export const getShadowHeight = (type: string): string => {
   switch (type) {
     case SIZE.SMALL: {
       return '20px'
@@ -82,7 +85,7 @@ export const getShadowHeight = (type) => {
   }
 }
 
-const horizontalScrollbarHeight = (type) => {
+const horizontalScrollbarHeight = (type: string): string => {
   switch (type) {
     case SIZE.TINY: {
       return '3px'
@@ -100,7 +103,7 @@ const horizontalScrollbarHeight = (type) => {
   }
 }
 
-const verticalScrollbarWidth = (type) => {
+const verticalScrollbarWidth = (type: string): string => {
   switch (type) {
     case SIZE.TINY: {
       return '6px'
@@ -120,7 +123,10 @@ const verticalScrollbarWidth = (type) => {
 
 // horizontal ScrollbarHeight
 // see https://kingsora.github.io/OverlayScrollbars/#!documentation/classnames
-export const getScrollbarThin = (type, direction) => {
+export const getScrollbarThin = (
+  type: string,
+  direction = 'horizontal',
+): string => {
   return direction === 'horizontal'
     ? horizontalScrollbarHeight(type)
     : verticalScrollbarWidth(type)

src/components/ExpandIcon/styles/metric.js → src/components/ExpandIcon/styles/metric.ts

@@ -1,7 +1,9 @@
 import { theme } from '@/utils'
 import { SIZE } from '@/constant'
 
-export const getNormalColor = (type) => {
+import { TTheme } from '@/types'
+
+export const getNormalColor = (type: string): TTheme => {
   switch (type) {
     case 'green':
       return theme('baseColor.green')
@@ -11,7 +13,7 @@ export const getNormalColor = (type) => {
   }
 }
 
-export const getActiveColor = (type) => {
+export const getActiveColor = (type: string): TTheme => {
   switch (type) {
     case 'green':
       return theme('baseColor.green')
@@ -21,7 +23,7 @@ export const getActiveColor = (type) => {
   }
 }
 
-export const getNormalIconSize = (size) => {
+export const getNormalIconSize = (size: string): TTheme => {
   switch (size) {
     case SIZE.SMALL:
       return '11px'
@@ -31,7 +33,7 @@ export const getNormalIconSize = (size) => {
   }
 }
 
-export const getActiveIconSize = (size) => {
+export const getActiveIconSize = (size: string): TTheme => {
   switch (size) {
     case SIZE.SMALL:
       return '12px'
@@ -41,7 +43,7 @@ export const getActiveIconSize = (size) => {
   }
 }
 
-export const getNormalTextSize = (size) => {
+export const getNormalTextSize = (size: string): TTheme => {
   switch (size) {
     case SIZE.SMALL:
       return '11px'