chore: (js->ts): covert more

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

@@ -5,8 +5,8 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
+import type { TSIZE_SM } from '@/spec'
 import { ICON } from '@/config'
 import { SIZE } from '@/constant'
 import { buildLog } from '@/utils'
@@ -16,7 +16,21 @@ import { Wrapper, IconWrapper, Icon, ChildWrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:Checker:index')
 
-const Checker = ({ checked, onChange, hiddenMode, size, children }) => {
+type TProps = {
+  children: React.ReactNode
+  checked?: boolean
+  hiddenMode: boolean
+  size?: TSIZE_SM
+  onChange: (checked: boolean) => void
+}
+
+const Checker: React.FC<TProps> = ({
+  checked = false,
+  onChange = log,
+  hiddenMode = false,
+  size = SIZE.MEDIUM,
+  children,
+}) => {
   const show = checked || !hiddenMode
 
   return (
@@ -31,20 +45,4 @@ const Checker = ({ checked, onChange, hiddenMode, size, children }) => {
   )
 }
 
-Checker.propTypes = {
-  checked: T.bool,
-  hiddenMode: T.bool,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-  children: T.oneOfType([T.string, T.node]),
-  onChange: T.func,
-}
-
-Checker.defaultProps = {
-  checked: false,
-  hiddenMode: false,
-  children: '',
-  size: SIZE.MEDIUM,
-  onChange: log,
-}
-
 export default React.memo(Checker)

src/spec/index.ts

@@ -1,6 +1,6 @@
 import { TRootStore as RootStoreType } from '@/stores/RootStore'
 
-export type { TSIZE, TSIZE_TS, TSIZE_TSM, TSIZE_SML } from './size'
+export type { TSIZE, TSIZE_TS, TSIZE_TSM, TSIZE_SML, TSIZE_SM } from './size'
 export type { TButton } from './comp'
 
 export type TThemeName =
@@ -84,6 +84,15 @@ export type TViewing = {
 export type TTheme = any
 // export type TTheme = string
 
+export type TThemeMap = {
+  toast: {
+    successBar: string
+    errorBar: string
+    warnBar: string
+    infoBar: string
+  }
+}
+
 // google analytis format
 export type GA_EVENT = {
   action: string

src/spec/size.ts

@@ -4,3 +4,4 @@ export type TSIZE = 'TINY' | 'SMALL' | 'MEDIUM' | 'LARGE'
 export type TSIZE_TS = 'TINY' | 'SMALL'
 export type TSIZE_TSM = 'TINY' | 'SMALL' | 'MEDIUM'
 export type TSIZE_SML = 'SMALL' | 'MEDIUM' | 'LARGE'
+export type TSIZE_SM = 'SMALL' | 'MEDIUM'

utils/graphql.js → utils/graphql.ts

@@ -5,11 +5,11 @@ import { GRAPHQL_ENDPOINT, PAGE_SIZE } from '@/config'
 import { nilOrEmpty, isString } from './validator'
 
 export const asyncRes = curry((key, obj) => and(obj[key], has(key, obj)))
-export const asyncErr = (key) => pathEq(['error'], key)
+export const asyncErr = (key: string): any => pathEq(['error'], key)
 
 // NOTE the client with jwt info is used for getInitialProps for SSR
 // to load user related data
-export const makeGQClient = (token) => {
+export const makeGQClient = (token: string): any => {
   if (!nilOrEmpty(token)) {
     const client = new GraphQLClient(GRAPHQL_ENDPOINT, {
       headers: {
@@ -23,7 +23,10 @@ export const makeGQClient = (token) => {
   }
 }
 
-export const makeGithubExplore = (GRAPHQL_ENDPOINT, token) => {
+export const makeGithubExplore = (
+  GRAPHQL_ENDPOINT: string,
+  token: string,
+): any => {
   const client = new GraphQLClient(GRAPHQL_ENDPOINT, {
     headers: {
       authorization: `bearer ${token}`,
@@ -32,14 +35,16 @@ export const makeGithubExplore = (GRAPHQL_ENDPOINT, token) => {
   return client
 }
 
-export const pagedFilter = (page, options = {}) =>
+export const pagedFilter = (page, options = {}): Record<string, any> =>
   merge({ page, size: PAGE_SIZE.D }, options)
 
 /*
  * map value(string) to UPPER case for server absinthe-atom format
  * e.p: is server required :post, front-end should pass "POST"
  */
-export const atomizeValues = (_obj) => {
+export const atomizeValues = (
+  _obj: Record<string, any>,
+): Record<string, string> => {
   const obj = clone(_obj)
 
   Object.keys(obj).forEach((k) => {
@@ -55,4 +60,6 @@ export const atomizeValues = (_obj) => {
 // in rxjs, if you want to send parallel request you should use complex method
 // like forkJoin .. which need to refactor whole sr71 part
 // currently the simple later is fine
-export const later = (func, time = 200) => setTimeout(func, time)
+export const later = (func, time = 200): ReturnType<typeof setTimeout> => {
+  return setTimeout(func, time)
+}

utils/helper.ts

@@ -13,10 +13,7 @@ type TSORTABLE_ITEMS = {
   index?: number
 }[]
 
-/* eslint-disable */
-// TODO: document ?
-export const Global = typeof window !== 'undefined' ? window : global
-/* eslint-enable */
+export const Global: any = typeof window !== 'undefined' ? window : {}
 
 // those two function used to encode/decode the value in element dataset
 export const o2s = JSON.stringify

utils/logger.js → utils/logger.ts

@@ -40,7 +40,7 @@ if (
  * debug('Some message')
  * @returns {Function}
  */
-export const buildLog = (namespace) => _debug(`${namespace}`)
+export const buildLog = (namespace: string) => _debug(`${namespace}`)
 
 /**
  * Default debugger, simple log.

utils/toast.js → utils/toast.ts

@@ -4,10 +4,20 @@
 
 import { merge, reject } from 'ramda'
 
+import { TThemeMap } from '@/spec'
 import { Global } from './helper'
 import { nilOrEmpty } from './validator'
 
-const checkValid = () => Global.iziToast || false
+type TToastType = 'success' | 'error' | 'warn'
+
+type TToastOption = {
+  title: string
+  msg: string
+  progressBarColor: string
+  position: 'bottom' | 'top'
+}
+
+const checkValid = () => (Global as any).iziToast || false
 
 const defaultOptions = {
   title: 'coderplanets',
@@ -20,26 +30,33 @@ const defaultOptions = {
   transitionIn: 'fadeInDown',
 }
 
-const doNotify = (options = {}) => {
-  if (!checkValid()) return false
-
-  /* eslint-disable no-undef */
+const doNotify = (options = {}): void => {
+  if (!checkValid()) {
+    return
+  }
+  const { iziToast } = Global as any
   iziToast.show(merge(defaultOptions, reject(nilOrEmpty, options)))
-  return false
 }
 
 export const toast = {
-  info: ({ title, msg, progressBarColor, position }) =>
-    doNotify({ title, message: msg, progressBarColor, position }),
-  error: ({ title, msg, progressBarColor, position }) =>
-    doNotify({ title, message: msg, progressBarColor, position }),
-  success: ({ title, msg, progressBarColor, position }) =>
-    doNotify({ title, message: msg, progressBarColor, position }),
-  warn: ({ title, msg, progressBarColor, position }) =>
-    doNotify({ title, message: msg, progressBarColor, position }),
+  info: ({ title, msg, progressBarColor, position }: TToastOption): void => {
+    doNotify({ title, message: msg, progressBarColor, position })
+  },
+  error: ({ title, msg, progressBarColor, position }: TToastOption): void => {
+    doNotify({ title, message: msg, progressBarColor, position })
+  },
+  success: ({ title, msg, progressBarColor, position }: TToastOption): void => {
+    doNotify({ title, message: msg, progressBarColor, position })
+  },
+  warn: ({ title, msg, progressBarColor, position }: TToastOption): void => {
+    doNotify({ title, message: msg, progressBarColor, position })
+  },
 }
 
-export const toastBarColor = (type, themeData) => {
+export const toastBarColor = (
+  type: TToastType,
+  themeData: TThemeMap,
+): string => {
   switch (type) {
     case 'success':
       return themeData.toast.successBar